HTML - 表單屬性

上一頁
下一頁

HTML 表單是簡單的表單，用於收集使用者資料。HTML 表單具有互動式控制元件和各種輸入型別，例如文字、數字、電子郵件、密碼、單選按鈕、複選框、按鈕等。

HTML <form> 標籤用於建立HTML 表單。

什麼是表單屬性？

在 HTML 中，每個元素都有其自身的屬性，用於定義該特定 HTML 元素的特性，並放置在元素的開始標籤內。<form> 元素也具有屬性，這些屬性提供不同的功能，例如重定向到其他網頁和自動完成文字。

以下是最常用的表單屬性列表：

  • action: HTML action 屬性用於指定處理表單提交的 URL。
  • method: HTML method 屬性用於定義提交表單時要使用的 HTTP 方法。
  • target: HTML target 屬性用於指定在何處開啟連結的文件。
  • autocomplete: HTML autocomplete 屬性允許您設定表單的自動完成功能是否開啟或關閉。
  • enctype: HTML enctype 屬性用於指定在將表單輸入資料傳送到伺服器之前如何對其進行編碼。
  • novalidate: HTML novalidate 屬性定義在提交表單時，不應在 HTML 文件中驗證表單資料。

action 屬性

<form> 元素的action 屬性將使用者的輸入傳輸到後端指令碼進行處理。除非表單處理使用者提供的資訊，否則表單毫無用處。因此，將程式的 URL 傳遞給 action 屬性非常重要。請注意，formaction 屬性可以覆蓋 action 屬性的值。

示例

以下示例演示了action 屬性的使用。當我們單擊提交按鈕時，表單將把我們重定向到 Tutorialspoint 的主頁。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title> The action Attribute </title>
</head>

<body>
    <!-- Start of the form element -->
    <form action="/action_page.php">
        <!-- to take input -->
        Name:
        <input type="text" name="your_name" required/>
        <br><br> Email:
        <input type="email" name="mail" required/>
        <br><br>
        <!-- to submit the data -->
        <input type="submit">
    </form>
</body>

</html>

method 屬性

method 屬性決定瀏覽器上傳表單資訊時應使用哪種 HTTP 方法。最常用的方法如下：

值 描述
GET 這是表單提交的預設方法，這意味著如果我們沒有顯式指定方法名稱，表單將使用 GET 方法傳送資料。
POST 它用於在 HTTP 請求正文中傳送表單資料。它比 GET 方法更安全。
不建議在傳送敏感資訊（如信用卡/簽帳金融卡號和密碼）時使用 GET 方法，因為它會在 URL 中公開提交的資料。

示例

以下示例演示如何使用 <form> 元素的 method 屬性。單擊以下程式碼輸出中的提交按鈕後，使用者將被重定向到 Tutorialspoint 的主頁。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>The method Attribute</title>
</head>

<body>
    <!-- Start of the form element -->
    <form action="https://tutorialspoint.tw" method="post">

        Name:
        <input type="text" name="your_name" required/>
        <br><br> Email:
        <input type="email" name="mail" required/>
        <br><br>

        <input type="submit">
    </form>
</body>

</html>

target 屬性

target 屬性決定在提交表單後腳本的結果將在哪個目標視窗或框架中顯示。預設目標是當前視窗。target 屬性接受以下值：

值 描述
_self 在與單擊它的相同框架中開啟響應。
_blank 在新視窗或選項卡中開啟響應。
_parent 在父框架中開啟響應。
_top 在視窗的整個主體中開啟響應。
framename 在命名的 iframe 中開啟響應。

示例

在以下示例中，我們將使用值為_blank的target屬性。響應將在新選項卡中開啟。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title> The target Attribute </title>
</head>

<body>
    <!-- Start of the form element -->
    <form action="https://tutorialspoint.tw" target="_blank">
        Name:
        <input type="text" name="your_name" required/>
        <br><br> Email:
        <input type="email" name="mail" required/>
        <br><br>

        <input type="submit">
    </form>
</body>

</html>

novalidate 屬性

novalidate 是一個布林屬性，指示表單不需要任何型別的驗證。驗證是指根據預定義條件驗證使用者輸入正確性的過程。應用此屬性時，表單將免除此類檢查，允許使用者輸入繞過這些條件。

