HTML - 輸入屬性

HTML 輸入屬性用於定義<input>元素的特性和行為。

這些屬性用於不同型別的輸入欄位，例如文字、電子郵件、密碼、日期、數字等等。請注意，Input 元素用於為基於 Web 的表單建立互動式控制元件，以便它可以接受來自使用者的輸入。

<input> 元素只需要一個開始標籤。在本教程中，我們將探討與 <input> 元素一起使用的屬性。

以下是 <input> 元素的屬性：

屬性	描述
type	HTML 輸入標籤的 HTML 輸入型別屬性指定要顯示的輸入元素型別。
name	HTML 輸入名稱屬性用於指定元素的名稱。
value	HTML 輸入值屬性用於定義頁面載入時輸入欄位的初始值。
size	HTML 輸入大小屬性以字元數表示輸入欄位的寬度。
maxlength	HTML 輸入 maxlength 屬性用於指定輸入文字的最大字元限制。
readonly	HTML 輸入只讀屬性用於指定具有不可編輯文字的輸入欄位。
disabled	HTML 輸入 disabled 是一個布林屬性，用於使表單元素不可互動。
min	HTML 輸入 min 屬性指定輸入欄位可以接受的最小值。
max	HTML 輸入 max 屬性指定輸入欄位可以接受的最大值。
accept	HTML 輸入 accept 屬性用於定義伺服器將接受的副檔名型別。
multiple	HTML 輸入 multiple 屬性是一個布林屬性，允許表單控制元件接受多個值。
placeholder	HTML 輸入 placeholder 屬性用於定義簡短的提示，幫助使用者進行資料輸入。
required	HTML 輸入 required 屬性用於指定在提交表單之前必須填寫輸入欄位。
autofocus	HTML 輸入 autofocus 屬性是一個布林屬性，用於指定頁面載入後應自動聚焦某個元素。
list	HTML 輸入 list 屬性用於指定使用者可以選擇預定義選項的列表。

輸入標籤屬性示例

以下示例將說明輸入標籤的所有屬性，以及我們應該在哪裡以及如何使用這些屬性！

輸入標籤的型別和值屬性

在此示例中，我們演示了不同型別的輸入欄位及其在 HTML 表單中的相應值屬性。我們在輸入欄位中提供的值將是預設值，使用者可以根據需要編輯它。

<!DOCTYPE html>
<html>

<head>
      <title>Input Type Attribute Examples</title>
</head>

<body>
<h1>HTML Input Type Attribute Examples</h1>

<form>
   <!-- Text Input -->
   <label for="text">Text:</label>
   <input type="text" 
          id="text" 
          name="text" 
          value="Default Text">
   <br><br>

   <!-- Password Input -->
   <label for="password">Password:</label>
   <input type="password" 
          id="password" 
          name="password" 
          value="password123">
   <br><br>

   <!-- Range Input -->
   <label for="range">Range:</label>
   <input type="range" 
          id="range" 
          name="range" 
          min="0" 
          max="100" 
          value="50">
   <br><br>

   <!-- Datetime-local Input -->
   <label for="datetime">Datetime-local:</label>
   <input type="datetime-local" 
          id="datetime" 
          name="datetime" 
          value="2023-06-01T12:00">
   <br><br>

   <!-- Submit Button -->
   <input type="submit" value="Submit">

</form>

</body>
</html>

輸入標籤的名稱屬性

在此示例中，我們將使用 input 標籤的 name 屬性為使用者名稱和電子郵件指定名稱。

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

<head>
   <title>Form Example with Name Attribute</title>
   <script>
      function showAlert() {
         var name = document.getElementById('name').value;
         var email = document.getElementById('email').value;
         alert('Name: ' + name + '\nEmail: ' + email);
      }
   </script>
</head>

<body>
   <h1>Contact Us</h1>
   <form onsubmit="return false;">
      <label for="name">Name:</label>
      <input type="text" 
               id="name" 
               name="user_name">
      <br><br>

      <label for="email">Email:</label>
      <input type="email" 
               id="email" 
               name="user_email">
      <br><br>

      <button type="button" onclick="showAlert()">
         Submit
      </button>
   </form>
</body>
</html>

輸入標籤的大小和 maxlength 屬性

在此示例中，我們將看到 input 元素的 size 和 maxlength 屬性之間的區別。

<!DOCTYPE html>
<html>

<head>
      <title>Size and Maxlength Attribute</title>
</head>

<body>
   <h1>HTML Size and Maxlength Attribute</h1>

   <h2>Size Attribute</h2>
   <p>
      The <code>size</code> attribute specifies 
      the visible width of the input field in characters.
   </p>
   
      Size 10:
      <input type="text" 
               name="size-example" 
               size="10" 
               value="1234567890">

   <h2>Maxlength Attribute</h2>
   <p>
      The <code>maxlength</code> attribute specifies 
      the maximum number of characters that can be entered in 
      the input field.
   </p>
      Maxlength 10:
      <input type="text" 
               maxlength="10" 
               value="1234567890">

   <h2>Combined Size and Maxlength</h2>
   <p>
      Here is an example combining both <code>size</code> 
      and <code>maxlength</code> attributes.
   </p>
      Size 10, Maxlength 5:
      <input type="text" 
            size="10" 
            maxlength="5" 
            value="12345">
