html5 新增内容--新增表单功能

html5 新增内容

新增表单控件

email 电子邮箱文本框

<input type="email" name="" id="">

tel 电话号码

<input type="tel" name="" id="">

url 网页URL地址

<input type="url" name="" id="">

search 搜索引擎

<input type="search" name="" id="">

date 日期类型

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

time 时间

<input type="time" name="" id="">

range 特定范围内的数值选择器

<input type="range" name="" id="">

number 只包含数字的输入框

<input type="number" name="" id="">

新增表单特性

placeholder 输入框提示信息

<input type="text" name="" id="" placeholder="请输入用户名">

autocomplete 是否保存用户输入值

• autocomplete是否保存用户输入值，默认为on，关闭提示选择off

autofocus 指定表单获取输入焦点

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

required 此项必填，不为空

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

pattern

• 正则验证 pattern=”\d{1,5}”

disabled 表单禁用状态

<p>Last name: <input type="text" name="lname" disabled></p>

datalist 选项列表

• 与input元素配合使用，来定义input可能的值

<label for="myBrowser">从列表中选择这个浏览器</label>
<input list="browsers" id="myBrowser" name="myBrowser">
    <datalist id="browsers">
        <option value="Chrome">
        <option value="Firefox">
        <option value="Internet Explorer">
        <option value="Opera">
        <option value="Safari">
        <option value="Microsoft Edge">
    </datalist>