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”
• 限制用户输入为数字类型,只能输入数字和小数点，不能输入其他字符，并且输入框最右边有上下调节按钮

案例：
最小值0、最大值100、步进值5、value初始值50

<form>
         	<label>数量 ：
         		<input  
         			type="number" 
         			value="50"
         			min="0"
         			max="100"
         			step="5">
         		<!--<input type="submit" />-->
         	</label>
         </form>

type=”range”
• 显示为滑动条，会以一个滑块形式表现，包含一定范围内数值输入域

案例：初始值为10，最小值为0，最大值为100，步进值为20

 <form>
         	<label>数量 ：
         		<input  
         			type="range" 
         			value="10"
         			min="0"
         			max="100"
         			step="20">
         		<!--<input type="submit" />-->
         	</label>
         </form>

type=Date Pickers（日期选择器）

<form>
         	<label>数量 ：
         		<input  type="date" >
         		<input  type="time" >
         		<input  type="datetime-local" >
         		<input  type="month" >
         		<input  type="week" >
         		<!--<input type="submit" />-->
         	</label>
         </form>

type=”search”
• 作用：用于搜索域，比如站点搜索或 Google 搜索
• 渲染结果：显示为常规的文本域，在输入框输入文本后右边显示“x”，可以将输入的文本清除

	<input  type="search" >

type=”color”
颜色选择器，选择颜色的面板

type=”tel”
tel并不是来验证手机号码的，因为全球手机号码格式的标准不同。它的目的是能够在移动端打开数字键盘，而数字键盘就限制了用户只能填写数字而不能填写其他字符。

<input  type="tel"  >

	  <datalist id="field">
                            <option value="电气与电子工程学院"></option>
                            <option value="经济与管理学院"></option>
                            <option value="外国语学院"></option>
                            <option value="艺术与传媒学院"></option>
                        </datalist>

<output></output>

• 属性解析：
• ①for 规定一个或多个元素的 id 列表，以空格分隔。这些元素描述了计算中使用的元素与计算结果之间的关系
• ②name 规定 <output> 元素的名称
• 写法：
• output不能再写在其他任意位置，只能在form里面才有效果

<optgroup></optgroup>

• optgruop元素在html4已经存在，在HTML5进行了拓展。
• 简介：
选项组标签，将select元素中的选项进行逻辑分类，在select元素中直接定义，不允许嵌套，既不能进行第二次分组
• 属性：
①disabled：加载时禁用该选项组
②label: 用来定义分组显示的标签名

 <select>
        <optgroup label="国漫">
            <option>哪吒</option>
            <option>葫芦娃</option>
        </optgroup>
        <optgroup label="日漫">
            <option>奥特曼</option>
            <option>海贼王</option>
        </optgroup>
    </select>

H5新增的表单属性

required 属性
• 约束该表单元素在提交前必须输入值，提交文档时，限制文本框必须输入内容，否则无法提交，即如果未输入将阻止表单提交。
• 通俗理解：表明该元素是必填项，当提交表单的时候会自动验证该元素的内容是否不为空。

  <label>
                       <span>姓名 :</span>
                        <input type="text" placeholder="  请输入您的姓名" id="nick" required >
                    </label>

placeholder属性
• 占位符，当用户还没有输入值的时候，输入型控件可以通过 placeholder 属性向用户显示描性说明或者提示信息。使用 placeholder属性只需要将说明性文字作为该属性值即可。

 <input type="text" required="required" placeholder="请输入姓名"/>

autofocus 属性
• 在打开页面时使元素自动获取焦点，只有当一个页面是以使用某个控件为主要目的时，才对该控件使用 autofocus 属性。一个页面只能有一个控件有该属性。

  <input type="text" required="required" placeholder="请输入姓名"/ autofocus="autofocus">

multiple属性
• 文件上传多选或多个邮箱地址 ，可以选择多个文件；在email中，可以输入多个邮箱地址，以逗号分隔
pattern属性
• 规定用于验证 input 域的模式，模式为正则表达式，验证表单元素

<label>
      				  帐号：<input 
                   type="text" 
                    required 
                    autofocus 
                    placeholder="请输入账号" 
                    pattern="^[0-9a-zA-Z]{6,16}$" />
                  	  请输入a-zA-Z0-9且长度6-16位的字符
					</label>