第3章 HTML表单核心元素

第3章：HTML表单核心元素详解

表单，说白了就是网页和用户对话的窗口。你填信息，它收数据，就这么简单。

我刚开始做自动化测试那会儿，以为表单就是几个输入框。后来踩了不少坑，才发现里面的门道比想象中多得多。今天咱们就把这些核心元素掰开揉碎了讲清楚。

3.1 <form>标签：表单的容器

所有表单元素都得放在<form>里面。它就像个快递盒子，把你要提交的数据打包好发出去。

<form action="/submit" method="POST">
    <!-- 表单内容放这里 -->
</form>

这里有两个关键属性：

action：数据发往的地址。说白了就是服务器上哪个接口来接数据。
method：发送方式。GET或POST，我99%的情况用POST。

注意：千万别忘了写method。我见过有人不写，结果数据全挂在URL上，敏感信息直接暴露，那叫一个尴尬。

3.2 <input>类型详解

这是表单里最常用的元素。一个<input>能变出十几种花样，全靠type属性控制。

3.2.1 text：文本输入

<input type="text" name="username" placeholder="请输入用户名">

最基础的文本输入框。我个人习惯给每个输入框都加上placeholder，用户一看就知道该填什么。

3.2.2 password：密码输入

<input type="password" name="password">

输入的内容会被圆点或星号替代。嗯，这里要注意：它只是隐藏显示，数据在网络传输中还是明文的。真要安全，得配合HTTPS。

3.2.3 checkbox：复选框

<input type="checkbox" name="hobby" value="reading"> 阅读
<input type="checkbox" name="hobby" value="coding"> 编程

可以多选。我在做数据采集时，经常需要勾选多个选项。记住一点：同组的复选框，name属性要一样，value不同。

3.2.4 radio：单选框

<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女

只能选一个。我曾经在项目中遇到过一个问题：单选框没设默认值，结果用户没选就提交了，后端收到空值直接报错。所以，最好给一个默认选中。

3.2.5 select：下拉选择

<select name="city">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="shenzhen">深圳</option>
</select>

下拉菜单适合选项较多的情况。你想想看，要是用单选框列20个城市，页面得多难看。

3.3 <label>与<button>

3.3.1 <label>：标签元素

很多人觉得<label>可有可无。其实它很重要，尤其是对自动化测试来说。

<label for="email">邮箱地址：</label>
<input type="email" id="email" name="email">

用for属性关联id，点击标签就能聚焦到输入框。为什么说它对自动化测试重要？因为很多测试框架（比如Selenium）可以通过label的文本定位元素，比用XPath稳定多了。

小技巧：也可以把<input>直接放在<label>里面，这样连for属性都不用写。

3.3.2 <button>：按钮

<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button" onclick="alert('点击了')">普通按钮</button>

三种类型：

submit：触发表单提交。默认行为。
reset：清空所有输入。说实话，这个我很少用，用户填了半天一下清空了，体验不好。
button：普通按钮，配合JavaScript使用。

避坑指南：我曾经在项目中遇到一个bug，按钮没写type，结果点击后页面莫名其妙刷新了。后来才发现，<button>的默认type就是submit。所以，普通按钮一定要显式写上type="button"。

3.4 表单提交机制

表单提交，说白了就是浏览器把用户填的数据打包发给服务器。这个过程分两步：

收集数据：浏览器遍历表单内所有带name属性的元素，把name=value配对。
发送请求：根据method和action，把数据发出去。

举个例子：

<form action="/login" method="POST">
    <input type="text" name="username" value="admin">
    <input type="password" name="password" value="123456">
    <button type="submit">登录</button>
</form>

点击提交后，浏览器会发送一个POST请求到/login，请求体里包含username=admin&password=123456。

    自动化测试的关键点：模拟表单提交时，你不需要真的去点击按钮。直接用代码构造同样的请求体发过去就行。这就是接口测试和UI测试的区别。

嗯，到这里表单的核心元素就讲完了。下一章咱们聊聊怎么用代码自动填写这些表单，以及如何从页面中提取数据。到时候你会发现，理解了这些基础，自动化操作其实没那么难。

📚 课程目录