html5新增表单类型及属性
前言
HTML5相对于html4 而言,新增了很多新的特性。增添了一些语义化标签,还有新增的一些表单类型和属性。今天就着重罗列一下表单新增的这些类型。
新增input类型
-
color 用户可以从中任意选取一个颜色
<input type=“color”/ > -
date 可以从中选取一个日期
<input type=“date”/ > -
datetime-local 从中选取日期和时间
<input type=“datetime-local”/ > -
email 用于应该包含 e-mail 地址的输入域
<input type=“email”/ > -
month 允许选择一个月份。
<input type=“month”/ > -
number 用于应该包含数值的输入域。
<input type=“number”/ > max 和min 可以限定数字的大小 -
range 类型用于应该包含一定范围内数字值的输入域。
显示为滑动条
<input type=“range”/ > -
search 用于搜索域,比如站点搜索
<input type=“search”/ > -
tel 定义输入电话号码
<input type=“tel”/ > -
time 选择一个时间
<input type=“time”/ > -
url 定义输入网址
<input type=“url”/ > -
week 选择周和年
<input type=“week”/ > -
file 用于上传文件
<input type=“file”/ > -
image 图片按钮 具有提交功能
<input type=“image” src=""/ >
以下是最终效果图:
新增form元素
- datalist 元素规定输入域的选项列表。
语法:
list的值是 datalist 的id 名 - output 元素用于不同类型的输出,比如计算或脚本输出
新增form属性
新增form属性
1、autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。 on/off
当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项。
2、novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
新增input属性
1、autofocus 属性规定在页面加载时,自动地获得焦点。
2、位于form表单外的 input 字段引用了 HTML form (该 input 表单仍然属于form表单的一部分)
3、 formaction 属性用于描述表单提交的URL地址.
formaction 属性会覆盖 元素中的action属性.
4、formenctype 属性覆盖 form 元素的 method属性。
formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method=“post” 表单)
formmethod 属性
formmethod 属性定义了表单提交的方式。
formmethod 属性覆盖了 元素的 method 属性。
注意: 该属性可以与 type=“submit” 和 type=“image” 配合使用。
5、novalidate属性描述了 元素在表单提交时无需被验证。
formnovalidate 属性会覆盖 元素的novalidate属性
6、formtarget 属性指定表单提交方式
formtarget 属性覆盖 元素的target属性. formtarget=“_blank” 提交到一个新的页面
7、height 和 width 属性规定用于 image 类型的 标签的图像高度和宽度。
8、list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
list值是datalist 的id名
9、min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定(约束)。
min、max 和 step 属性适用于以下类型的 标签:date 、number 以及 range。
Step:输入域的合法数字间隔
10、multiple 属性规定 元素中可选择多个值。
multiple 属性适用于以下类型的 标签:email 和 file:(上传文件)
11、pattern 属性描述了一个正则表达式用于验证 元素的值。
pattern 属性适用于以下类型的 标签: text, search, url, tel, email, 和 password.
12、placeholder 属性提供一种提示(hint),描述输入域所期待的值。
简短的提示在用户输入值前会显示在输入域上。
13、required 属性规定必须在提交之前填写输入域(不能为空)。
14、optgroup 标签经常用于把相关的选项组合在一起。
如果你有很多的选项组合, 你可以使用optgroup 标签能够很简单的将相关选项组合在一起。