如果 HTML 元素上存在諸如 novalidate 之類的布林屬性，則它指定為 true，如果不存在，則假定為 false。它們不接受任何值。

示例

在上一個示例中，當我們輸入姓名和電子郵件時，表單將我們重定向到一個新的網頁。對於此示例，我們將使用 novalidate 屬性，它允許在不輸入任何資訊的情況下進行重定向。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title> The novalidate Attribute </title>
</head>

<body>
    <!-- Start of the form element -->
    <form action="https://tutorialspoint.tw"
          target="_blank" autocomplete="off" 
          method="get" novalidate>
        <!-- to take input -->
        Name:
        <input type="text" name="your_name" required/>
        <br><br> Email:
        <input type="email" name="mail" required/>
        <br><br>
        <!-- to submit the data -->
        <input type="submit">
    </form>
</body>

</html>

autocomplete 屬性

HTML 的autocomplete 屬性根據輸入欄位中輸入的初始字元預測並建議後續輸入。此屬性主要有兩個狀態，即on 和off。

值 描述
on 預設情況下，autocomplete 屬性設定為on，啟用自動完成功能。
off 可以將 autocomplete 屬性切換為off 以根據 Web 應用程式的要求停用此功能。

示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Form with Autocomplete</title>
</head>

<body>
    <h2>Form with Autocomplete Attribute</h2>

    <form action="https://tutorialspoint.tw/" 
          method="POST" autocomplete="on">
        <label for="name">Name:</label>
        <input type="text" id="name" 
               name="name" autocomplete="on">
        <br><br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email"
               autocomplete="on">
        <br><br>
        <button type="submit">Submit</button>
    </form>

    <p>
        Submit the form with some values, Next time 
        when you try to submit browser will suggest 
        previous submitted values.
    </p>
</body>

</html>

enctype 屬性

我們使用enctype 屬性來指定瀏覽器在將資料傳送到伺服器之前如何對其進行編碼。其可能的值為：

值 描述
application/x-www-form-urlencoded 這是大多數表單在簡單場景中使用的標準方法。
multipart/form-data 當您想要上傳二進位制資料（例如影像、Word 檔案等）時使用此方法。
text/plain 它只將空格編碼為 + 符號。

示例

在以下示例中，我們在 <form> 元素中使用值為“text/plain”的 HTML ‘enctype’ 屬性。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'enctype' Attribute</title>
   <style>
      form {
         width: 300px;
         padding: 10px;
         border-radius: 10px;
         background-color: rgb(9, 109, 190);
      }

      form h1 {
         font-family: sans-serif;
         letter-spacing: 2px;
         color: white;
         text-align: center;
         position: relative;
         top: -20px;
      }

      form input {
         padding: 12px;
         width: 80%;
         border: 1px solid white;
         border-radius: 5px;
         outline: none;
      }

      form label {
         font-size: 20px;
         color: white;
         padding: 5px 5px;
      }

      form button {
         padding: 12px;
         width: 100px;
         cursor: pointer;
         background-color: white;
         border: 1px solid white;
         border-radius: 5px;
      }
   </style>
</head>
<body>
   <!--HTML 'enctype' attribute-->
   <h3>Example of the HTML 'enctype' attribute</h3>
   <p>
       We are assigning the "text/plain" value to the 
       enctype attribute which means the data is being
       sent as plain text.
   </p>
   <form action="index.js" enctype="text/plain" method="POST">
      <h1>Login</h1>
      <label for="">Username</label>
      <br>
      <input type="text" id='uname' placeholder="Username">
      <br>
      <br>
      <label for="">Password</label>
      <br>
      <input type="password" id='psw' placeholder="Password">
      <br>
      <br>
      <button type='submit' onclick="Login()">Login</button>
   </form>
   <script src="index.js"></script>
</body>
</html>

index.js

function Login(){
   var uname = document.getElementById("uname").value;
   var password = document.getElementById("psw").value;

   document.write("Username: " + uname);
   document.write("<br>");
   document.write("Password: " + password);
}
列印頁面
上一頁
下一頁
廣告