下面是一份结构清晰、适合发布或整理成技术笔记的内容示例。📒
【H5 前端开发笔记】第 10 期：HTML常用标签 (6) —— 表单技术详解
在 Web 开发中，表单（Form） 用于收集用户输入的数据，例如：
- 登录
- 注册
- 搜索
- 提交订单
- 用户反馈
HTML 提供了一整套 表单标签和输入控件 来实现数据交互。
一、表单的基本结构
HTML 表单使用 <form> 标签创建。
基本语法：
<form action="提交地址" method="提交方式">
表单控件
</form>
示例：
<form action="/login" method="post">
用户名：<input type="text" name="username">
<br><br>
密码：<input type="password" name="password">
<br><br>
<input type="submit" value="登录">
</form>
说明：
| 属性 | 作用 |
|---|---|
| action | 表单提交地址 |
| method | 提交方式 |
| name | 表单字段名称 |
二、表单提交方式
常见提交方式有两种：
1 GET
<form method="get">
特点：
- 数据显示在 URL 中
- 数据格式：
/login?username=tom&password=123
优点：
- 简单
- 可收藏 URL
缺点：
- 不安全
- 数据长度有限制
适用：
- 搜索
- 查询
2 POST
<form method="post">
特点：
- 数据在 请求体中
- URL 不显示数据
优点：
- 更安全
- 数据量更大
适用：
- 登录
- 注册
- 提交数据
三、input 输入控件
<input> 是最常见的表单控件。
基本语法：
<input type="类型">
四、常用 input 类型
1 文本框
<input type="text">
示例：
用户名：<input type="text" name="username">
常用属性：
| 属性 | 说明 |
|---|---|
| placeholder | 提示文字 |
| maxlength | 最大长度 |
| value | 默认值 |
示例：
<input type="text" placeholder="请输入用户名">
五、密码框
<input type="password">
示例：
密码：<input type="password" name="pwd">
特点：
- 输入内容 隐藏显示
六、单选按钮（radio）
<input type="radio">
示例：
性别：
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
关键点：
多个单选按钮 name 必须相同 才能互斥。
默认选中：
<input type="radio" checked>
七、复选框（checkbox）
<input type="checkbox">
示例：
兴趣：
<input type="checkbox" name="hobby"> 音乐
<input type="checkbox" name="hobby"> 运动
<input type="checkbox" name="hobby"> 阅读
默认选中：
<input type="checkbox" checked>
八、提交按钮
<input type="submit">
示例：
<input type="submit" value="提交">
点击后：
- 表单数据提交到
action
九、重置按钮
<input type="reset">
示例：
<input type="reset" value="重置">
作用：
- 恢复默认值
十、普通按钮
<input type="button">
示例：
<input type="button" value="点击">
特点：
- 默认 不会提交表单
- 一般配合 JavaScript
十一、下拉菜单
使用 <select> 标签。
示例：
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
</select>
默认选中：
<option selected>
十二、多行文本框
使用 <textarea>。
示例：
<textarea rows="5" cols="30">
请输入内容
</textarea>
说明：
| 属性 | 作用 |
|---|---|
| rows | 行数 |
| cols | 列数 |
常用于：
- 评论
- 留言
- 反馈
十三、label 标签
<label> 用于 增强表单可用性。
示例：
<label for="username">用户名</label>
<input id="username" type="text">
效果：
- 点击文字也能选中输入框。
十四、完整表单示例
<form action="/register" method="post">
用户名：
<input type="text" name="username">
<br><br>
密码：
<input type="password" name="password">
<br><br>
性别：
<input type="radio" name="gender"> 男
<input type="radio" name="gender"> 女
<br><br>
兴趣：
<input type="checkbox"> 音乐
<input type="checkbox"> 运动
<input type="checkbox"> 阅读
<br><br>
城市：
<select>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>
<br><br>
个人简介：
<textarea rows="4" cols="30"></textarea>
<br><br>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
十五、本期总结
核心标签：
| 标签 | 作用 |
|---|---|
<form> | 表单 |
<input> | 输入控件 |
<select> | 下拉菜单 |
<option> | 下拉选项 |
<textarea> | 多行文本 |
<label> | 标签绑定 |
常见 input 类型：
- text
- password
- radio
- checkbox
- submit
- reset
- button
如果你需要，我还可以帮你整理下一期：
第 11 期：HTML5 新增表单控件（email / url / number / date 等）
这部分是 面试非常爱问的内容，而且也是 HTML5 表单的核心升级。🚀
