2016-03-07

HTML5新增表单元素

HTML5新增表单元素主要有

input标签

其type类型主要有有以下几种：

type="tel"用于输入电话号码
type="search"用于提示用户输入要搜索的文字。search和text的区别主要在于样式上
type="url"用于输入单个网址
type="email"用于输入单个电子邮件地址；如果指定multiple属性，可以输入多个电子邮件地址，以逗号分隔
type="datetime"用于输入时区设置为UTC的日期和时间
type="date"用于输入不含时区的日期
type="month"用于输入含年份和月份但不含时区的日期
type="week"用于输入含年份和周数但不含时区的日期
type="time"用于输入含小时、分钟、秒和秒的小数部分但不含时区的时间值
type="datetime-local"用于输入不含时区的日期和时间。
type="number"用于输入数字。
type="range"用于输入数字，但与number的区别在于无需输入具体数字。在大部分支持该类型的浏览器中，范围控件的实施形式为滑块。
type="color"用于通过颜色池控件选择颜色（现在浏览器还不兼容）。

    <form>
        <input type="tel" />
        <input type="search" />
        <input type="url" />
        <input type="email" />
        <input type="datetime" />
        <input type="date" />
        <input type="month" />
        <input type="week" />
        <input type="time" />
        <input type="datetime-local" />
        <input type="number" />
        <input type="range" />
        <input type="color" />
        <input type="submit" required />
    </form>

label标签

<label></label>标签为input元素定义标注（标记）,必须配合input使用。

<label>标签的for属性应当与相关元素的id属性相同。

    <label for="textinput">账号：</label>
    <input type="text" placeholder="请输入您的账号" id="textinput"/>
    <br/>
    <label for="pas">密码：</label>
    <input type="password" placeholder="请输入您的密码" id="pas"/>

    账号：

    密码：

datalist标签

<datalist></datelist>标签定义选项列表，option为其选项，必须配合input使用。

<datalist>标签的list属性应当与相关元素的id属性相同。

    <form>
        <input type="text" list="number"/>
        <datalist id="number">
            <option>111</option>
            <option>222</option>
            <option>333</option>
            <option>444</option>
            <option>555</option>
            <option>666</option>
        </datalist>
    </form>

keygen标签

<keygen/>标签规定用于表单的密钥对生成器字段。

    <keygen/>

ins标签

<ins></ins>标签定义已经被插入文档中的文本。

一般与<del></del>一同使用，来描述文档中的更新和修正。

    <p>这件衣服<del>原价288元</del><ins>现价108元</ins>。</p>

这件衣服~~原价288元~~现价108元。

samp标签

<samp></samp>标签定义计算机程序的样本文本。

fieldset标签和legend标签

<fieldset></fieldset>标签将表单内容的一部分打包，生成一组相关表单的字段(相当于一个框，把你想要的框起来)。

<legend></legend>标签为fieldset元素定义标题(框的标题)。

    <form>
        <fieldset>
            <legend>账号信息</legend>
            <label for="textinput">账号：</label>
            <input type="text" placeholder="请输入您的账号" id="textinput"/>
            <br/>
            <label for="pas">密码：</label>
            <input type="password" placeholder="请输入您的密码" id="pas"/>            
        </fieldset>
    </form>

HTML5新增form表单属性

autofocus属性

用于在网页加载后对焦到相关元素上的输入。(因怕影响阅读就不加入此属性)

autofocus的目标可以是输入、选择、文本区域和按钮。

placeholder属性

用于提示用户应输入的数据类型。在上面已经用到。

在对焦到相关元素以及用户输入数据之前，系统会以浅色文字显示占位符值。您可以在输入和文本区域中指定该值。

required属性

required属性规定必需在提交之前填写输入字段。相当于最基本的一个验证。在上面已经用到。

pattern属性

pattern属性规定用于验证输入字段的模式。主要结合JavaScript进行验证。

autocomplete属性

autocomplete属性规定表单是否应该启用自动完成功能.

紫--小梦

心怀梦想，志在远方。

HTML5新增表单元素