HTML表单属性
Form autocomplete
有时候你不想让浏览器自动填写表单。我们可以使用 form 元素中的 autocomplete 属性来控制这个。
autocomplete 属性有两个允许值:on和 off 。
on 值允许浏览器填写表单，并且是默认值。
以下代码显示了如何使用表单元素上的 autocomplete 属性。
<!DOCTYPE HTML> <html> <body> <form autocomplete="off" method="post" action="http://example.com/form"> <input name="fave" /> <input name="name" /> <button>Submit Vote</button> </form> </body> </html>点击查看实例
例1
您可以通过将 autocomplete 属性应用于单个输入元素，可以更具体，如以下代码所示。
<!DOCTYPE HTML> <html> <body> <form autocomplete="off" method="post" action="http://example.com/form"> <input autocomplete="on" name="fave" /> <input name="name" /> <button>Submit Vote</button> </form> </body> </html>点击查看实例
form元素上的autocomplete 属性设置表单中输入元素的默认策略。
您可以覆盖单个元素的该策略。
在上面的代码中，表单元素上的属性禁用自动完成，但是应用于第一个输入元素的相同属性会将其重新打开。
未应用 autocomplete 属性的第二个输入元素受制于表单范围策略。
Form Target
浏览器的默认行为是用响应服务器替换页面。
您可以通过在表单元素上使用 target 属性来更改此行为。
此属性的工作方式与 a 元素上的target属性相同，并且可以从目标范围中进行选择。
_blank - 在新窗口（或选项卡）中打开服务器响应
_parent - 打开父框架集中的服务器响应
_self - 在当前窗口中打开服务器响应（这是默认行为）
_top - 在当前窗口中打开服务器响应（这是默认行为）
<frame> - 在指定的框架中打开服务器响应
以下代码显示如何使用 target 属性。
<!DOCTYPE HTML> <html> <body> <form target="_blank" method="post" action="http://example.com/form"> <input autocomplete="on" name="fave" /> <input name="name" /> <button>Submit Vote</button> </form> </body> </html>点击查看实例
Form Name
name 属性设置表单的唯一标识符。
下面的代码显示了一个带有 name 和 id 属性的form元素。它们具有相同的值。
<!DOCTYPE HTML> <html> <body> <form name="fruitvote" id="fruitvote" method="post" action="http://example.com/form"> <input name="fave" /> <input name="name" /> <button>Submit Vote</button> </form> </body> </html>
发布表单时，name属性的值不会发送到服务器。此属性仅在客户端的DOM操作中有用，并且不像输入元素上的name属性那样重要。
如果输入元素没有name属性，则在提交表单时，用户输入的数据将不会发送到服务器。
表单属性
在HTML5中，您可以使用由input，button和其他表单相关元素定义的form属性将元素与文档中任何位置的表单相关联。
要将元素与不是先行的表单相关联，请将form属性设置为表单的id值。
以下代码显示如何使用表单Attribute。
<!DOCTYPE HTML> <html> <body> <form id="voteform" method="post" action="http://example.com/form"> <p> <label for="fave">Fruit: <input autofocus id="fave" name="fave" /></label> </p> </form> <p> <label for="name">Name: <input form="voteform" id="name" name="name" /> </label> </p> <button form="voteform" type="submit">Submit Vote</button> <button form="voteform" type="reset">Reset</button> </body> </html>点击查看实例
在上面的代码中，只有一个输入元素是 form 元素的后代。另一个input元素和两个button元素都在表单元素之外，并且他们使用 form 属性将自己与表单相关联。