表单是网页交互基础，通过form标签创建，包含输入框、按钮等控件，用于登录、注册等场景。1. 基本结构使用<form>定义，action指定提交地址，method设置请求方式为get或post。2. GET将数据附加在URL后，适合搜索；POST数据隐式发送，更安全，适合登录和文件上传。3. 常见控件有文本框、密码框、单选框、复选框、下拉列表、多行文本和提交按钮，均需设置name属性以便服务器识别。4. HTML5支持内置验证，如required必填、type=email校验格式、min/max限制数值范围、placeholder提供提示，提升用户体验。结合CSS与JavaScript可进一步美化与增强功能。
表单是网页中与用户交互的重要工具，常用于登录、注册、搜索等场景。HTML中的 form 标签就是用来创建表单的基础元素。掌握它的基本用法，是前端开发的入门必修课。
1. 创建一个基本的HTML表单
使用 <form> 标签可以定义一个表单区域，所有表单控件（如输入框、按钮等）都应放在这个标签内部。
最简单的表单结构如下：
<form action="/submit" method="post"><label for="username">用户名：</label>
<input type="text" id="username" name="username"><br><br>
<input type="submit" value="提交">
</form>
说明：
立即学习“前端免费学习笔记（深入）”；
- action 属性指定表单数据提交的目标URL
- method 属性定义提交方式，常用值为 get 或 post
- input 是输入控件，type="submit" 表示这是一个提交按钮
- label 标签提升可访问性，点击文字也能聚焦对应输入框
2. 设置表单提交方式：GET 与 POST
method 属性决定数据如何发送到服务器。
GET 方法：
- 数据会附加在URL后面，形如 ?name=value
- 适合获取数据，比如搜索请求
- 有长度限制，不适用于大量数据或敏感信息
POST 方法：
- 数据包含在请求体中，不会显示在URL里
- 更安全，适合提交登录信息、文件上传等
- 没有数据大小限制
例如登录表单推荐使用 POST：
<form action="/login" method="post"><input type="text" name="email" placeholder="邮箱"><br>
<input type="password" name="password" placeholder="密码"><br>
<input type="submit" value="登录">
</form>
3. 常见表单控件介绍
form 内部可以包含多种输入类型，以下是常用的几种：
-
文本输入：
<input type="text" name="title"> -
密码框：
<input type="password" name="pwd"> -
单选框：
<input type="radio" name="gender" value="male"> 男 -
复选框：
<input type="checkbox" name="hobby" value="reading"> 阅读 -
下拉选择：
<select name="city"><option value="beijing">北京</option></select> -
多行文本：
<textarea name="message"></textarea> -
提交按钮：
<input type="submit" value="提交">
每个控件都应设置 name 属性，这是服务器识别数据的关键。
4. 表单验证与用户体验优化
HTML5 提供了一些内置验证功能，无需JavaScript即可实现基础校验。
- 添加 required 属性表示必填：
<input type="text" name="name" required> - 限制邮箱格式：
<input type="email" name="email"> - 限制数字范围：
<input type="number" min="1" max="100"> - 设置占位提示：
placeholder="请输入姓名"
浏览器会在提交时自动检查这些规则，并提示用户修正错误。
基本上就这些。掌握 form 标签的基本结构、提交方式和常用控件，就能完成大多数简单交互需求。后续可结合 CSS 美化样式，用 JavaScript 增强逻辑控制。不复杂但容易忽略细节，建议动手写几个例子加深理解。
