html5中将表单横向设置,HTML5中的表单

第一部分：新增的input输入类型

· html5之前支持的输入类型

text

radio 单选按钮

checkbox 多选

select-option 下拉列表

password 密码

submit 提交

button 按钮

image 图片形式的提交按钮

hidden 隐藏的输入字段

reset 重置

file 上传文件

· html5新增的输入类型

email类型，在email输入类型中，提交的时候会验证是不是邮箱

url类型，同上

number类型

运行效果

range类型

运行效果

日期检出器类型

date类型

运行效果

month类型

运行结果

week类型

运行结果

time类型

运行效果

search类型

运行结果

tel类型：在电脑端是普通的输入框，在移动设备上，输入的时候键盘会切换为数字键盘。

color类型

运行效果

第二部分：新增的input属性

autocomplete属性，用户下次输入相同的内容时，浏览器将会自动输入，另外在datalist中，可以根据用户输入内容实时更新列表。

beijing

qingdao

shanghai

运行结果

autofocus属性，自动获得焦点的属性，谨慎使用，在指定autofocus的时候，要明确页面的主要目的是什么。

运行效果

有些浏览器可能对这个属性不支持，那么就要加入一段js来解决兼容问题。

if (!("autofocus" in document.createElement("input"))){

document.getElementById("submit1").focus();

}

新增的form属性：在H5之前，用户要提交一个表单，必须报相关的元素全部放在form便签之内，但是在h5中，这个问题得到了解决，form的灵活性大大提高，看了下面这个代码，你就知道怎么使用了！

请输入姓名：

请输入地址：

运行结果

新增的表单重写属性，表单重写属性不适用于所有的input输入类型，只适用于submit和image输入类型

formaction：用于重写表单的action属性

formenctype：用户重写表单的enctype属性

formmethod：用于重写表单的methodshuxing

formnovalidate：用于重写表单的novalidate属性

formtarget：用于重写表单的target属性

例如：

新增的list属性：前面已经解释过

新增的min、max。step属性，前面也有介绍过

新增的multiple属性，表示多选，上传多个文件等。

beijing

shanghai

shenzhen

运行效果

以上表示可上传多个文件

新增的pattern属性，是一个正则表达式，可以对输入的内容进行正则验证

请输入6位邮政编码：

运行结果

新增的require属性，表示必填项目。

第三部分：新增的form元素

新增的datalist元素

新增的keygen元素(不建议使用)：密钥对生成器。

运行结果(firefox中，chrome中没效果)

新增的output元素：用于在浏览器中显示计算结果或脚本输出，包含完整的开始和结束标签。

第四部分：新增的form属性

新增的autocomplete属性

新增的novalidate属性：用于取消表单提交时候的验证