免費(fèi)AI編程助手
HTML 表單按鈕
2018-06-16 16:16 更新
HTML表單按鈕
有三種方法可以使用按鈕通過設(shè)置三個(gè)不同的type屬性。
- submit - 指定該按鈕將用于提交表單
- reset - 指定該按鈕將用于重置表單
- button - 指定按鈕沒有特定的語義意義
提交按鈕 - 提交表單
當(dāng)您設(shè)置要submit按鈕的type屬性時(shí)，按下按鈕將提交包含按鈕的表單。
這是未應(yīng)用 type 屬性時(shí)的默認(rèn)行為。
提交按鈕具有以下列出的一些附加屬性。
- form - 指定與按鈕相關(guān)聯(lián)的一個(gè)或多個(gè)表單。
- formaction - 覆蓋表單元素上的操作屬性，并指定要提交的新URL。
- formenctype - 覆蓋表單元素上的enctype屬性，并指定表單數(shù)據(jù)的編碼方案。
- formmethod - 覆蓋表單元素上的方法屬性。
- formtarget - 覆蓋表單元素上的target屬性。
- formnovalidate - 覆蓋表單上的novalidate屬性以指定是否應(yīng)執(zhí)行客戶端驗(yàn)證。
以下代碼顯示了如何將這些屬性應(yīng)用于按鈕元素。
<!DOCTYPE HTML>
<html>
<body>
<form>
<p>
<label for="fave">Fruit:
<input autofocus id="fave" name="fave" /></label>
</p>
<p>
<label for="name">Name:
<input id="name" name="name" /></label>
</p>
<button type="submit"
formaction="http://example.com/form"
formmethod="post">Submit Vote</button>
</form>
</body>
</html>
上面的代碼從表單元素中省略了action和method屬性，并通過button元素上的 formaction 和 formmethod 屬性提供了配置。
重置按鈕 - 重置表單
如果將某個(gè)button的type屬性設(shè)置為reset ，則按下該按鈕可將表單中的所有輸入元素重置為其初始狀態(tài)。
重置按鈕沒有其他屬性。
以下代碼顯示了向HTML文檔添加重置按鈕。
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<p>
<label for="fave">Fruit:
<input autofocus id="fave" name="fave" /></label>
</p>
<p>
<label for="name">Name: <input id="name" name="name" /></label>
</p>
<button type="submit">Submit Vote</button>
<button type="reset">Reset</button>
</form>
</body>
</html>通用按鈕
如果將type屬性設(shè)置為button，則創(chuàng)建一個(gè)普通按鈕。它沒有特殊的意義，不會(huì)做任何事情，當(dāng)你按它。
以下代碼顯示了一個(gè)通用按鈕。
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<p>
<label for="fave">Fruit: <input autofocus id="fave"
name="fave" /></label>
</p>
<p>
<label for="name">Name: <input id="name" name="name" /></label>
</p>
<button type="button">
Do <strong>NOT</strong> press this button
</button>
</form>
</body>
</html>您可以對按鈕元素中包含的文本設(shè)置樣式。
圖像按鈕
<html>
<body>
<form action="" method="post">
<button type="submit">Submit</button>
<br /><br />
<button type="reset"><b>Clear this form</b> I want to start again</button>
<br /><br />
<button type="button"><img src="http://www.m.o2fo.com/style/download.png" alt="submit" /></button>
</form>
</body>
</html>以上內(nèi)容是否對您有幫助：
更多建議：