表单设计与用户输入
🎯 引言
在网页开发中，表单是用户与网站之间互动的桥梁。你在网上购物时输入地址、登录账号时输入密码、搜索时输入关键字，其实都是在使用表单。
掌握 HTML 表单的使用，可以让你实现以下功能：
- 接收用户输入的数据；
- 将数据提交给服务器进行处理；
- 构建搜索框、登录框、注册页等功能界面；
- 开发具备用户交互能力的网页应用。
这篇文章会手把手教你如何使用表单标签来实现这些功能，无论你是想搭建一个简单的留言板，还是做一个完整的注册页面，都是必须掌握的基础技能！
🧾 什么是表单？
表单（Form）是 HTML 中用于接收用户输入的一种结构。
表单由 <form> 标签定义，它的作用就是包裹住所有的用户输入控件（如输入框、按钮等），并最终将用户填写的数据提交给指定的处理地址。
基本结构如下：
<form action="提交地址" method="提交方式">
<!-- 各种输入控件 -->
</form>
action：指定数据提交到哪个服务器地址。method：数据提交方式，常见的是get和post。
🖊 输入框（input）
输入框是最常见的表单控件，用于接收用户的单行文字输入，比如用户名、邮箱等。
<form>用户名：<input type="text" name="username" /></form>
常见的输入类型如下表所示：
| 类型 | 描述 | 示例 |
|---|---|---|
| text | 文本输入 | 用户名、昵称等 |
| password | 密码输入 | 隐藏输入内容，用于登录等 |
| 邮箱验证输入 | 自动检查输入格式是否为邮箱 | |
| number | 数字输入 | 只能输入数字 |
| date | 日期选择 | 弹出日期选择器 |
| checkbox | 复选框 | 多选功能 |
| radio | 单选框 | 一组选项中选择一个 |
📑 下拉菜单（select）
如果你希望用户从一组选项中选择一个，就可以使用下拉菜单 <select> 标签。每个选项通过 <option> 标签定义。
<form>
性别：
<select name="gender">
<option value="male">男</option>
<option value="female">女</option>
<option value="other">其他</option>
</select>
</form>
value是提交时的真实数据；- 用户看到的是
<option>之间的文字内容。
📝 多行文本框（textarea）
如果你希望用户能输入较长的内容（比如留言、简介等），可以使用 <textarea> 标签。
<form>
留言：
<textarea name="message" rows="4" cols="30"></textarea>
</form>
rows：控制显示多少行；cols：控制宽度；<textarea>是成对标签，不要写成自闭合。
🧷 提交按钮（submit）
用户填写完表单内容后，需要一个按钮将数据提交，这就需要使用提交按钮 <input type="submit"> 或 <button>。
<form action="/submit" method="post">
姓名：<input type="text" name="name" />
<input type="submit" value="提交" />
</form>
或者使用更灵活的写法：
<form>
<button type="submit">点击提交</button>
</form>
两种写法都可以实现提交功能。
🧾 小节总结
- 表单是网页与用户交互的入口，用于接收用户输入并提交数据。
- 输入控件包括：文本框、密码框、邮箱框、数字框等。
- 多选用
checkbox，单选用radio，下拉选择用select。 - 多行文本用
textarea，提交使用submit按钮。
❓ 知识问答（Q&A）
Q：<input> 标签是不是都要配合 <form> 使用？
A：不是必须，但如果你要收集数据并提交给后台，必须放在 <form> 中。
Q：怎么让表单提交数据不刷新页面？
A：可以使用 JavaScript 拦截 submit 事件，然后用 XMLHttpRequest 或 fetch 实现异步提交。
Q：下拉框能设置默认选中项吗？
A：可以，只要在对应的 <option> 上加上 selected 属性即可。
🧪 小练习
练习 1：创建一个注册表单
创建一个包含用户名、邮箱、密码的注册表单，使用表单标签实现。
<form action="/register" method="post">
用户名：<input type="text" name="username" /><br />
邮箱：<input type="email" name="email" /><br />
密码：<input type="password" name="password" /><br />
<input type="submit" value="注册" />
</form>
请拷贝到编辑器中去尝试预览体验吧！
练习 2：留言板小功能
用 <textarea> 做一个留言输入框，再加上一个提交按钮。
<form action="/message" method="post">
留言：<br />
<textarea name="message" rows="5" cols="40"></textarea><br />
<button type="submit">发送留言</button>
</form>
请拷贝到编辑器中去尝试预览体验吧！
🎉 恭喜你已经掌握了表单标签的使用、常见的输入控件、提交方式等技能啦！接下来可以尝试用表单做一个完整的用户注册页面或者评论系统了！