H5新增表单元素、控件

表单—新增控件类型

• HTML5 增加了多个新的表单输入类型，这些新特性提供了更好的输入控制和验证，主要内容如下。
• ①email、②url、③number、④range
• ⑤Date pickers (date, month, week, time, datetime, datetime-local)
• ⑥search、⑦color、⑧tel

type=”email”
• 限制用户输入为邮箱类型(即输入内容必须含有@符号，并且@前后内容不能为空)。email提供了邮箱的完整验证，必须包含@和后缀，如果不满足验证，会阻止表单提交

 <form>
         	<label>邮箱 ：
         		<input  
         			type="email" 
         			required="required" 
         			pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"/>
         		<input type="submit" />
         	</label>
         </form>

type=”url”
• 限制用户输入为网址，即输入内容必须含有"http:",并且后面内容不能为空.提供了网址的合法格式验证。必须包含 http:// 或者 https://

<form>
         	<label>网站 ：
         		<input  
         			type="url" 
         			required="required" 
         			pattern="[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?>">
         		<input type="submit" />
         	</label>
         </form>

type=”number”
• 限制用户输入为数字类型,只能输入数字和小数点，不能输入其他字符，并且输入框最右边有上下调节按钮