HTML-表单
约 1123 字大约 4 分钟
2025-10-15
表单容器
<form>:创建包含表单元素的容器,用于收集用户输入
<form action="" >
<!-- 表单元素 -->
</form>属性:
action- 表单提交的服务器地址method- 提交方法 (get|post)target- 响应打开位置 (_blank|_self|_parent|_top)enctype- 编码类型 (application/x-www-form-urlencoded|multipart/form-data|text/plain)autocomplete- 自动完成 (on|off)novalidate- 不验证表单name- 表单名称accept-charset- 字符编码
表单控件
input 表单
包含输入框、单选框、复选框等
输入标签<input>是最常见的表单元素之一,他可以创建文本输入框、密码框、单选框、复选框等。
<input type="">type 定义了输入框的类型:
| type属性值 | 说明 |
|---|---|
text | 单行文本框 |
password | 密码框 |
radio | 单选框 |
checkbox | 复选框 |
file | 文件域 |
文本框和密码框:
<form> <ul> <li> 账号:<input type="text" placeholder="请输入账号" name="username"> </li> <li> 密码:<input type="password" placeholder="请输入密码" name="pwd"> </li> </ul> <button>登录</button> </form>常用属性说明:
属性名 说明 placeholder提示信息 name元素名称 maxlength允许的最大字符数 accesskey使元素获得焦点的快捷键 autocomplete用于控制表单的自动填充行为,帮助浏览器决定是否根据用户历史输入自动填充字段值。取值 on/off单选框和复选框
<form> <ul> <li> 单选按钮: <input type="radio" name="gender" vaule="0">女 <input type="radio" name="gender" value="1">男 </li> <li> 多选: <input type="checkbox" name="hobby" value="0">足球 <input type="checkbox" name="hobby" value="1">篮球 <input type="checkbox" name="hobby" value="2">乒乓球 </li> </ul> </form>常用属性说明:
属性名 说明 name 表单名,也起到分组作用,标记同一组元素用于单选或多选操作 value 表单值,选择选项后传到后台的值 checked 是否默认选中 文件域
<form> <ul> <li> 上传文件: <input type="file" name="file" accept=".txt,.jpg,.mp4"> </li> </ul> </form>常用属性说明:
属性名 属性值 multiple 允许选择多个文件 accept 规定选择的文件类型,多个类型中间用逗号分隔
textarea 表单
<textarea> 是一个多行纯文本编辑控件,也叫文本域适用于允许用户输入大量自由格式文本的场景,例如评论或反馈表单。

<form>
评论:
<textarea name="comment" cols="30" rows="10"></textarea>
</form>常见属性:
| 属性 | 说明 |
|---|---|
| name | 表单名 |
| placeholder | 提示信息 |
| rows | 可见行数, 正整数,默认=2 |
| cols | 可见列数,正整数,默认=20 |
select 下拉表单
<select>表示一个提供下拉菜单的控件
<form action="">
<ul>
<li>
选择城市:
<select name="" id="">
<option value="Beijing">北京</option>
<option value="Shanghai">上海</option>
<option value="Shenzhen">深圳</option>
<option value="Guangzhou">广州</option>
</select>
</li>
</ul>
</form>要想默认选中一个选项,就在对应 <option> 中添加 selected 属性
button 按钮
<form>
<ul>
<li>
<button>搜索</button>
<button disabled>不可点击按钮</button>
</li>
</ul>
</form>表单中的<button>按钮具有表单提交的功能,它会将每个元素的name和value组合起来传到后台,示例:

辅助标签
<label>:关联输入控件的文本标签,提升可访问性(点击标签可聚焦输入框),提升用户体验。
使用场景:当单选框比较小时,可以设置点击单选框文字勾选单选框,提升用户体验
两种使用方式:
方式一:
利用
for和id相关联<label for="male">男</label> <input type="radio" id="male" name="sex" value="1">方式二:
直接包含
<label> <input type="radio" name="sex" value="1">男 </label>
其他表单组件
日期和时间选择器
<input type="date">
<label for="birthday">生日:</label>
<input type="date" id="birthday" name="birthday" min="1900-01-01">
<label for="meeting">会议时间:</label>
<input type="datetime-local" id="meeting" name="meeting">常用属性说明
type="date"- 日期选择器type="time"- 时间选择器type="datetime-local"- 本地日期时间选择器min- 最小日期/时间max- 最大日期/时间step- 时间步长
范围滑块
<input type="range">:允许用户通过拖动滑块选择数值范围。
<label for="volume">音量:</label>
<input type="range" id="volume" name="volume" min="0" max="100" value="50" step="10">常用属性说明
type="range"- 输入类型为范围滑块min- 最小值max- 最大值step- 步长value- 默认值
进度条
<progress>:显示任务完成进度。
<label for="file">文件上传进度:</label>
<progress id="file" value="70" max="100">70%</progress>常用属性说明
value- 当前进度值max- 最大值
