底部自带进度条的分步骤注册单输入框表单

可用于小屏幕引导式分阶段用户注册。

h5, form, register

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3041
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

// Questions Array
const questions = [{
    question: 'Enter Your First Name'
}, {
    question: 'Enter Your Last Name'
}, {
    question: 'Enter Your Email',
    pattern: /\S+@\S+\.\S+/
}, {
    question: 'Create A Password',
    type: 'password'
}];

// Transition Times
const shakeTime = 100; // Shake Transition Time
const switchTime = 200; // Transition Between Questions

// Init Position At First Question
let position = 0;

// Init DOM Elements
const formBox = document.querySelector('#form-box');
const nextBtn = document.querySelector('#next-btn');
const prevBtn = document.querySelector('#prev-btn');
const inputGroup = document.querySelector('#input-group');
const inputField = document.querySelector('#input-field');
const inputLabel = document.querySelector('#input-label');
const inputProgress = document.querySelector('#input-progress');
const progress = document.querySelector('#progress-bar');

// EVENTS

// Get Question On DOM Load
document.addEventListener('DOMContentLoaded', getQuestion);

// Next Button Click
nextBtn.addEventListener('click', validate);

// Input Field Enter Click
inputField.addEventListener('keyup', e => {
    if (e.keyCode == 13) {
        validate();
    }
});

// FUNCTIONS

// Get Question From Array & Add To Markup
function getQuestion() {
    // Get Current Question
    inputLabel.innerHTML = questions[position].question;
    // Get Current Type
    inputField.type = questions[position].type || 'text';
    // Get Current Answer
    inputField.value = questions[position].answer || '';
    // Focus On Element
    inputField.focus();

// Set Progress Bar Width - Variable to the questions length
    progress.style.width = (position * 100) / questions.length + '%';

// Add User Icon OR Back Arrow Depending On Question
    prevBtn.className = position ? 'fas fa-arrow-left' : 'fas fa-user';

showQuestion();
}

// Display Question To User
function showQuestion() {
    inputGroup.style.opacity = 1;
    inputProgress.style.transition = '';
    inputProgress.style.width = '100%';
}

// Hide Question From User
function hideQuestion() {
    inputGroup.style.opacity = 0;
    inputLabel.style.marginLeft = 0;
    inputProgress.style.width = 0;
    inputProgress.style.transition = 'none';
    inputGroup.style.border = null;
}

// Transform To Create Shake Motion
function transform(x, y) {
    formBox.style.transform = `translate(${x}px, ${y}px)`;
}

// Validate Field
function validate() {
    // Make Sure Pattern Matches If There Is One
    if (!inputField.value.match(questions[position].pattern || /.+/)) {
        inputFail();
    } else {
        inputPass();
    }
}

// Field Input Fail
function inputFail() {
    formBox.className = 'error';
    // Repeat Shake Motion -  Set i to number of shakes
    for (let i = 0; i < 6; i++) {
        setTimeout(transform, shakeTime * i, ((i % 2) * 2 - 1) * 20, 0);
        setTimeout(transform, shakeTime * 6, 0, 0);
        inputField.focus();
    }
}

// Field Input Passed
function inputPass() {
    formBox.className = '';
    setTimeout(transform, shakeTime * 0, 0, 10);
    setTimeout(transform, shakeTime * 1, 0, 0);

// Store Answer In Array
    questions[position].answer = inputField.value;

// Increment Position
    position++;

// If New Question, Hide Current and Get Next
    if (questions[position]) {
        hideQuestion();
        getQuestion();
    } else {
        // Remove If No More Questions
        hideQuestion();
        formBox.className = 'close';
        progress.style.width = '100%';

// Form Complete
        formComplete();
    }
}

// All Fields Complete - Show h1 end
function formComplete() {
    const h1 = document.createElement('h1');
    h1.classList.add('end');
    h1.appendChild(
        document.createTextNode(
            `Thanks ${
        questions[0].answer
      } You are registered and will get an email shortly`
        )
    );
    setTimeout(() => {
        formBox.parentElement.appendChild(h1);
        setTimeout(() => (h1.style.opacity = 1), 50);
    }, 1000);
}

编译

CSS

@import url("https://fonts.googleapis.com/css?family=Pacifico|Roboto");
body {
    background: #428bca;
    font-family: 'Roboto', sans-serif;
    margin: 0;
}
h1.logo {
    color: #fff;
    font-family: 'Pacifico', cursive;
    font-size: 4em;
}
h1.end {
    position: relative;
    color: #fff;
    opacity: 0;
    transition: 0.8s ease-in-out;
}
#container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: top;
    align-items: center;
}
#form-box {
    background: #fff;
    position: relative;
    width: 600px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.1), 0 6px 10px 5px rgba(0, 0, 0, 0.1), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
    transition: transform 0.1s ease-in-out;
}
#form-box.close {
    width: 0;
    padding: 0;
    overflow: hidden;
    transition: 0.8s ease-in-out;
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0);
}
#next-btn {
    position: absolute;
    right: 20px;
    bottom: 10px;
    font-size: 40px;
    color: #428bca;
    float: right;
    cursor: pointer;
    z-index: 2;
}
#next-btn:hover {
    color: #b9d4ec;
}
#prev-btn {
    position: absolute;
    font-size: 18px;
    left: 30px;
    top: 12px;
    z-index: 2;
    color: #9e9e9e;
    float: right;
    cursor: pointer;
}
#prev-btn:hover {
    color: #b9d4ec;
}
#input-group {
    position: relative;
    padding: 30px 20px 20px 20px;
    margin: 10px 60px 10px 10px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
#input-group input {
    position: relative;
    width: 100%;
    border: none;
    font-size: 20px;
    font-weight: bold;
    outline: 0;
    background: transparent;
    box-shadow: none;
}
#input-group #input-label {
    position: absolute;
    pointer-events: none;
    top: 32px;
    left: 20px;
    font-size: 20px;
    font-weight: bold;
    transition: 0.2s ease-in-out;
}
#input-group input:valid + #input-label {
    top: 6px;
    left: 42px;
    margin-left: 0 !important;
    font-size: 11px;
    font-weight: normal;
    color: #9e9e9e;
}
#input-progress {
    border-bottom: 3px solid #428bca;
    width: 0;
    transition: width 0.6s ease-in-out;
}
#progress-bar {
    position: absolute;
    background: #b9d4ec;
    height: 10px;
    width: 0;
    transition: width 0.5s ease-in-out;
}
.close #next-btn,
.close #prev-btn {
    color: #fff;
}
.error #input-progress {
    border-color: #ff2d26;
}
.error #next-btn {
    color: #ff2d26;
}
@media (max-width: 600px) {
    #form-box {
        width: 80%;
    }
}

HTML

可用于小屏幕引导式分阶段用户注册。

h5, form, register

编辑器支持Emmet

快捷键

可用于小屏幕引导式分阶段用户注册。

h5, form, register

一款白绿风格带进度提示的多步骤信息提交表单模板

简单的3步引导注册表单

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：