h5表单

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

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

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

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

email

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

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

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

url

可以输入一个url地址

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

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

tel

可以输入一个电话号码

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

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

新增表单元素

• datalist

datalist

表单验证

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

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

示例

验证输入类型

    
验证输入类型
    
        数字:
        
    
    
        邮箱:
        
    
    
        网址:
        
    

    

验证必填字段

    
验证必填字段
    
        数字:
        
    
    
        邮箱:
        
    
    
        网址:
        
    

    

验证字符长度

    
验证字符长度
    
        密码:
        
    

    

验证数值范围

    
验证数值范围
    
        订购数量:
        
    

    

验证日期和时间范围

    
验证日期和时间范围
    
        送货日期:
        
    
    
        送货时间:
        
    

    

步长

    
步长
    
        订购数量:
        
    

    

正则表达式

    
正则表达式
    
        编号:
        
    

    

禁用表单验证

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

新增的表单属性

• placeholder
• autofocus
• autocomplete
• multiple

示例

placeholder

autofocus

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

autocomplete

    
autocomplete
    
        用户名:
        
    
    

multiple

两种用法

基本用用

    option1
    option2
    option3

type=file