免費(fèi)AI編程助手
HTML 表單屬性
HTML表單屬性
Form autocomplete
有時候你不想讓瀏覽器自動填寫表單。我們可以使用 form 元素中的 autocomplete 屬性來控制這個。
autocomplete 屬性有兩個允許值:on和 off 。
on 值允許瀏覽器填寫表單，并且是默認(rèn)值。
以下代碼顯示了如何使用表單元素上的 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 屬性應(yīng)用于單個輸入元素，可以更具體，如以下代碼所示。
<!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 屬性設(shè)置表單中輸入元素的默認(rèn)策略。
您可以覆蓋單個元素的該策略。
在上面的代碼中，表單元素上的屬性禁用自動完成，但是應(yīng)用于第一個輸入元素的相同屬性會將其重新打開。
未應(yīng)用 autocomplete 屬性的第二個輸入元素受制于表單范圍策略。
Form Target
瀏覽器的默認(rèn)行為是用響應(yīng)服務(wù)器替換頁面。
您可以通過在表單元素上使用 target 屬性來更改此行為。
此屬性的工作方式與 a 元素上的target屬性相同，并且可以從目標(biāo)范圍中進(jìn)行選擇。
- _blank - 在新窗口（或選項(xiàng)卡）中打開服務(wù)器響應(yīng)
- _parent - 打開父框架集中的服務(wù)器響應(yīng)
- _self - 在當(dāng)前窗口中打開服務(wù)器響應(yīng)（這是默認(rèn)行為）
- _top - 在當(dāng)前窗口中打開服務(wù)器響應(yīng)（這是默認(rèn)行為）
- <frame> - 在指定的框架中打開服務(wù)器響應(yīng)
以下代碼顯示如何使用 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 屬性設(shè)置表單的唯一標(biāo)識符。
下面的代碼顯示了一個帶有 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>發(fā)布表單時，name屬性的值不會發(fā)送到服務(wù)器。此屬性僅在客戶端的DOM操作中有用，并且不像輸入元素上的name屬性那樣重要。
如果輸入元素沒有name屬性，則在提交表單時，用戶輸入的數(shù)據(jù)將不會發(fā)送到服務(wù)器。
表單屬性
在HTML5中，您可以使用由input，button和其他表單相關(guān)元素定義的form屬性將元素與文檔中任何位置的表單相關(guān)聯(lián)。
要將元素與不是先行的表單相關(guān)聯(lián)，請將form屬性設(shè)置為表單的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 屬性將自己與表單相關(guān)聯(lián)。
更多建議：