</body>

</html>

輸入標籤的 disabled 和 readonly 屬性

以下示例顯示了"readonly"屬性和"disabled"屬性在<input>元素中的用法區別。

<!DOCTYPE html>
<html>

<head>
      <title>Readonly and Disabled Attributes </title>
</head>

<body>
   <h1>HTML Readonly and Disabled Attributes </h1>
   
   <h2>Readonly Attribute</h2>
   <p>
      The <code>readonly</code> attribute allows 
      the user to view the content but not modify it.
   </p>
   Readonly:
   <input type="text" value="Readonly Text" readonly>

   <h2>Disabled Attribute</h2>
   <p>
      The <code>disabled</code> attribute makes the 
      input field unmodifiable and prevents user interaction.
   </p>

   Disabled:
   <input type="text" value="Disabled Text" disabled>
</body>

</html>

輸入標籤的 min 和 max 屬性

在以下示例中，我們將看到如何在 input 標籤中使用 min 和 max 屬性。我們使用 min 和 max 屬性將最少工作小時數指定為 3，最大工作小時數指定為 8。

<!DOCTYPE html>
<html>
<head>
   <title>The min and max Attribute</title>
</head>
<body>
   <form >
      Emp. Name: 
      <input type = "text" 
             name = "your_name" 
             placeholder = "your name..."/>
      <br><br>
      Organization: 
      <input type = "text" 
             name = "organization" 
             value = "Tutorialspoint" 
             readonly/>
      <br><br>
      Working Hrs: 
      <input type = "number" 
             name = "working_hours" 
             min="3" 
             max="8"/>
   </form>
</body>
</html>

輸入標籤的 accept 和 multiple 屬性

在此示例中，我們將看到如何在 input 標籤內使用 accept 和 multiple 屬性。

<!DOCTYPE html>
<html>

<head>
      <title>Multiple and Accept Attributes</title>
</head>

<body>
   <h1>HTML Multiple and Accept Attributes</h1>

   <h2>Multiple Attribute</h2>
   <p>
      The <code>multiple</code> attribute allows the 
      user to select multiple files.
   </p>
      Select multiple files:
      <input type="file" 
               id="multiple-example" 
               name="files" 
               multiple>

   <h2>Accept Attribute</h2>
   <p>
      The <code>accept</code> attribute specifies the 
      types of files that the server accepts (that can 
      be submitted through file upload).
   </p>
      Select image files only:
      <input type="file" 
               id="accept-example" 
               name="images" 
               accept="image/*">

</body>

</html>

輸入標籤的 placeholder 和 required 屬性

在以下示例中，我們為姓名輸入欄位使用 placeholder 屬性，並在電子郵件和出生日期欄位中使用 required 屬性，表示該欄位必須包含某些值才能成功提交表單。

<!DOCTYPE html>
<html>
<head>
      <title>Placeholder and Required Attributes</title>
</head>
<body>
   <h3>Placeholder and Required Attributes</h3>

   <form onsubmit="return false;" >
      <p>The * Star represents mandatory field</p>
      <!-- Placeholder for name entry -->
      Emp. Name:
      <input type="text" 
               id="emp-name" 
               name="emp-name" 
               placeholder="Your Name">
      <br><br>
      <!-- Email and DOB are mandatory -->
      Emp. Email:
      <input type="email" 
               id="emp-email" 
               name="emp-email" 
               placeholder="example@email.com" 
               required>*
      <br><br>
      Date of Birth: 
      <input type="date" required>*
      <br><br>
      <input type="submit" value="Submit">
   </form>
</body>
</html>

輸入標籤的 autofocus 屬性

以下是 autofocus 屬性的示例。頁面完全載入後，將自動聚焦“員工姓名”欄位。

<!DOCTYPE html>
<html>
<head>
   <title>The autofocus Attribute</title>
</head>
<body>
   <form onsubmit="return false;">
      Emp. Name: 
      <input type = "text" 
             name = "your_name" 
             autofocus/>
      <br><br>
      Emp. Email: 
      <input type = "email" 
             name = "mail" 
             placeholder = "example@email.com" />
      <br><br>
      <input type = "submit">
   </form>
</body>
</html>

輸入標籤的 list 屬性

在以下示例中，我們使用 `list` 屬性與 `input type=text` 一起使用，並將 `list` 屬性的值指定為 datalist 的 id 名稱。

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

<body>
   <p>
      Click on input field and select 
      from dropdown: 
   </p>
   <input type="text" list="fruits">
   <datalist id='fruits'>
      <option value="Apple"></option>
      <option value="Banana"></option>
      <option value="Orange"></option>
      <option value="Grapes"></option>
      <option value="Pears"></option>
   </datalist>
</body>

</html>

列印頁面