表单新增元素和属性

1.新增元素和属性
1.1新增属性
form属性:表单内的从属元素可以写在页面上任何地方,然后给该元素指定一个form属性,属性值为该表单的id,就可以表明该元素从属于指定表单了。(目前只有Opera 10支持)
formaction属性:可以给所有的提交按钮,诸如type:submit、image、submit都增加不同的formaction属性,使得点击不同的按钮,可以将表单提交到不同的页面。(目前无浏览器支持)
formmethod属性:可以用来对每个表单元素分别指定不同的提交页面,同时也可以用来对每个表单元素分别制定不同的提交方法。(目前无浏览器支持)
placeholder属性:当文本框(input类型为text或textarea标签)处于未输入状态时文本框中显示的输入提示。在其属性值内输入指定文字就可以了。(目前仅有Safari 4、GoogleChrome 3、Firefox 4)
autofocus属性:给文本框、选择框或按钮控件加上该属性,当画面打开时,该控件自动获得光标焦点。
一个页面上只能有一个控件具有该属性。强烈建议只有当一个页面是以使用某个控件为主要目的时,才对该控件使用,如搜索页面中的搜索文本框。(目前仅有Safari 4、GoogleChrome 3、Firefox 4)
list属性:HTML 5位单行文本框增加的属性,属性值为某个datalist元素的id。datalist元素类似于选择框,可以制作出输入值的下拉列表,但是当用户想要设定的值不在选择列表之内时,允许其自行输入。该元素本身并不显示,而是当文本框获得焦点时以提示输入的方式显示。为了避免在没有支持该元素的浏览器上显示错误,可以用css将其设为不显示。(目前只有Opera 10支持)
autocomplete属性:辅助输入所用的自动完成功能,节省输入时间且方便。可指定“on”
(可以显示制定候补输入的数据列表。使用datalist元素和list属性提供候补输入的数据列。)、“off”和“”(不指定,使用浏览器的默认值)三种值。(目前只有Opera 10支持)

1.2input元素的种类(目前来说支持最多最全面的是Opera 10)
url类型:专门用来输入url地址的文本框。提交时如果该文本框内容不是url地址格式的文字,则不允许提交。
email类型:专门用来输入email地址的文本框。提交时如果该文本框内容不是email地址格式的文字,则不允许提交,但是不检查email地址是否存在。提交时可以为空,除非加上了equired属性。multiple属性,允许在该文本框中输入一串以逗号分隔的email地址。
date类型:以日历的形式方便用户输入各种的日期。
time类型:专门用来输入时间的文本框,且在提交时会对输入时间的有效性进行检查。其外观取决于浏览器。
datetime类型:专门用来输入UTC(世界标准时间)时间和日期的文本框,且在提交时会对输入的时间和日期有效性进行检查。
datetime-local类型:专门用来输入本地时间和日期的文本框,且在提交时会对输入的时间和日期有效性进行检查。
month类型:专门用来输入月份的文本框,且在提交时会对输入的月份有效性进行检查。
week类型:专门用来输入周号的文本框,且在提交时会对输入的周号有效性进行检查。
number类型:专门用来输入数字的文本框,且在提交时会检查输入的内容是否为数字。具有min、max和step属性。在Opera浏览器中,它带有数值控制按钮,以控制数值,使之不超过最大最小值,同时点击控制按钮时会按照给定的步幅进行增减,也可直接输入数值。
range类型:只允许输入一段范围内数值的文本框,具有min和max属性(默认为0和100),还具有step属性可以指定每次拖动的步幅。
search类型:专门用来输入搜索关键词的文本框。与text类型只在外观上有区别。
tel类型:专门用来输入电话号码的文本框。没有特殊的校验规则,不强制输入数字,但开发者可以通过pattern属性来指定对于输入的电话号码格式的验证。
color类型:提供了一个颜色选取器来选取颜色。

Date Pickers类型: HTML 5拥有多个可供选择的日期和时间的新型输入文本框:

 date-选取日、月、年
 month-选取月、年
week-选取周、年
time-选取时间(小时和分钟)
datetime-选取时间、日、月、年(UTC时间)
datetime-local-选取时间、日、月、年(本地时间)

1.3output元素

定义不同类型的输出,比如计算结果或脚本的输出。必须将其写在表单内部,或者对其添加form属性。(目前只有Opera 10支持)

2.表单验证
2.1自动验证

对元素使用属性的方法,可以实现在表单提交时执行自动验证的功能。

