HTML 输入标签

HTML 输入标签用于在表单中创建输入字段，用户可以在这些字段中输入文本、数字或选择选项等等。这些标签使得开发者可以创建交互性更好的页面，让用户可以更加方便地输入数据。

常见的输入标签

input 标签

<input> 标签是创建不同类型的输入字段的最常用标记，其 type 属性用于指定输入字段类型。以下是一些常用的 type 属性值：

• text：创建单行文本输入框。
• password：创建密码输入框，文本内容将被隐藏。
• number：创建数字输入框。
• email：创建电子邮件地址输入框。
• checkbox：创建复选框。
• radio：创建单选按钮。

示例代码：

<!-- 创建文本输入框 -->
<input type="text" name="username" placeholder="输入用户名">

<!-- 创建密码输入框 -->
<input type="password" name="password" placeholder="输入密码">

<!-- 创建数字输入框 -->
<input type="number" name="age" min="1" max="99" value="18">

<!-- 创建电子邮件地址输入框 -->
<input type="email" name="email" placeholder="输入电子邮件地址">

<!-- 创建复选框 -->
<input type="checkbox" name="fruit" value="apple">苹果
<input type="checkbox" name="fruit" value="orange">橙子
<input type="checkbox" name="fruit" value="banana">香蕉

<!-- 创建单选按钮 -->
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女

select 标签

<select> 标签用于创建下拉列表框，用户可以在其中选择一个选项。其子标记 <option> 则用于定义选项。

示例代码：

<!-- 创建下拉列表框 -->
<select name="city">
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
  <option value="guangzhou">广州</option>
  <option value="shenzhen">深圳</option>
</select>

textarea 标签

<textarea> 标签用于创建多行文本输入框。

示例代码：

<!-- 创建多行文本框 -->
<textarea name="message" rows="5" cols="30">请输入留言...</textarea>

总结

HTML 输入标签对于用户输入信息和数据有着重要作用，更好的控制和使用这些标签能够为用户提供更便捷的交互性体验。以上是三种最常见的 HTML 输入标签，更多关于表单的内容可以参考 MDN 文档。