HTML | 类型属性

在 HTML 中，可以使用 type 属性来指定表单元素的数据类型（data type）。不同类型的表单元素对应着不同的数据类型，这决定了表单元素输入数据的格式和校验规则。

不同类型的表单元素

以下是常见的表单元素类型及其用途：

• text：用于输入纯文本。
• password：用于输入密码，输入的内容会被掩码。
• email：用于输入电子邮件地址，会验证邮箱地址的格式是否正确。
• textarea：用于输入多行纯文本。
• number：用于输入数字，可以指定最小值和最大值。
• range：用于输入数值范围，通常用于调节音量等控件。
• date：用于输入日期，可以指定最小值和最大值。
• time：用于输入时间。
• datetime：用于输入日期和时间。
• checkbox：用于选择多个选项中的一个或多个。
• radio：用于从多个选项中选择一个。
• select：用于选择一个选项，可以指定选项列表。
• submit：用于提交表单。
• reset：用于重置表单。

使用示例

以下示例展示了如何使用 type 属性指定表单元素类型：

<form>
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username"><br>

  <label for="password">密码：</label>
  <input type="password" id="password" name="password"><br>

  <label for="email">电子邮箱：</label>
  <input type="email" id="email" name="email"><br>

  <label for="intro">个人介绍：</label>
  <textarea id="intro" name="intro"></textarea><br>

  <label for="age">年龄：</label>
  <input type="number" id="age" name="age" min="0" max="120"><br>

  <label for="volume">音量：</label>
  <input type="range" id="volume" name="volume" min="0" max="100"><br>

  <label for="birthdate">出生日期：</label>
  <input type="date" id="birthdate" name="birthdate" min="1900-01-01" max="2050-12-31"><br>

  <label for="starttime">开始时间：</label>
  <input type="time" id="starttime" name="starttime" value="12:00"><br>

  <label for="meetingtime">会议时间：</label>
  <input type="datetime-local" id="meetingtime" name="meetingtime"><br>

  <label for="gender">性别：</label>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">男</label>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">女</label><br>

  <label for="level">难度：</label>
  <select id="level" name="level">
    <option value="easy">容易</option>
    <option value="medium">中等</option>
    <option value="difficult">困难</option>
  </select><br>

  <input type="submit" value="提交">
  <input type="reset" value="重置">
</form>

结语

type 属性是表单元素的一个重要属性，它决定了表单元素输入数据的格式和校验规则。在实际开发中，我们需要根据具体需求选择适当的表单元素类型，并正确设置相关属性。