HTML表单的输入控件是网页收集用户信息的核心载体，不同类型的输入控件对应不同的数据输入场景，合理选择和使用这些控件能让表单交互更顺畅。常见的输入控件由<input>标签衍生而来，通过type属性区分具体类型，同时配合name、value、placeholder等属性实现功能定制。
基础文本输入控件
文本输入是最常用的表单输入场景，主要通过type为text的<input>标签实现，适合收集用户名、地址等短文本内容。
<form action="/submit" method="post"> <!-- 普通文本输入框 --> <label for="username">用户名：</label> <input type="text" id="username" name="username" placeholder="请输入用户名" maxlength="20"> <!-- 密码输入框，输入内容会被掩码 --> <label for="password">密码：</label> <input type="password" id="password" name="password" placeholder="请输入密码" required> </form>
这里的placeholder属性用于显示输入提示文本，maxlength限制输入最大长度，required属性表示该项为必填项，提交表单时会自动校验。
选择类输入控件
当需要用户从预设选项中选择内容时，可以使用单选、多选或下拉选择控件，避免用户输入错误内容。
单选按钮
单选按钮通过type为radio的<input>标签实现，同一组单选按钮需要设置相同的name属性，才能保证互斥选择。
<form action="/submit" method="post"> <p>性别：</p> <input type="radio" id="male" name="gender" value="male" checked> <label for="male">男</label> <input type="radio" id="female" name="gender" value="female"> <label for="female">女</label> </form>
checked属性用于设置默认选中项，value属性是提交表单时传递给后端的值。
多选框
多选框通过type为checkbox的<input>标签实现，用户可以选择多个选项，同一组多选框也建议设置相同的name属性。
<form action="/submit" method="post"> <p>兴趣爱好：</p> <input type="checkbox" id="reading" name="hobby" value="reading"> <label for="reading">阅读</label> <input type="checkbox" id="sports" name="hobby" value="sports"> <label for="sports">运动</label> <input type="checkbox" id="music" name="hobby" value="music"> <label for="music">音乐</label> </form>
下拉选择框
下拉选择框使用<select>标签配合<option>标签实现，适合选项较多的场景，节省页面空间。
<form action="/submit" method="post">
<label for="city">所在城市：</label>
<select id="city" name="city">
<option value="">请选择</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
</select>
</form>
特殊类型输入控件
HTML5新增了很多特殊类型的输入控件，能自动适配对应内容的输入和校验，减少开发工作量。
| type值 | 功能说明 | 适用场景 |
|---|---|---|
| 自动校验输入内容是否符合邮箱格式 | 收集用户邮箱 | |
| number | 只能输入数字，可设置最大最小值 | 收集年龄、数量等数值 |
| date | 弹出日期选择面板，自动格式化日期 | 收集出生日期、预约日期等 |
| file | 打开文件选择窗口，支持上传文件 | 收集用户上传的文件 |
以下是number类型输入控件的示例：
<form action="/submit" method="post"> <label for="age">年龄：</label> <input type="number" id="age" name="age" min="1" max="120" step="1" value="18"> </form>
min和max设置数值范围，step设置数值增减的步长。
输入控件常用技巧
- 使用<label>标签关联输入控件，点击标签文本也能聚焦到对应的输入框，提升交互体验
- 合理设置
autocomplete属性，值为on时浏览器会自动填充之前输入过的内容，值为off时关闭自动填充 - 对于大段文本输入，使用<textarea>标签代替type为text的<input>，可设置行数和列数控制显示大小
- 提交表单前可以通过JavaScript校验输入内容，避免不符合要求的数据提交到后端
以下是<textarea>的使用示例：
<form action="/submit" method="post"> <label for="intro">个人简介：</label> <textarea id="intro" name="intro" rows="5" cols="30" placeholder="请输入个人简介"></textarea> </form>
注意：所有输入控件都需要放在<form>标签内部，并且设置正确的name属性，否则表单提交时无法收集到对应的输入内容。
HTML_forminput表单输入控件form_input修改时间：2026-07-20 14:42:37