<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form</title>
<style>
form {
width: 670px;
margin: 0 auto;
}
td {
background-color: #ffffff;
}
td, input {
font-size: 20px;
}
th {
font-size: 26px;
background-color: #22ccff;
letter-spacing: 2px;
}
#sub {
float: right;
margin-left: 10px;
position: relative;
top: 50px;
left: 0px;
-webkit-transition: all 0.5s ease-in-out 0.0s;
-moz-transition: all 0.5s ease-in-out 0.0s;
-ms-transition: all 0.5s ease-in-out 0.0s;
-o-transition: all 0.5s ease-in-out 0.0s;
transition: all 0.5s ease-in-out 0.0s;
}
</style>
</head>
<body>
<form target="_blank" action="URL">
<!-- 额外的提交按钮 -->
<input type="submit" value="提交" id="sub"/>
<table bgcolor="#000" cellpadding="10" align="center">
<!-- 文本类 -->
<tr>
<th colspan="2">文本类</th>
</tr>
<tr>
<td>text</td>
<td><input type="text" value="attribute:value" pattern="[A-Z,a-z]{1}[a-z,0-9]{3,10}"/></td>
</tr>
<tr>
<td>url</td>
<td>
<input type="url" placeholder="attribute:placeholder" value="a:b"/>
</td>
</tr>
<tr>
<td>password</td>
<td>
<input type="password" maxlength="8" placeholder="请输入密码" autofocus required/>
</td>
</tr>
<tr>
<td>email</td>
<td>
<input type="email" value="1@2.3"/>
</td>
</tr>
<tr>
<td>tel</td>
<td><input type="tel"></td>
</tr>
<tr>
<td>search</td>
<td><input type="search"/></td>
</tr>
<tr>
<td colspan="2">
<p>“placeholder”：占位符；</p>
<p>“autofocus”：焦点获取；</p>
<p>“required”；表单必填项；</p>
<p>“pattern”；输入规范，该值为一个正则表达式；</p>
<p>在H5中，URL和email类型在提交表单时，会检测是否符合格式。</p>
</td>
</tr>
<!-- 文本类 end -->
<!-- 操作类 -->
<tr>
<th colspan="2">操作类</th>
</tr>
<tr>
<td>checkbox</td>
<td>
<label><input type="checkbox" name="ch_box"/>box_1</label>
<label><input type="checkbox" name="ch_box"/>box_2</label>
<label><input type="checkbox" name="ch_box"/>box_3</label>
<input type="checkbox" id="ch_box4"/>
<label for="ch_box4">box_4</label>
</td>
</tr>
<tr>
<td>radio</td>
<td>
<label><input type="radio" name="radio"/>ra_1</label>
<label><input type="radio" name="radio"/>ra_2</label>
<label><input type="radio" name="radio"/>ra_3</label>
<label><input type="radio" name="radio"/>ra_4</label>
</td>
</tr>
<tr>
<td colspan="2">
label:<br/>
非跨度：<label><input></input></label><br/>
跨 度：<label for="input_id"></label><br/>
<input id="input_id"></input>
</td>
</tr>
<tr>
<td>file</td>
<td>
<input type="file" multiple="multiple"/>
<p>multiple="multiple"：允许添加多个值；</p>
<p>accept="MIME_type";指定上传文件的类型；</p>
<p>如：accept="image/jpg,image/gif"</p>
<p><a href="http://www.w3school.com.cn/media/media_mimeref.asp" target="_blank">MIME_type 附录表</a></p>
</td>
</tr>
<tr>
<td>number</td>
<td><input type="number" max="100" min="90" step="2"/>
<p>只允许输入数字；"e":自然常数;</p></td>
</tr>
<tr>
<td>range</td>
<td>
<input type="range" max="100" min="0" step="20"/>
<p>“value”，默认为50，范围0~100；</p>
</td>
</tr>
<tr>
<td colspan="2">max：最多值；min：最小值；step：步长；</td>
</tr>
<tr>
<td>color</td>
<td><input type="color" value="#00ff00"/> 数值型：#ffffff；</td>
</tr>
<!-- 操作类 end -->
<!-- 表单功能 -->
<tr>
<th colspan="2">功能类</th>
</tr>
<tr>
<td>button</td>
<td>
<input type="button" value="button"/>
<button>This is a button.<img src="btn_03.png" width="52"/></button>
<p>“button”允许嵌入其他元素；</p>
</td>
</tr>
<tr>
<td>image</td>
<td><input type="image" src="btn_03.png" width="32"
height="26"/><span> H5中使用“width”“height”修改图片大小；</span></td>
</tr>
<tr>
<td>submit</td>
<td>
<input type="submit"/>
<p>get:在url地址上传送参数到服务器;<br/>post:在后台传送参数到服务器; </p>
</td>
</tr>
<tr>
<td>reset</td>
<td><input type="reset"/></td>
</tr>
<!-- 表单功能 end -->
<!-- 日期类型 -->
<tr>
<th colspan="2">Date 类</th>
</tr>
<tr>
<td>date</td>
<td><input type="date"/></td>
</tr>
<tr>
<td>month</td>
<td><input type="month"/></td>
</tr>
<tr>
<td>week</td>
<td><input type="week"/></td>
</tr>
<tr>
<td>time</td>
<td><input type="time"/></td>
</tr>
<tr>
<td>datetime</td>
<td><input type="datetime" value="2016-08-02T08:32Z"/></td>
</tr>
<tr>
<td>datetime-local</td>
<td><input type="datetime-local"/></td>
</tr>
<!-- 日期类型 end -->
<!-- 特殊类 -->
<tr>
<th colspan="2">特殊类</th>
</tr>
<tr>
<td>hidden</td>
<td><input type="hidden"/>
<p>可用于记录一些表单状态信息<br/>（例如使用value的值标记可选项为非空值的个数），<br/>或者其他自定义信息；</p></td>
</tr>
</table>
</form>
</body>
<script type="text/javascript">
function sub_move() {
var s = document.getElementById("sub");
window.onscroll = function _scroll() {
var top = document.documentElement.scrollTop || document.body.scrollTop;
s.style.top = top + 50 + "px";
}
}
</script>
<script type="text/javascript">
window.onload = function main() {
sub_move();
}
</script>
</html>input 类型 demo
一、文本类
Text，文本
Url，网络地址
Password，密码
Email，邮箱地址
二、操作类
Checkbox ，复选框
Radio，单选框
File，上传文件
Number，数值
Range，百分百滑动条
三、功能类
Button，按钮
Image，图片提交按钮
Submit，文字提交按钮
Reset，重置表单
四、Date类
Date，年月日控件
Month，年月控件
Week，年周控件
Time，时间控件
Datetime，年月日+时间控件
Datetime-local，本地年月日+时间控件
五、特殊类
Hidden，隐藏信息
扩展：
1.文本类属性：placeholder。这是一个占位符，可以作为提示信息，而且无法被用户选中。
2.Url和e-mail，在H5中，会在提交表单的时候检测其格式是否书写正确。
3.操作类。一般input标签会结合label标签使用，label一般有两种书写方法：
1.非跨度：<label><input></input></label>
2.跨度：<label for="input_id"></label>
<input id="input_id"></input>
如果网页结构中，input和label是相邻的关系，可以直接使用非跨度的书 写方法，以减少代码量。
4.file。在实际应用中，网页表单中需要上传的文件一般不止一个，这时候就要用到multiple属性，它是一个布尔值属性，在添加这个属性后，就可以上传多个属性。另外，上传的文件可以被规定，使用accept属性。这个一个数组属性，属性值是MIME规定的文件类型。
5.Button。Button类型只能在value中定义按钮上显示的提示文字。Image类型只能在src中链接图片。
而button标签则结合了button和image的属性，它是一个双标签，也就是说它可以在内部嵌套其他标签，让按钮的显示效果更多元化。
6.Date类。Date类型的input标签是H5中新增加的。它实际上是一个控件，可以很方便的选择和显示时间数据，但是目前支持该控件的浏览器并不多。其中IE是完全不支持的。
7.Hidden。这个属性的input标签无法显示，也无法被用户控制。它的作用可以用来标记一些隐藏的表单信息。
例如：在一些网站中，对于用户的描述，有一个信息完整度的提示。
用户在注册的时候，必填项有5个，可填项有5个。注册的表单可以用hidden来记录可填项中有多少个是有数据的。
假如，一个用户把所有的可填项全部填写。那么他的信息完整度就是100%。
另一个用户的可填项一个也没有填写，他的信息完整度就是50%。
而这个数值可以根据hidden中记录的数值来进行计算。