required属性:可以用在大多数输入元素上(除了隐藏元素、图片元素按钮上)。在提交时,如果元素中内容为空白,则不允许提交,同时在浏览器中显示信息提示文字,提示用户这个元素必须输入内容。
pattern属性:对于输入内容需符合一定格式的input类型使用该属性,将属性值设为某个格式的正则表达式,在提交时会检查内容是否符合给定格式。
min和max属性:数值类型或日期类型的input元素的专用属性,限制了输入数值和日期的范围。
step属性:控制input元素中的值增加或减少时的步幅。

2.2显式验证

form元素和input元素(包括select元素和textarea元素)都具有一个checkValidity方法。调用该方法,可以显式地对表单内所有元素内容或单个元素内容进行有效性验证。该方法以Boolean的形式返回验证结果。
   form元素和input元素都还有一个validity属性,返回一个ValidityState对象。该对象具有很多属性,最简单重要的是valid属性,表示了表单内所有元素内容是否有效或单个input元素内容是否有效。

2.3取消验证

一是form元素的novalidate属性,可以关闭整个表单验证。

二是利用input元素或submit元素的formnovalidate属性。该属性可以让表单验证对单个input元素失效,当表单中需要验证的元素量少时可以利用这些元素的该属性;若对ubmit元素使用该属性时,点击按钮时,整个表单验证都失败了。 利用这点,可以实现“假提交”和“真提交”的效果。

2.4自定义错误消息

可以使用JS调用各input元素的setCustomValidity方法来自定义错误信息。(但是浏览器会在自定义提示信息上添加前缀,如“值***不允许页面上的脚本使用!”)

时间: 2024-10-19 20:35:40

表单新增元素和属性的相关文章

[html5] 学习笔记-表单新增元素与属性

本节讲的是表单元素的form,formaction属性,frommethod,formenctype属性,formtarget,autofocus属性,required,labels属性. 1.form属性 在html4中,表单内的从属元素必须书写在表单内部,而在html5中,可以把他们书写在页面上任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以指定该元素从属于指定表单了. 以往的写法: 1 <body> 2 <form id="testform&q

HTML5 表单新增元素与属性&lt;一&gt;

form属性:在HTML4中,表单内的从属元素必须书写在表单内部,而在HTML5中,可以书写在页面的任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了. <!DOCTYPE html> <html> <head lang="en"> <title>form属性</title> <meta charset="utf-8"> </head&g

HTML5 表单新增元素与属性(二)

标签的control属性:在HTML5中,可以在标签内部放置一个表单元素,并通过该标签的control属性来访问该表单元素. <!DOCTYPE html> <html> <head lang="en"> <title>标签的control属性</title> <meta charset="utf-8"> </head> <body> <script type=&q

H5表单新增元素和属性

1.form--把要提交的内容指定特定表单,而这个要提交内容不需要被包含在特定表单中. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>form</title> </head> <body> <form action="" id="testfor

表单及表单新增元素

要想更好运用表单就要了解表单的的更多元素与属性,首先看看对表单基本了解. 表单的基本了解  <form> 元素用于用户输入数据的收集  <input> 元素是最重要的表单元素,有许多type其中<input type="submit">是用于向表单处理程序提交表单的按钮.  <select> 元素<option> 元素定义待选择的下拉列表选项,  <textarea> 元素定义文本区域.  <button&

HTML笔记三,表单相关元素和属性

表单元素 <form>:用于生成输入表单,该元素不可视化 action:指定当前表单提交的地址,必填 method:指定提交表单时发送何种类型的请求,post或者get,一般post,必填:其中GET方式可以在地址栏种看到传送的数据,POST方法看不到较安全 enctype:指定对表单内容进行编码的字符集 name:名称 target:以何种方式打开目标url,_self,_blank,_top,_parent四个中的一个 <input>: type= text:单行文本框 pas

html5中表单新增元素与属性

form 很多初学者对与form不是很理解,其实从html的MDN中可以看出,form是用在前后台的交互上的,比如我需要把表单的内容(input里的内容提交到后台),这是就需要input包裹在form里面. 1 <form action="xxx.php" method="post"> 2 <input type="text" name="ID"> 3 <input type="subm

HTML5---3.表单新增的type属性

新增的表单类型 形如: <input type="xxx" > url number email tel search color date datetime week month range <body> <form action=""> 用户名:<input type="text" name="userName"> <br> 密码:<input type=&

HTML5表单新增属性

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