5-2 HTML5新增表单元素及属性.pptx

;;1.Input类型-email

email类型用于应该包含e-mail地址的输入域。在提交表单时，会自动验证email域的值，必须符合email格式才能通过验证并提交。

例：inputtype=email“name=useremail/

;2.Input类型-url

url输入类型用于应该包含URL地址的输入项目，会在提交表单时对url字段的值自动进行验证。

例：inputtype=urlname=user_url/

;3.Input类型-number

number输入类型用于包含数字值的输入字段。您可以设置可接受数字的限制。下面的属性来为number类型规定限制：

例：inputtype=numbername=“monthmin=1max=12step=1/;4.Input类型-range

range类型用于应该包含一定范围内数字值的输入域。range类型显示为滑动条。您还能够设定对所接受的数字的限定：

例：inputtype=rangename=pointsmin=1max=10/

;5.Input类型-date

HTML5拥有多个可供选取日期和时间的新输入类型：

date-选取日、月、年

month-选取月、年

week-选取周和年

time-选取时间（小时和分钟）

datetime-选取时间、日、月、年（UTC时间）

datetime-local-选取时间、日、月、年（本地时间）

。

例：inputtype=“datename=“birthday”/

inputtype=“monthname=“month”/

inputtype=“timename=“time”/

;6.Input类型–color

color输入类型用于规定颜色。该输入类型允许您从拾色器中选取颜色：

例：inputtype=colorname=user_color/;7.Input类型–tel

tel类型定义的项目用来输入电话号码，通常与pattern属性进行配合使用，

使用了tel类型的项目在pc端输入的时候与使用text文本框元素一样，但是在移动

端则会弹出数字键盘。

例：inputtype=telname=telpattern=^\d{11}/;8.Input类型–search

search类型用于搜索域，比如站点搜索或Google搜索。search域显示为常规的文本域。

例：inputtype=searchname=search/;9.Datalist元素?

datalist标签定义选项列表。请与input元素配合使用该元素，来定义input可能的值。datalist元素自??不会显示在网页上，而是为其它元素的list属性提供数据，当用户在文本框中输入信息时，会根据输入的字符自动显示下拉列表提示，供用户从中选择合适的选项。

datalist元素与select元素的语法几乎完全相同，使用datalist元素创建列表，使用option元素创建列表中的选项，但要注意的是，一定要使用input元素的list属性来绑定datalist的id值。??

例：

;;1.required属性：

required属性可以用用在大多数的输入元素上（除了隐藏元素、图片元素按钮上等）。

required属性表示此输入框是必填项，当提交的时候，如果此输入框为空，那么将提示用户输入后提交。

例：

???????inputtype=“text”name=“username”required=“required”/

;表单元素属性;3.pattern属性：

pattern属性的值一般为正则表达式，当用户输入的内容符合一定的格式，那么才能提交，否则将提示用户不符合要求，如上所示必须输入3位数字。

正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。在很多文本编辑器里，正则表达式通常被用来检索、替换那些符合某个模式的文本。

一般我们在验证”联系电话”时，给出：pattern=”^\d{11,13}$”，表示11到13位的数字

????例：inputname=“phonepattern=^\