html5 表单

• 新增input类型
• 新增表单元素
• html5表单验证
• 新增表单属性

新增的input类型

input原有的type属性值

• text(普通文本, 默认值)
• password(密码框)
• radio(单选按钮)
• checkbox(多选按钮)
• file(文件上传组件)
• button(普通按钮)
• submit(提交按钮)
• hidden(隐藏文本域)

input新增的type属性值

• search(搜索框)
• email(邮件输入框)
• url(url地址输入框)
• tel(电话号码输入框)
• number(数字输入框)
• range(滑动条)
• date(日期选择)
• month(月份选择)
• week(周选择)
• time(时间选择)
• datetime-local(日期选择)
• datetime(包含时区)
• color(颜色选择)

示例

search

<input type="search">

它看起来是一个文本输入框,可以输入一个普通的文本
从语义上,我们可以用它表示一个搜索框,比如说下面这样的:
[图片上传失败...(image-2227db-1510624350095)]

在移动设备上的额外的特性(安卓手机上的截图)

[图片上传失败...(image-5242b8-1510624350096)]
[图片上传失败...(image-dc7f6f-1510624350096)]

email

<input type="email">

从语义上讲, 可以输入一个电子邮件

在移动设备上的额外的特性(ipad上的截图)

![Upload 6.png failed. Please try again.]

url

可以输入一个url地址

在移动设备上的额外的特性(ipad上的截图)

[图片上传失败...(image-725e4e-1510624350096)]

tel

<input type="tel">

可以输入一个电话号码

在移动设备上的额外的特性(ipad上的截图)

[图片上传失败...(image-38b6a2-1510624350096)]

新增表单元素

• datalist

datalist

<input type="text" list="browers">
<datalist id="browers">
    <option value="chrome"></option>
    <option value="firfox"></option>
    <option value="ie"></option>
</datalist>

表单验证

表单验证是指,在用户提交表单之前,确保用户输入是数据是合法的

• 验证输入类型
• 验证必填字段
• 验证字符长度
• 验证数值范围
• 验证日期和时间范围
• 步长
• 正则表达式

示例

验证输入类型

<form action="success.html" method="post">
    <h2>验证输入类型</h2>
    <label for="">
        数字:
        <input type="number">
    </label>
    <label for="">
        邮箱:
        <input type="email">
    </label>
    <label for="">
        网址:
        <input type="url">
    </label>

    <input type="submit">
</form>

验证必填字段

<form action="success.html" method="post">
    <h2>验证必填字段</h2>
    <label for="">
        数字:
        <input type="number" required="">
    </label>
    <label for="">
        邮箱:
        <input type="email" required="">
    </label>
    <label for="">
        网址:
        <input type="url" required="">
    </label>

    <input type="submit">
</form>

验证字符长度

<form action="success.html" method="post">
    <h2>验证字符长度</h2>
    <label for="">
        密码:
        <input type="password" required="" minlength="6" maxlength="10">
    </label>

    <input type="submit">
</form>

验证数值范围

<form action="success.html" method="post">
    <h2>验证数值范围</h2>
    <label for="">
        订购数量:
        <input type="number" required="" min="6" max="10">
    </label>

    <input type="submit">
</form>

验证日期和时间范围

<form action="success.html" method="post">
    <h2>验证日期和时间范围</h2>
    <label for="">
        送货日期:
        <input type="date" required="" min="2016-04-01" max="2016-05-01">
    </label>
    <label for="">
        送货时间:
        <input type="time" required="" min="08:00" max="18:00">
    </label>

    <input type="submit">
</form>

步长

<form action="success.html" method="post">
    <h2>步长</h2>
    <label for="">
        订购数量:
        <input type="number" step="10">
    </label>

    <input type="submit">
</form>

正则表达式

<form action="success.html" method="post">
    <h2>正则表达式</h2>
    <label for="">
        编号:
        <input type="text" pattern="[0-4]{3}">
    </label>

    <input type="submit">
</form>

禁用表单验证

html5提供的表单验证还是很简陋, 通常不能达到我们的实际需求, 很多时候我们还是需要使用javascript来完成表单验证, 那么我们就需要禁用html5表单验证,以免产生冲突

<form action="success.html" method="post" novalidate>

新增的表单属性

• placeholder
• autofocus
• autocomplete
• multiple

示例

placeholder

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

autofocus

<input type="text" autofocus>

• 会在页面加载时自动获取焦点
• 一个页面只能有一个autofocus属性的定义

autocomplete

<form action="success.html" method="get" autocomplete="on">
    <h2>autocomplete</h2>
    <label for="">
        用户名:
        <input type="text" name="username" placeholder="请输入用户名">
    </label>
    <input type="submit">

</form>

multiple

两种用法

基本用用

<select name="" id="" multiple>
    <option value="">option1</option>
    <option value="">option2</option>
    <option value="">option3</option>
</select>

type=file

<input type="file" multiple>