1、form属性
在HTML4中,表单内的从属元素必须书写在表单内部,但是在HTML5中,可以把他们书写在页面上任何地方,然后给元素制定一个form属性,属性值为该表单单位的id,这样就可以声明该元素从属于指定表单了。
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>form属性</title> </head> <body> <form action="" id="testform"> <input type="text" name="" /> </form> <textarea form="testform" name="" cols="30" rows="10"></textarea> </body> </html>
input元素从属于表单,它呗书写在表单内部,用不着再对它制定form属性。textarea元素呗书写在表单之外,但它从属于表单,所以表单的id制定给textareea元素的form属性。
这样做的好处是当需要给页面中的元素添加样式时可以更方便地添加,因为它们不是被分散在各表单之内的了。
2、formaction属性
在HTML4中,一个表单内的所有元素都只有通过表单的action属性统一提交到另一个页面,而在HTML5中可以给所有的提交按钮,诸如<input type=”submit” value=”" />、<input type=”image” src=”" alt=”" />、<button type=”submit”></button>都增加不同的formaction属性,使得点击不同的按钮,可以将表单提交到不同的页面。
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>formaction属性</title> </head> <body> <form action="serve.php" id="testrorm"> <input type="submit" value="v1" name="s1" formaction="s1.php" />提交到S1 <input type="submit" value="v2" name="s1" formaction="s2.php" />提交到S2 <input type="submit" value="v3" name="s1" formaction="s3.php" />提交到S3 </form> </body> </html>
3、formmethod属性
在HTML4中,一个表单内只有一个action属性来对表单内所有元素统一指定提交页面,所以每个表单也只有一个method属性来指统一指定提交方法。在HTML5中,可以使用formaction属性来对每个表单元素分别指定不同的提交页面,同时也可以使用formmethod属性来对每个表单元素分别指定不同的提交方法。
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>formmethod属性</title> </head> <body> <form action="serve.php" id="testrorm"> <input type="submit" value="v1" name="s1" formaction="s1.php" formtmehod="get" />提交到S1 <input type="submit" value="v2" name="s1" formaction="s2.php" formtmehod="post" />提交到S2 <input type="submit" /> </form> </body> </html>
4、placeholder属性
placeholder是指当文本框(input type=”text” 或 textarea)处于未输入状态并且未获取焦点时,模糊显示输入提示文字。
实现方法非常简单,只要加上placeholder属性,然后制定提示文字就可以了。
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>placeholder属性</title> </head> <body> <input type="text" placeholder="默认文字" /> </body> </html>
5、autofocus属性
给文本框,选择框或按钮控件加上该属性。当页面加载时,该控件自动获取光标焦点。目前为止要做到这一点需要使用JavaScript,譬如“control.focus()”。
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>autofocus属性</title> </head> <body> <form action="serve.php" id="testrorm"> <input type="text" autofocus /> </form> </body> </html>
6、list属性
在HTML5中,给单行文本框(input type=”text”)增加了一个list属性,该属性的值为某个detalist元素的id。detalist元素的HTML5中新增的元素,该元素类似于选择框(select),但是当用户想要设定的值不在选择列表之内时,允许其自行输入。该元素本身并不显示,而是当文本框获得焦点时以提示输入的方式显示。为了避免在没有支持该元素的浏览器上出现显示错误,可以用css等将它设置为不显示。
从实用角度来说,请不要随便滥用该属性。强烈建议只有当一个页面是以使用某个控件为主要目的时,才对该控件使用autofocus属性,譬如搜索页面中搜索文本框。
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>list属性</title> </head> <body> text:<input type="text" name="btcss" list="btcss" /> <!-- 使用style="display:none;"将datalist元素设为不显示 --> <datalist id="btcss" style="display: none;"> <option value="btcss1">btcss1</option> <option value="btcss2">btcss2</option> <option value="btcss3">btcss3</option> </datalist> </body> </html>
为什么没有把input元素与datalist元素结合为一个元素,像其他语言中的可输入下拉框那样?这是基于兼容性的考虑——在不支持HTML5的浏览器中,可以忽略datalist元素,以便正常输入以及用脚本编程的方式对input元素执行其他操作。
7、autocomplete属性
辅助输入所用的自动完成功能,是一个节省输入时间,同时也十分方便的功能。在HTML5之前,因为谁都可以看见输入的值,所以存在圈圈隐患,但只要使用autocomplete属性,安全性就可以得到很好的控制。
对于autocomplete属性,可以制定“on”、“off”与“”(不指定)这三种值。不指定时,使用浏览器的默认值(取决于各浏览器的决定)。把该属性设为on时,可以显示指定候补输入的数据列表。使用datalist元素与list属性提供候补输入的数据列表,自动完成时,可以将该datalist元素中的数据作为候补输入的数据在文本框中自动显示。
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>autocomplete属性</title> </head> <body> text1:<input type="text" name="btcss" list="btcss" /> text2:<input type="text" name="btcss" autocomplete="on" list="btcss" /> <!-- 使用style="display:none;"将datalist元素设为不显示 --> <datalist id="btcss" style="display: none;"> <option value="btcss1">btcss1</option> <option value="btcss2">btcss2</option> <option value="btcss3">btcss3</option> </datalist> </body> </html>
以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索form
, 表单
, 页面
, 属性
, 元素
, html form属性
, 一个
form表单元素
,以便于您获取更多的相关知识。