html5中的表单
1 <form id="aForm" action="reg.php"> 2 <p>请填写表单内容以完成注册!</p> 3 4 <fieldset> 5 <legend>联系方式</legend> 6 <label for="name">姓名</label> 7 <input id="name" placeholder="Ye Feng" autofocus required pattern="[A-Z]{5}"><br> 8 <label for="tel">电话</label> 9 <input id="tel" type="tel"><br> 10 <label for="email">电子邮件</label> 11 <input id="email" type="email"><br> 12 <label for="url">个人网址</label> 13 <input id="url" type="url"><br> 14 </fieldset> 15 16 <fieldset> 17 <legend>个人信息</legend> 18 <label for="age">年龄</label> 19 <input id="age" type="number" step="0.1" min="1" max="99"><br> 20 <label for="weight">体重</label> 21 <input id="weight" type="range" value="10" min="1" max="99"><br> 22 <label for="gender">性别</label> 23 <select id="gender"> 24 <option value="female">女</option> 25 <option value="male">男</option> 26 </select><br> 27 <label for="comments">对自己做简单的介绍:</label><br> 28 <textarea id="comments"></textarea> 29 </fieldset> 30 31 <fieldset> 32 <legend>选择你最喜欢的小动物</legend> 33 <label for="zebra"><input id="zebra" type="checkbox">斑马</label> 34 <label for="cat"><input id="cat" type="checkbox">猫猫</label> 35 <label for="anaconda"><input id="anaconda" type="checkbox">蟒蛇</label> 36 <label for="elephant"><input id="elephant" type="checkbox">大象</label> 37 </fieldset> 38 39 <p><input type="submit" value="提交"></p> 40 <p><input type="submit" value="保存表单信息但不提交" formnovalidate></p> 41 </form>
<fieldset>元素:
可将表单内的相关元素分组。
<legend>元素:
表示父元素<fieldset>元素的标题。
<label>标签:
为input元素定义标签。
<input>标签:
用于搜集用户信息。默认的类型是text。可以使用占位符placeholder来添加文本提示,也使用自动焦点autofocus在页面加载时获得焦点。
<select>标签:
创建下拉列表。
<option>标签:
定义下拉列表中的一个选项。
<textarea>标签:
定义一个多行的文本输入区域。
checkbox类型:
定义input的类型为复选框。
submit类型:
定义input的类型为提交按钮。
HTML5验证:
1.简单的HTML5验证:
input标签的required属性,max属性和min属性:
指示输入字段的值是必需的,或者数字的范围。HTML5验证属于客户端验证,在单击提交按钮后触发。如果验证失败,会取消提交操作,并显示错误消息。
2.使用正则表达式进行验证:
使用pattern属性。
3.关闭验证:
在<form>标签中使用novalidate属性,禁用整个表单的验证功能;
在提交按钮中添加formnovalidate属性,来绕开表单验证,以保存未完成的数据等。
HTML5中新的输入控件:
在之前的表单中,我们用一个<input>标签来创建普通文本输入区或者复选框、提交按钮等等,用type来控制不同的类型。
在HTML5中,引入了新的email等等类型。
作用:
1.提供编辑辅助。如在移动端中,如果<input>的类型是数字,则会自动采用数字虚拟键盘;
2.根据类型提示错误;
3.根据类型执行验证。
新的<input>类型有:
email:电子邮件
url:网址(在firefox中好像默认必须以http开头,不好用)
tel:电话
number:数值类型(会生成微调按钮。默认只接受整数,但可以通过修改step属性来接受小数。还可以给出min和max属性来限制最大值和最小值)
range:数值类型(以滑动条的形式显示)
另外还有6种日期时间类型,不过大部分浏览器好像并支持。