Web Forms 2.0是HTML4中的表单功能的扩展. HTML5中的表单元素和属性提供了比HTML4更大程度的语义标记,并使我们免于HTML4中所需的大量繁琐的脚本和样式.
<input>HTML4中的元素
HTML4输入元素使用类型属性指定数据类型.HTML4提供以下类型 :
Sr.No. | Type&描述 |
---|---|
1 |
text 自由格式文本字段,名义上没有换行符. |
2 |
password 敏感信息的自由格式文本字段,名义上没有换行符. |
3 |
checkbox 预定义列表中的一组零个或多个值. |
4 |
radio 枚举值. |
5 |
submit 免费形式的按钮会启动表单提交. |
6 |
file 任意一个MIME类型的文件,可选择一个文件名. |
7 |
image 一个坐标,相对于特定图像的大小,具有必须的额外语义选择的最后一个值并启动表单提交. |
8 |
hidden 通常不会向用户显示的任意字符串. |
9 |
select 枚举值,与收音机类型非常相似. |
10 |
textarea 一个自由格式的文本字段,名义上没有换行限制. |
11 |
button 一种免费形式的按钮,可以启动与按钮相关的任何事件. |
以下是使用标签,单选按钮和提交按钮的简单示例 :
... <form action = "http://example.com/cgiscript.pl" method = "post"> <p> <label for = "firstname">first name: </label> <input type = "text" id = "firstname"><br /> <label for = "lastname">last name: </label> <input type = "text" id = "lastname"><br /> <label for = "email">email: </label> <input type = "text" id = "email"><br> <input type = "radio" name = "sex" value = "male"> Male<br> <input type = "radio" name = "sex" value = "female"> Female<br> <input type = "submit" value = "send"> <input type = "reset"> </p> </form> ...
<input>HTML5中的元素
除了上述属性之外,HTML5输入元素还为类型属性引入了几个新值.这些列在下面.
注意 : 使用最新版本的 Opera 浏览器尝试以下所有示例.
Sr.No. | Type&描述 |
---|---|
1 | datetime 日期和时间(年,月,日,小时,分钟,秒,根据ISO 8601编码,时区设置为UTC. |
2 | datetime-local 根据ISO 8601编码的日期和时间(年,月,日,小时,分钟,秒,分数),没有时区信息. |
3 | date 根据ISO 8601编码的日期(年,月,日). |
4 | |
5 | week 根据ISO 8601编码的包含年份和周数的日期. |
6 | time 根据ISO 8601编码的时间(小时,分钟,秒,小数秒) . |
7 | number 它只接受数值. step属性指定精度,默认为1. |
8 | range 范围type用于输入字段,其中应包含一系列数字中的值. |
9 | email 它只接受电子邮件值.此类型用于应包含电子邮件地址的输入字段.如果您尝试提交简单文本,则会强制仅以email@example.com格式输入电子邮件地址. |
10 | url 它只接受URL值.此类型用于应包含URL地址的输入字段.如果您尝试提交简单文本,则会强制仅以http://www.example.com格式或http://example.com格式输入网址. |
<output>元素
HTML5引入了一个新元素< output>用于表示不同类型输出的结果,例如脚本写入的输出.
您可以使用 for 属性指定之间的关系输出元素和文档中影响计算的其他元素(例如,作为输入或参数). for属性的值是以空格分隔的其他元素的ID列表.
<!DOCTYPE HTML> <html> <head> <script type = "text/javascript"> function showResult() { x = document.forms["myform"]["newinput"].value; document.forms["myform"]["result"].value = x; } </script> </head> <body> <form action = "/cgi-bin/html5.cgi" method = "get" name = "myform"> Enter a value : <input type = "text" name = "newinput" /> <input type = "button" value = "Result" onclick = "showResult();" /> <output name = "result"></output> </form> </body> </html>
它将产生以下结果 :
占位符属性
HTML5引入了一个名为占位符的新属性。 <input>和<textarea>元素上的此属性向用户提示可以在字段中输入的内容。 占位符文本不得包含回车符或换行符。
这是占位符属性的简单语法
<input type = "text" name = "search" placeholder = "search the web"/>
仅最新版本的Mozilla,Safari和Crome浏览器支持此属性。
<!DOCTYPE HTML> <html> <body> <form action = "/cgi-bin/html5.cgi" method = "get"> Enter email : <input type = "email" name = "newinput" placeholder = "email@example.com"/> <input type = "submit" value = "submit" /> </form> </body> </html>
自动焦点属性
这是一种简单的单步模式,在文档加载时可以很容易地用JavaScript编程,可以自动聚焦于一个特定的表单字段。
HTML5引入了一个名为autofocus的新属性,该属性将按以下方式使用
<input type = "text" name = "search" autofocus/>
仅Mozilla,Safari和Chrome浏览器的最新版本支持此属性。
<!DOCTYPE HTML> <html> <body> <form action = "/cgi-bin/html5.cgi" method = "get"> Enter email : <input type = "text" name = "newinput" autofocus/> <p>Try to submit using Submit button</p> <input type = "submit" value = "submit" /> </form> </body> </html>
必填属性
现在您不需要使用JavaScript来进行客户端验证,例如永远不会提交空文本框,因为HTML5引入了一个名为required的新属性,该属性将按以下方式使用并坚持具有值
<input type = "text" name = "search" required/>
仅Mozilla,Safari和Chrome浏览器的最新版本支持此属性。
<!DOCTYPE HTML> <html> <body> <form action = "/cgi-bin/html5.cgi" method = "get"> Enter email : <input type = "text" name = "newinput" required/> <p>Try to submit using Submit button</p> <input type = "submit" value = "submit" /> </form> </body> </html>