HTLM5表单

1.HTML5占位符文本

  使用placeholder可以给文本框，搜索框添加提示性文本

<input type="text" name="url" placeholder="输入地址" />

2.自动聚焦

    当页面加载完成时让输入焦点自动落到某个元素上；这个动作用autofocus属性完成。

<!-- These all work! -->
<input autofocus="autofocus" />
<button autofocus="autofocus">Hi!</button>
<textarea autofocus="autofocus"></textarea>

3.标签自动补全

  datalist作用：我们经常在网上的搜索框中看到当输入一个字符，输入框下方会自动列出你输入的关键词。

    <input list="w3cfuns-search" /> 
    <datalist id="w3cfuns-search"> 
            <option value="W3Cfuns"> 
            <option value="W3C标准"> 
            <option value="W3C规则"> 
            <option value="W3C验证"> 
            <option value="前端开发"> 
            <option value="前端开发网"> 
            <option value="2天驾驭DIV+CSS"> 
            <option value="W3CSchool"> 
    </datalist> 

4.HTML5新输入类型

   （1）color 类型用在input字段主要用于选取颜色

<input type="color" name="favcolor">

  

   （2）date 类型允许你从一个日期选择器选择一个日期

<input type="date" name="bday">

  

   （3）datetime-local 类型允许你选择一个日期和时间 (无时区)

生日 (日期和时间): <input type="datetime-local" name="bdaytime">

   （4）email 类型用于应该包含 e-mail 地址的输入域

E-mail: <input type="email" name="email">

   （5）month 类型允许你选择一个月份。

生日 (月和年): <input type="month" name="bdaymonth">

  （6）number 类型用于应该包含数值的输入域。

数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">

其他还有：

• range     滑动条
• search    搜索框
• tel          电话号码
• time       时间
• url         URL地址
• week      周

使用下面的属性来规定对数字类型的限定：

range 类型用于应该包含一定范围内数字值的输入域，range 类型显示为滑动条。

<input type="range" name="points" min="1" max="10">

 5.HTML5表单验证

     HTML5对表单元素提供了patern属性，它接受一个正则表达式。表单提交时这个正则表达式会被用于验证表单内非空的值，如果控件的值不匹配这个正则表达就会弹出提示框，并阻止表达提交。提示框内的文字可以使用setCustomValidity方法来自定义。

<input id="phone_num" name="phone_num" type="text" pattern="\d{3}-\d{4}-\d{4}" placeholder="xxx-xxxx-xxxx"/>