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="[email protected]" 
               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 = "[email protected]" />
      <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>
广告