新增的HTML5表单属性

1.新增的input输入类型

1.Email类型的input元素是一种专门用于输入E-mail地址的文本输入框,在提交表单的时候,会自动验证Email输入框的值。如果不是一个有效的E-mail地址,则该输入框不允许提交表单。示例:

<input type="email" name="user-email" autofocus  />

不支持该属性的浏览器,将会以type="|text"处理,并不妨碍旧版本浏览器采用该属性。

2.URL类型的应用

URL类型的input元素提供用于输入URL地址这类特殊文本的文本框。当提交表单时,如果所输入的内容是url地址格式的文本,则会提交数据到服务器,如果不是url地址格式的文本,则不允许提交。示例:

<input type="url" name="url" required />

3.number类型的应用

number类型的input元素提供用于输入数值的文本框。我们还可以设定多所接受的数字的限制,包括规定允许的最大值和最小值,合法的数字间隔或默认值等。如果所输入的数字不在限定范围之内,则会出现错误提示。number类型的属性见图1-1例如:

<input type="number" name="number1" min="1" max="20">

图1-1

 属性 描述
max

number 规定允许的最大值
min

number 规定允许的最小值
step

规定合法的数字间隔(如果step=“4”,则合法的数是-4、0、4、8)

 
value

number 规定默认值

4.range类型的应用

range类型的input元素提供用于输入包含一定范围内数字值的文本框,在网页中显示滚动条。我们还可以设定对所接受的数字的限制,包括规定允许的最大值和最小值、合法的数字间隔或默认值等。如果输入的数字不在限定范围之内,则会出现错误提示。range类型的属性见图1-1

range类型与number类型的属性是完全相同的,这两种类型不同在于外观表现上。

不支持range属性的浏览器则会讲显示为普通的纯文本输入框。

5.日起检出器类型的应用

HTML5提供了多个可用于选取日起和时间的输入类型,即6种日期检出器控件,分别用于选择一下日期格式:日期、月、星期、时间、日期+时间和日期+时间+时区,如表4.4所示:

 
输入类型

HTML代码 功能与说明
date

 <input type="date" name="date1"> 选取日、月、年
month

<input type="month"> 选取月、年
week

<input type="week"> 选取某年第几周
time

<input type="time"> 选取时间(小时和分钟)
datetime

<input type="datetime"> 选取时间、日、月、年、(UTF时间)
datetime-local

<input type="datetime-local">

选取时间、日、月、年、(本地时间)

注:UTF是Universal Time Coordinated的英文缩写,即”协调世界时“

简单的说,UTF时间就是0时区的时间,而本地时间即地方时间。例如,如果北京时间为早上8点,则UTF时间为0点,即UTF时间比北京时间晚8小时。

时间: 2024-08-25 18:33:13

新增的HTML5表单属性的相关文章

html5中新增的form表单属性

html5中新增两个表单属性,分别autocomplete和novalidate属性 1.autocomplete属性 该属性用于控制自动完成功能的开启和关闭.可以设置表单或者input元素,有两个属性值,当设置为on时,启动该功能:当设置off时,关闭该功能.启用该功能后,当用户在自动完成域开始输入时,浏览器就会在该域中显示填写的选项.用户每提交一次,就会增加一个用于选择的选项 <!DOCTYPE html> <html> <head lang="en"

服务器变量 超级全局数组$_SERVER (附加超简单表单与html5表单属性)

001.html <html> <head><title>user log</title> <meta http-equiv="content-type" content="text/html;charset:utf-8"> </head> <body> <form method="post" action="001.php"> 用

HTML5 表单属性

1.HTML5 新的表单属性 HTML5 的 <form> 和 <input>标签添加了几个新属性. <form>新属性:autocomplete.novalidate <input>新属性:autocomplete.autofocus.form.formaction.formenctype.formmethod.formnovalidate.formtarget.height and width.list.min and max.multiple.patt

Html5之高级-2 HTML5表单属性(属性介绍、属性详解)

一.属性介绍 属性介绍 - 有一些输入类型要求使用特定的属性才能显示效果,如前面提到过min,max,step. 其他输入类型需要使用一些属性来改进其他性能,或者决定验证过程的重要性.HTML5 标准中再原来的基础上增加了一些新的属性. - Placeholder 属性 - Nultiple 属性 - Autofocus 属性 - Form 属性 二.属性详解 Placeholder 属性 - Placeholder 属性通常用于search输入类型,也可以用在文本域.它表示一个简单提示.单词或

html5表单属性

这里主要讲form和input元素的新属性. 新的form属性:autocomplete和novalidate 新的input属性:autocomplete.autofocus.form.form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget).height 和 width.list.min, max 和 step.multiple.pattern (regexp).placeholder.r

jQuery html5Validate基于HTML5表单验证插件

一.前言 前3篇文章实际都是为本文做铺垫的,如果以下棋表示,前三篇是普通走棋,本篇是将军! 目前市面上有不少表单验证插件,看似强大,实在糟糕! 总结下,有以下一些问题: 过多干预包括:改变了表单元素UI, 为表单元素绑定过多事件等 布局等限制包括:需要特定结构的布局,需要特定的类名或者ID 学习成本包括:N多元作者自定义的属性,或者自定义的特定的数据结构 可用性 当JS出现错误的时候而无法正常运作的时候,验证就是聋子的耳朵——摆设,即使在现代浏览器下也是如此. 面向未来的表单验证 验证驱动验证信

HTML5表单新增属性

------------------siwuxie095 HTML5 表单新增元素与属性 1.form 属性 在 HTML4 中,表单内的从属元素必须书写在表单内部,而 在 HTML5 中,可以把它们书写在页面上任何地方,然后为 该元素指定一个 form 属性,属性值为该表单的 id,这样就 可以声明该元素从属于指定表单了 2.formaction 属性 在 HTML4 中,一个表单内的所有元素只能通过表单的 action 属性被统一提交到另一个页面,而在 HTML5 中,可以为所有 的提交按钮

HTML5常用语义化标签&amp;表单类型&amp;表单属性

HTML5语义化标签 1.<article>表示包含一个文档.页面.应用程序或网站中的一段独立的内容,也就是说,它能够独立地被发布或重新使用.可适用的地方有:一篇博客.一个论坛帖子.一篇新闻报道.一个用户评论... 2.<header>一般被放置在页面的顶部,或者页面中某个区块元素的顶部,包含整个页面或某个区块的标题.简介等信息. 一个文档中可以包含多个header标签header标签不一定只能显示在页面的上方,它的内容决定该地方是否需要使用header标签可以为body.arti

HTML5 学习笔记 表单属性

HTML5新的表单属性 HTML5 的form和input 标签添加了几个新的属性 <form>新属性 autocomplete novalidate input 新属性 autocomplete autofocus form formaction formenctype formmethod formnovalidate formtarget height and width list min and max multiple pattern (regexp) placeholder req