閱讀(20.8k) 書簽贊(3) 我要糾錯

HTML 表單按鈕

2018-06-16 16:16 更新

HTML表單按鈕

有三種方法可以使用按鈕通過設置三個不同的type屬性。

submit - 指定該按鈕將用于提交表單
reset - 指定該按鈕將用于重置表單
button - 指定按鈕沒有特定的語義意義

提交按鈕 - 提交表單

當您設置要submit按鈕的type屬性時，按下按鈕將提交包含按鈕的表單。

這是未應用 type 屬性時的默認行為。

提交按鈕具有以下列出的一些附加屬性。

form - 指定與按鈕相關聯的一個或多個表單。
formaction - 覆蓋表單元素上的操作屬性，并指定要提交的新URL。
formenctype - 覆蓋表單元素上的enctype屬性，并指定表單數據的編碼方案。
formmethod - 覆蓋表單元素上的方法屬性。
formtarget - 覆蓋表單元素上的target屬性。
formnovalidate - 覆蓋表單上的novalidate屬性以指定是否應執(zhí)行客戶端驗證。

以下代碼顯示了如何將這些屬性應用于按鈕元素。

<!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 屬性提供了配置。

重置按鈕 - 重置表單

如果將某個button的type屬性設置為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屬性設置為button，則創(chuàng)建一個普通按鈕。它沒有特殊的意義，不會做任何事情，當你按它。

以下代碼顯示了一個通用按鈕。

<!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>

您可以對按鈕元素中包含的文本設置樣式。

圖像按鈕

<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.xlrtb.cn/style/download.png" alt="submit" /></button>
    </form>
</body>
</html>

以上內容是否對您有幫助：