一、input类型详解

• 该图包含了新增的 input 类型

• Number类型

• 示例：

<input type="number" name="demoNumber" min="1" max="100" step="1"/>

• 分析：
  name: 标识表单提交时的key值
  min: 标识当前输入框输入的最小值
  max: 标识当前输入框输入的最大值
  step: 标识点击增大/减小的时候变化的步长
• note：
  这些属性都是可以省略的，只规定需要的部分即可

2. Email类型

• 示例：

<input type="email" name="email" placeholder="请输入注册邮箱"/>

• note:
  当表单在提交前，此文本框会自动校验是否符合邮箱的正则表达式

3. URL类型

• 示例：

<input type="url" placeholder="请输入网址" name="url"/>

• note:
  当表单在提交前，此文本框会自动校验是否符合URL的正则表达式

4. Tel类型

• 示例：

<input type="tel" placeholder="输入电话" name="phone"/>

5. range类型

• 示例：

<form oninput="output.value=parseInt(range.value)"/>
            <input type="range" min="0" max="100" step="5" name="range" value="0"/> 
            <output name="output">0<output/>
</form>

• note:
  • 此类型标签的加入，输入范围内的数据变得非常简单容易，而且非常标准

  • 另外此标签可以跟表单新增加的output标签一块使用，达到一个联动的效果

    
    

6. 日期类型

• 示例：

<input type="date" name="datedemo"/>

• 相关的日期类型还包括：month、time、week、datetime-local、datetime
• 示例：

<input type="time">
<input type="datetime">
<input type="month">
<input type="week">
<input type="datetime-local">

• search类型
• 示例：

  <input type="search" results>

• note：
  • 当你输入文字之后，右面会多出来一个叉，点击叉可以清除所有文字
  • 如果规定results属性，左边就会自动出现一个放大镜图标

7. color类型

• 示例：

<input type="color" name="colordemo"/>

二、HTML5表单新属性

• 常用属性：
  • placeholder：显示提示信息
• autofocus：在当前页面中input标签加载完毕后获得焦点，但每个页面只允许出现一个autofocus

<input type="text" autofocus="autofocus"/>

• required：必须在提交之前填写输入域（不能为空），它是表单验证最简单的一种方式方法，这一切都是由浏览器自动完成

 <input type="text" name="usr_name" required="required" />

• pattern：正则表达式校验，用于验证 input 域的模式（pattern），那些type=“email”或type=“url”的输入控件内置相关正则表达式，如果v输入值不符合其正则表达式，那表单将通不过验证，无法提交

<input type="text" pattern="[A-z]{3}/>

• 不常用属性：
  • max、min、step：这些上面介绍过，都是跟数字相关
  • multiple：用于文件上传，设置此属性后，允许一次选择多个文件上传

<form action="#" method="get">
  Select images: 
    <input type="file" name="img" multiple="multiple" />
    <input type="submit" />
</form>

• datalist：当<datalist>元素的 id = <list>元素的 id，<option>元素被用作提示信息，会在 input 的建议区域作为提议显示出来，选定一个值后，其他选项不会再出现

<input list="cars">
  <datalist id="cars">
    <option value="BMW" label="$43K">
    <option value="Ford" label="$13K">
    <option value="Volvo" label="$25K">
  </datalist>

在 Chrome 下是这个效果：

• form：也就是说，任何一个标签都可以指定它所属于一个表单，而不是必须在其中进行包裹

<input type="text" form="demoform" name="demo"/>

• form表单新增加的属性
• novalidate属性规定在提交表单时不应该验证 form或input域

<form action="" method="POST" novalidate="true"></form>

• autocomplete浏览器通过autocomplete特性能够知晓是否应该保存输入值以备将来使用，autocomplete应该用以保护用户敏感数据，避免本地浏览器对它们进行不安全的存储

相关文章推荐：
HTML5 简介（四）：新的表单类型、表单验证等特性介绍