H5表单新增类型和属性案例-注册表单源代码

使用了一些常用input组件: 日期选择（type=date），链接（type=url），滑块式范围选择（type=range）等。

HTML5, 表单

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML {
    BACKGROUND: #fff;
    COLOR: #000
}
BODY {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px
}
DIV {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px
}
DL {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px
}
DT {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px
}
DD {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px
}
UL {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px
}
OL {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px
}
LI {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px
}
H1 {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px
}
H2 {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px
}
H3 {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px
}
H4 {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px
}
H5 {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px
}
H6 {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px
}
PRE {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px
}
CODE {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px
}
FORM {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px
}
FIELDSET {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px
}
LEGEND {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px
}
INPUT {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px
}
BUTTON {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px
}
TEXTAREA {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px
}
P {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px
}
BLOCKQUOTE {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px
}
TH {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px
}
TD {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px
}
TABLE {
    BORDER-COLLAPSE: collapse;
    border-spacing: 0
}
FIELDSET {
    BORDER-TOP-WIDTH: 0px;
    BORDER-LEFT-WIDTH: 0px;
    BORDER-BOTTOM-WIDTH: 0px;
    BORDER-RIGHT-WIDTH: 0px
}
IMG {
    BORDER-TOP-WIDTH: 0px;
    BORDER-LEFT-WIDTH: 0px;
    BORDER-BOTTOM-WIDTH: 0px;
    BORDER-RIGHT-WIDTH: 0px
}
ADDRESS {} CAPTION {} CITE {} CODE {} DFN {} EM {} STRONG {} TH {} VAR {} OPTGROUP {} DEL {
    TEXT-DECORATION: none
}
INS {
    TEXT-DECORATION: none
}
LI {
    LIST-STYLE-TYPE: none
}
CAPTION {
    TEXT-ALIGN: left
}
TH {
    TEXT-ALIGN: left
}
H1 {
    FONT-WEIGHT: normal;
    FONT-SIZE: 100%
}
H2 {
    FONT-WEIGHT: normal;
    FONT-SIZE: 100%
}
H3 {
    FONT-WEIGHT: normal;
    FONT-SIZE: 100%
}
H4 {
    FONT-WEIGHT: normal;
    FONT-SIZE: 100%
}
H5 {
    FONT-WEIGHT: normal;
    FONT-SIZE: 100%
}
H6 {
    FONT-WEIGHT: normal;
    FONT-SIZE: 100%
}
Q:unknown {
    content: ''
}
Q:unknown {
    content: ''
}
abbr {
    BORDER-TOP-WIDTH: 0px;
    BORDER-LEFT-WIDTH: 0px;
    BORDER-BOTTOM-WIDTH: 0px;
    BORDER-RIGHT-WIDTH: 0px;
    FONT-VARIANT: normal
}
ACRONYM {
    BORDER-TOP-WIDTH: 0px;
    BORDER-LEFT-WIDTH: 0px;
    BORDER-BOTTOM-WIDTH: 0px;
    BORDER-RIGHT-WIDTH: 0px;
    FONT-VARIANT: normal
}
SUP {
    VERTICAL-ALIGN: baseline
}
SUB {
    VERTICAL-ALIGN: baseline
}
LEGEND {
    COLOR: #000
}
INPUT {
    FONT-FAMILY: inherit
}
BUTTON {
    FONT-FAMILY: inherit
}
TEXTAREA {
    FONT-FAMILY: inherit
}
SELECT {
    FONT-FAMILY: inherit
}
OPTGROUP {
    FONT-FAMILY: inherit
}
OPTION {
    FONT-FAMILY: inherit
}
INPUT {
    FONT-SIZE: 100%
}
BUTTON {
    FONT-SIZE: 100%
}
TEXTAREA {
    FONT-SIZE: 100%
}
SELECT {
    FONT-SIZE: 100%
}
BODY {
    FONT-SIZE: 12px;
    BACKGROUND: #fff;
    COLOR: #000;
    LINE-HEIGHT: 1.25;
    FONT-FAMILY: "Times New Roman", Times, serif;
    TEXT-ALIGN: center
}
H1 {
    FONT-WEIGHT: bold;
    FONT-SIZE: 14px;
    LINE-HEIGHT: 2em
}
FORM {
    PADDING-RIGHT: 4px;
    PADDING-LEFT: 4px;
    BACKGROUND: #9cbc2c;
    PADDING-BOTTOM: 4px;
    MARGIN: 0px auto;
    WIDTH: 500px;
    PADDING-TOP: 4px;
    border-radius: 5px;
    moz-border-radius: 5px;
    webkit-border-radius: 5px;
    khtml-border-radius: 5px;
    moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
    webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.4)
}
FIELDSET {
    PADDING-RIGHT: 10px;
    PADDING-LEFT: 10px;
    PADDING-BOTTOM: 10px;
    BORDER-TOP-STYLE: none;
    PADDING-TOP: 10px;
    BORDER-RIGHT-STYLE: none;
    BORDER-LEFT-STYLE: none;
    BORDER-BOTTOM-STYLE: none
}
#regForm OL LI {
    CLEAR: both;
    BORDER-RIGHT: #f7f7f7 1px solid;
    PADDING-RIGHT: 10px;
    BORDER-TOP: #f7f7f7 1px solid;
    PADDING-LEFT: 10px;
    BACKGROUND: white;
    MARGIN-BOTTOM: 12px;
    PADDING-BOTTOM: 5px;
    BORDER-LEFT: #f7f7f7 1px solid;
    LINE-HEIGHT: 30px;
    PADDING-TOP: 5px;
    BORDER-BOTTOM: #f7f7f7 1px solid;
    POSITION: relative;
    border-radius: 5px;
    moz-border-radius: 5px;
    webkit-border-radius: 5px;
    khtml-border-radius: 5px
}
UNKNOWN {
    BORDER-RIGHT: #999 1px solid;
    PADDING-RIGHT: 5px;
    BORDER-TOP: #999 1px solid;
    PADDING-LEFT: 5px;
    PADDING-BOTTOM: 5px;
    FONT: italic 13px Georgia, "Times New Roman", Times, serif;
    BORDER-LEFT: #999 1px solid;
    WIDTH: 200px;
    PADDING-TOP: 5px;
    BORDER-BOTTOM: #999 1px solid;
    border-radius: 3px;
    moz-border-radius: 3px background: #fff;
    webkit-border-radius: 3px;
    khtml-border-radius: 3px;
    outline: medium none
}
#regForm OL LI:hover {
    BORDER-LEFT-COLOR: #9cbc2c;
    BACKGROUND: #f7f7f7;
    BORDER-BOTTOM-COLOR: #9cbc2c;
    BORDER-TOP-COLOR: #9cbc2c;
    BORDER-RIGHT-COLOR: #9cbc2c
}
#regForm LABEL {
    FLOAT: left;
    FONT: italic 13px/30px Georgia, "Times New Roman", Times, serif;
    WIDTH: 120px
}
#regForm BUTTON {
    PADDING-RIGHT: 15px;
    PADDING-LEFT: 15px;
    BACKGROUND: #384313;
    PADDING-BOTTOM: 4px;
    MARGIN: auto;
    FONT: 14px Georgia, "Times New Roman", Times, serif;
    COLOR: #ffffff;
    BORDER-TOP-STYLE: none;
    PADDING-TOP: 4px;
    BORDER-RIGHT-STYLE: none;
    BORDER-LEFT-STYLE: none;
    LETTER-SPACING: 1px;
    BORDER-BOTTOM-STYLE: none;
    border-radius: 14px;
    moz-border-radius: 14px;
    webkit-border-radius: 14px;
    khtml-border-radius: 14px;
    text-shadow: 0 1px 1px #000000
}
#agev {
    LEFT: 430px;
    POSITION: absolute
}

