引言
理论学习固然重要，但真正的知识内化往往发生在动手实践的过程中。MDN提供的"Test your skills: Forms and buttons"技能测试，包含六道由浅入深的练习题，覆盖了文本输入、单选按钮、复选框、特定输入类型、下拉选择菜单、表单结构语义化以及客户端验证等关键知识点。本文将逐题拆解，给出完整的实现代码，并提炼每个任务背后的核心知识点，帮助你完成从理论到实践的跨越。
1. 基础输入控件与标签关联
第一道任务要求为用户名和密码创建两个 元素，并语义化地关联它们的文本标签，同时添加一个登录提交按钮。起始代码提供了一个简单的列表结构，我们需要在对应的列表项中填入表单控件。
html
<form>
<ul>
<li>
<label for="userid">User ID</label>
<input type="text" id="userid" name="userid" />
</li>
<li>
<label for="password">Password</label>
<input type="password" id="password" name="password" />
</li>
<li>
<button type="submit">Log in</button>
</li>
</ul>
</form>知识点：密码字段的type属性选择
对于密码输入框，必须使用 type="password" 而非 type="text"。当输入类型设置为 password 时，浏览器会自动将用户输入的字符显示为圆点或星号等掩码符号，防止旁人窥屏。这只是客户端的视觉遮挡，并不意味着数据在传输过程中已被加密。真正的安全传输需要依赖HTTPS协议。此外，密码字段的值在页面刷新后会被自动清空，这是浏览器出于安全考虑的设计行为，与普通文本字段的行为截然不同。
2. 单选按钮组与复选框组
第二道任务要求将两组内容分别转化为单选按钮组和复选框组。第一个 需要实现小马角色的单选功能，且第一个选项默认选中。第二个 需要实现热狗配料的复选框功能，并额外添加两个自定义选项。
html
<form>
<fieldset>
<legend>Who is your favorite pony?</legend>
<ul>
<li>
<input type="radio" id="pinkie" name="pony" value="pinkie" checked />
<label for="pinkie">Pinkie Pie</label>
</li>
<li>
<input type="radio" id="rainbow" name="pony" value="rainbow" />
<label for="rainbow">Rainbow Dash</label>
</li>
<li>
<input type="radio" id="twilight" name="pony" value="twilight" />
<label for="twilight">Twilight Sparkle</label>
</li>
</ul>
</fieldset>
<fieldset>
<legend>Hotdog preferences</legend>
<ul>
<li>
<input type="checkbox" id="vegan" name="vegan" />
<label for="vegan">Vegan</label>
</li>
<li>
<input type="checkbox" id="onions" name="onions" />
<label for="onions">Onions</label>
</li>
<li>
<input type="checkbox" id="ketchup" name="ketchup" />
<label for="ketchup">Ketchup</label>
</li>
<li>
<input type="checkbox" id="mustard" name="mustard" />
<label for="mustard">Mustard</label>
</li>
</ul>
</fieldset>
<button>Submit</button>
</form>知识点：checked属性实现默认选中
在单选按钮和复选框中，checked 属性是一个布尔属性，用于指定页面加载时该控件应处于选中状态。对于单选按钮组，通常应将 checked 属性设置在其中一个选项上，以确保组内始终有一个默认的选中值。如果没有设置 checked 且用户也不做选择，该单选按钮组在提交时将不会发送任何数据。对于复选框，checked 可以根据业务需求设置在任意数量的选项上，甚至可以全选作为默认状态。
3. 特定类型的输入字段
第三道任务要求为邮箱、网站、电话号码和颜色选择创建合适的输入控件。每种数据类型都有对应的 type 属性值，浏览器会根据类型自动应用不同的验证规则和交互界面。
html
<form>
<h2>Edit your preferences</h2>
<ul>
<li>
<label for="email">Email</label>
<input type="email" id="email" name="email" />
</li>
<li>
<label for="website">Website</label>
<input type="url" id="website" name="website" />
</li>
<li>
<label for="phone">Phone number</label>
<input type="tel" id="phone" name="phone" />
</li>
<li>
<label for="fave-color">Favorite color</label>
<input type="color" id="fave-color" name="fave-color" />
</li>
<li>
<button>Update preferences</button>
</li>
</ul>
</form>知识点：不同input类型的隐式验证与交互差异
type="email" 会自动验证输入内容是否包含 @ 符号和合法的域名格式。type="url" 要求输入符合URL格式的字符串。type="tel" 在桌面浏览器上不进行格式验证，但在移动设备上会调出数字拨号键盘，优化输入体验。type="color" 则完全不同，它不提供文本输入框，而是渲染一个颜色选择器弹窗，用户通过可视化界面选取颜色，提交的值是十六进制颜色码，例如 #ff0000。理解这些类型之间的行为差异，有助于为不同场景选择最合适的输入控件。
4. 下拉选择菜单与选项分组
第四道任务要求创建一个下拉选择菜单，并将其与文本标签语义关联，同时将选项分为"mains"和"snacks"两个子组。 元素专门用于在下拉菜单中对选项进行逻辑分组。
html
<form>
<ul>
<li>
<label for="food">Pick your favorite food:</label>
<select name="food" id="food">
<option value="">--请选择--</option>
<optgroup label="mains">
<option value="salad">Salad</option>
<option value="curry">Curry</option>
<option value="pizza">Pizza</option>
<option value="fajitas">Fajitas</option>
</optgroup>
<optgroup label="snacks">
<option value="biscuits">Biscuits</option>
<option value="crisps">Crisps</option>
<option value="fruit">Fruit</option>
<option value="breadsticks">Breadsticks</option>
</optgroup>
</select>
</li>
<li>
<button>Submit choice</button>
</li>
</ul>
</form>知识点：optgroup元素实现选项分组
元素允许在下拉菜单中对 进行分组，其 label 属性定义分组的标题文本。这个标题以不可选中的加粗样式显示在下拉列表中，起到视觉分隔和逻辑归类的作用。在选项数量较多时，使用 optgroup 能显著提升下拉菜单的可浏览性。需要注意的是， 本身不能被选中，它只是一个纯粹的容器标签，用户只能选择其内部的实际 子元素。
5. 表单结构的语义化组织
第五道任务要求对给定的表单字段进行结构化重组。需要将前两个字段和后两个字段分别放入两个独立的容器中，为每个容器添加描述性图例，并将每个文本标签用合适的元素标记以关联对应的表单字段。
html
<form>
<fieldset>
<legend>Personal details</legend>
<p>
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
</p>
<p>
<label for="age">Age:</label>
<input type="number" id="age" name="age" />
</p>
</fieldset>
<fieldset>
<legend>Comment information</legend>
<p>
<label for="comment">Comment:</label>
<input type="text" id="comment" name="comment" />
</p>
<p>
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
</p>
</fieldset>
<button type="submit">Submit</button>
</form>知识点：fieldset和legend的表单组织能力
和 的组合为表单提供了强大的结构分组能力。 在视觉上通常渲染为一个带边框的矩形区域，将相关控件包围在一起。 则作为该区域的标题，出现在边框的上方。这种视觉分组和语义分组的双重效果，使得复杂表单的层次结构更加清晰。对于屏幕阅读器用户， 会在进入该 内的第一个控件时被读出，提供上下文信息。此外，将标签与字段放在独立的块级元素（如
或
）中，可以确保每对标签和控件独占一行，避免布局混乱。
6. 客户端表单验证实战
第六道任务要求为支持查询表单添加验证功能。需要将所有输入字段设为必填，调整邮箱和电话号码字段的类型以触发特定验证，并设置用户名长度限制为5到20个字符、电话号码最大长度为15个字符、评论最大长度为200个字符。
html
<form>
<h2>Enter your support query</h2>
<ul>
<li>
<label for="uname">User name:</label>
<input type="text" name="uname" id="uname"
required minlength="5" maxlength="20" />
</li>
<li>
<label for="email">Email address:</label>
<input type="email" name="email" id="email" required />
</li>
<li>
<label for="phone">Phone number:</label>
<input type="tel" name="phone" id="phone"
required maxlength="15" />
</li>
<li>
<label for="comment">Comment:</label>
<textarea name="comment" id="comment"
required maxlength="200"></textarea>
</li>
<li>
<button>Submit comment</button>
</li>
</ul>
</form>知识点：HTML5验证属性的组合使用策略
required 属性是验证的第一道防线，它阻止在必填字段为空时提交表单。minlength 和 maxlength 分别定义输入内容的最小和最大字符数，超过限制时浏览器会阻止提交并显示错误提示。将 type="text" 改为 type="email" 后，浏览器会自动校验输入内容是否符合邮箱格式。对于 元素，maxlength 不仅阻止提交，还会在用户输入时直接限制可键入的字符数量，这与 的行为有所不同。这些HTML5验证属性无需任何JavaScript即可提供立即可用的验证反馈，但它们仅在客户端生效，服务器端仍需进行独立的验证逻辑。
总结
通过这六道技能测试题，我们完成了从基础输入控件到高级验证策略的全方位实践。第一题建立了标签与控件关联的基本模式。第二题区分了单选按钮和复选框在命名策略上的本质差异。第三题展示了不同 type 值对应的隐式验证和交互界面差异。第四题引入了 optgroup 实现选项分组。第五题通过 fieldset 和 legend 实践了表单的语义化组织结构。第六题则将多个验证属性组合使用，构建了完整的客户端验证防线。这些技能是日常前端开发中处理用户输入的基础，熟练掌握后可以自信地应对绝大多数表单构建场景。
想要解锁更多HTML 核心标签实战、前端零基础入门干货、开发避坑全指南吗？
持续关注，后续将更新CSS 布局实战、JavaScript 交互基础、全站导航开发等硬核内容，带你从新手快速进阶，轻松搞定前端开发！