
<!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>
一、文本类
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中记录的数值来进行计算。