HTML

<h1>注册表单</h1>
<form id=regForm onsubmit="return chkForm();" method=post>
    <fieldset>
        <ol>
            <li>
                <label for=username>用户昵称：</label>
                <input id=username name=username autofocus required pattern="^[a-zA-Z0-9]{6,12}$" placeholder="请输入用户名">
                <li>
                    <label for=uemail>Email：</label>
                    <input id=uemail type=email name=uemail required placeholder="example@domain.com">
                    <li>
                        <label for=age>工作年龄：</label>
                        <input type="range" id="age" min="18" max="60" name="age" oninput="show.value=age.value" />
                        <output id="show"></output>
                        <li>
                            <label for=age2>年龄:</label>
                            <input id=age2 type=number required placeholder="your age" min="1" max="100">
                            <li>
                                <label for=birthday>出生日期：</label>
                                <input id=birthday type=date>
                                <li>
                                    <label for=search>个人主页：</label>
                                    <input id=search type=url required list="searchlist">
                                    <datalist id=searchlist>
                                        <option label="Google" value="https://www.google.com" />
                                        <option label="Yahoo" value="https://www.yahoo.com" />
                                        <option label="Bing" value="https://www.bing.com" />
                                        <option label="Baidu" value="https://www.baidu.com" />
                                    </datalist>
                                </li>
                                <LI>
                                    <LABEL FOR=COLOR>获取颜色值:</LABEL>
                                    <input type="color" name="color" id="color" oninput="showcolor.value=color.value" />
                                    <output id="showcolor"></output>
                                    <input type="text" id="colorVal" style="border:none;" /> </LI>
        </ol>
    </fieldset>
    <div>
        <button type=submit>注册</button>
    </div>
</form>

使用了一些常用input组件: 日期选择（type=date），链接（type=url），滑块式范围选择（type=range）等。

HTML5, 表单

编辑器支持Emmet

快捷键

使用了一些常用input组件: 日期选择（type=date），链接（type=url），滑块式范围选择（type=range）等。

HTML5, 表单

一款HTML5原质化用户登录/注册页表单UI模板

HTML5带左右滑动切换动效的登录/注册表单页面模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：