表单需用<form>包裹，通过input、select、textarea等元素收集数据，正确设置name、placeholder及验证属性可提升交互性与功能性。
在网页开发中，表单是用户与网站交互的重要方式。通过HTML中的 input、select 和 textarea 等元素，可以创建各种输入控件，用于收集用户数据，如文本、选项、文件等。下面介绍如何正确使用这些常见的表单元素。
基本表单结构
所有表单都应包裹在 <form> 标签内，设置提交地址和方法：
<form action="/submit" method="post"></form>
使用 input 创建多种输入类型
input 是最常用的表单元素，通过 type 属性定义输入类型：
- 文本输入：<input type="text" name="username" placeholder="请输入用户名">
- 密码输入：<input type="password" name="pwd">
- 邮箱验证：<input type="email" name="email" required>
- 数字输入：<input type="number" name="age" min="1" max="120">
- 单选按钮：<input type="radio" name="gender" value="male"> 男
- 复选框：<input type="checkbox" name="hobby" value="reading"> 阅读
- 文件上传：<input type="file" name="avatar" accept="image/*">
- 隐藏字段：<input type="hidden" name="token" value="abc123">
每个 input 应设置 name 属性，以便服务器识别数据字段。使用 placeholder 提供提示文字，required 强制填写。
立即学习“前端免费学习笔记（深入）”；
使用 select 创建下拉选择框
当用户提供多个选项但只能选其一时，使用 select 和 option：
<label>选择城市：</label>
<select name="city">
<option value="">-- 请选择 --</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
</select>
添加 multiple 属性可允许多选：<select name="skills" multiple>，用户按住 Ctrl 或 Cmd 可选择多项。
使用 textarea 输入多行文本
对于长文本输入（如留言、描述），使用 textarea：
<label>留言内容：</label><textarea name="message" rows="5" cols="40" placeholder="请输入您的意见..."></textarea>
注意：textarea 的值位于标签之间，但通常留空由用户输入。使用 rows 和 cols 控制显示大小，实际样式建议用CSS控制。
基本上就这些常用表单控件的使用方法。合理搭配 label、name、placeholder 和验证属性，可以让表单更易用且功能完整。不复杂但容易忽略细节。
