包含各种常用输入元素的HTML5注册表单实例

包含文本输入、邮件、密码、单选框、分类下拉选择框、复选框、发光的提交按钮。

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
:root {
    background-color: #2e4049;
    color: white;
}
form {
    width: 40%;
    max-width: 350px;
    margin: 0 auto 30px;
}
fieldset {
    background: #202d33;
    border-radius: 4px;
    border: none;
    border-top: 2px solid tomato;
    margin-bottom: 30px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, .3);
    padding: 10px 15px;
}
legend {
    font-weight: bold;
    margin-bottom: 10px;
    padding-right: 10px;
}
.number {
    background: tomato;
    margin-right: 10px;
    padding: 10px 4px 4px;
}
h1 {
    margin: 60px 0;
    text-align: center;
    font-size: 3em;
    color: tomato;
    text-shadow: 0 1px 0 #ea553a, 0 3px 0 #b72b12, 0 7px 0 #420900, 0 5px 10px #0b3f3b, 0 5px 11px #ff546a, 0 0 20px tomato;
}
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea,
select {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    font-size: 16px;
    height: auto;
    margin: 0;
    outline: 0;
    padding: 10px;
    width: 100%;
    background-color: #e8eeef;
    color: #2e4049;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
    margin-bottom: 20px;
}
input[type="checkbox"] {
    margin: 0 4px 8px 0;
}
input[type="radio"] {
    margin: 0 2px 0 15px;
}
label {
    display: inline-block;
    margin-bottom: 10px;
}
button {
    display: block;
    width: 30%;
    margin: 50px auto 0;
    padding: 10px 20px;
    background-color: tomato;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
    box-shadow: 0 2px 0 #ea553a, 0 4px 0 #b72b12, 0 6px 0 #420900, 0 6px 10px #0b3f3b, 0 6px 11px #ff546a, 0 0 20px tomato;
}
button:hover {
    text-shadow: 0 3px 2px rgba(0, 0, 0, .5);
}
button:active {
    box-shadow: 0 0px 0 #ea553a, 0 1px 0 #b72b12, 0 2px 0 #420900, 0 2px 10px #0b3f3b, 0 2px 11px #ff546a, 0 0 20px tomato;
    outline: 0;
}
button:focus {
    outline: 0;
}
@media (max-width: 840px) {
    form {
        width: 70%;
    }
}
@media (max-width: 490px) {
    form {
        width: 100%;
    }
    button {
        width: 50%;
    }
}

HTML

<form action="#" method="post">
    <h1>Sign Up</h1>
    <fieldset>
        <legend><span class="number">1</span> Your basic info</legend>
        <label for="name">Name:</label>
        <input type="text" id="name" name="user_name">

<label for="mail">Email:</label>
        <input type="email" id="mail" name="user_email">

<label for="password">Password:</label>
        <input type="password" id="password" name="user_password">

<label>Age:</label>
        <input type="radio" id="under_13" value="under_13" name="user_age">
        <label for="under_13" class="light">Under 13</label>

<fieldset>
        <legend><span class="number">2</span> Your profile</legend>

<label for="bio">Biography:</label>
        <textarea id="bio" name="user_bio"></textarea>

<optgroup label="Web">
                <option value="frontend_developer">Front-End Developer</option>
                <option value="php_developer">PHP Developer</option>
                <option value="python_developer">Python Developer</option>
                <option value="rails_developer">Rails Developer</option>
                <option value="web_designer">Web Designer</option>
                <option value="wordpress developer">Wordpress Developer</option>
            </optgroup>

<optgroup label="Mobile">
                <option value="android_developer">Android Developer</option>
                <option value="ios_developer">iOS Developer</option>
                <option value="mobile_designer">Mobile Designer</option>
            </optgroup>

<optgroup label="Business">
                <option value="business_owner">Business Owner</option>
                <option value="freelancer">Freelancer</option>
            </optgroup>
        </select>

<label>Interests:</label>
        <br>
        <input type="checkbox" id="development" value="interest_development" name="user_interest">
        <label for="development">Development</label>
        <br>

<input type="checkbox" id="design" value="interest_design" name="user_interest">
        <label for="design">Design</label>
        <br>

<input type="checkbox" id="business" value="business" name="user_interest">
        <label for="business">Business</label>

</fieldset>
    <button type="submit">Sign Up</button>
</form>

包含文本输入、邮件、密码、单选框、分类下拉选择框、复选框、发光的提交按钮。

编辑器支持Emmet

快捷键

包含文本输入、邮件、密码、单选框、分类下拉选择框、复选框、发光的提交按钮。

HTML5/Canvas使用单纯形噪音算法实现的粒子乱流动画

使用HTML5 WebGL GLSL着色器代码实现的太空星云图粒子动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：