学HTML表单先掌握哪些常用控件
发布日期：2025-07-15 13:08:06
文本框（Text Box）
文本框是最常见的表单控件之一，用于让用户输入单行文本信息。在HTML中，使用``标签创建文本框，通过设置`type`属性为`"text"`来指定。例如：``。这里的`name`属性用于标识表单数据，在提交表单时会将用户输入的值以`name=value`的形式发送到服务器。
文本框还可以设置`placeholder`属性，用于在文本框内显示提示信息，当用户开始输入时，提示信息会自动消失。如：``。
密码框（Password Box）
密码框与文本框类似，但它会将用户输入的内容以掩码形式显示，确保密码的安全性。同样使用``标签，将`type`属性设置为`"password"`即可。示例：``。
当用户输入密码时，看到的是一串星号或圆点，这样可以防止他人在旁边看到密码内容。
单选框（Radio Button）
单选框用于让用户从多个选项中选择一个。使用``标签，`type`属性设置为`"radio"`。每个单选框需要设置相同的`name`属性，这样它们就属于同一组，用户只能选择其中一个。例如：
男
女
这里的`value`属性表示该选项被选中时提交给服务器的值。
复选框（Checkbox）
复选框允许用户从多个选项中选择多个或不选。同样使用``标签，`type`属性设置为`"checkbox"`。每个复选框有独立的`name`和`value`属性。示例：
阅读
游泳
跑步
用户可以根据自己的喜好选择一个或多个选项。
下拉列表（Select Box）
下拉列表提供了一种紧凑的方式让用户从多个选项中选择一个。使用`
用户点击下拉箭头可以展开选项列表，选择其中一个选项。
文本域（Textarea）
文本域用于让用户输入多行文本，如评论、留言等。使用`
`rows`和`cols`属性分别指定文本域的行数和列数，用户可以在这个区域内输入多行文本。
提交按钮（Submit Button）
提交按钮用于将表单数据发送到服务器。使用``标签，`type`属性设置为`"submit"`。例如：``。
当用户点击提交按钮时，表单中的所有数据会被收集并发送到服务器指定的地址。
重置按钮（Reset Button）
重置按钮用于将表单中的所有控件恢复到初始状态。使用``标签，`type`属性设置为`"reset"`。示例：``。
用户点击重置按钮后，文本框中的内容会被清空，单选框和复选框会恢复到未选中状态等。
相关问答
1. 单选框和复选框有什么区别？
单选框用于让用户从多个选项中选择一个，同一组单选框的`name`属性相同，用户只能选择其中一个选项。而复选框允许用户从多个选项中选择多个或不选，每个复选框有独立的`name`和`value`属性，用户可以根据需要选择多个选项。
2. 文本框和文本域有什么不同？
文本框用于让用户输入单行文本，使用``标签，`type`属性为`"text"`。文本域用于让用户输入多行文本，使用`