在html中，标记必填表单字段最直接的方式是使用required属性。1. 通过在<input>、<textarea>、<select>等输入元素上添加required布尔属性，浏览器会在提交时自动验证这些字段是否填写；2. 若未填写，浏览器会阻止提交并显示默认提示信息；3. 此方法提升用户体验和数据完整性，避免用户因遗漏必填项而反复提交；4. 然而，required仅提供客户端验证，不能替代服务器端验证；5. 可结合javascript自定义错误提示，如使用setcustomvalidity()方法；6. 同时建议通过css增强视觉反馈，如红色边框或星号标识；7. 为提升无障碍访问，应显式添加aria-required="true"，并配合aria-describedby确保屏幕阅读器可读取错误信息。
在HTML中，标记必填表单字段最直接的方式是使用 required 属性。这个属性告诉浏览器，用户在提交表单之前必须填写该字段。
解决方案
要将表单字段标记为必填，只需在相应的输入元素（如 <input>, <textarea>, <select>) 上添加 required 布尔属性即可。浏览器会根据这个属性自动执行客户端验证，阻止表单在必填字段为空的情况下提交，并通常会显示一个默认的提示信息。
<form action="/submit" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
<br><br>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" required>
<br><br>
<label for="message">您的留言:</label>
<textarea id="message" name="message" rows="5" required></textarea>
<br><br>
<label for="country">国家:</label>
<select id="country" name="country" required>
<option value="">请选择</option>
<option value="china">中国</option>
<option value="usa">美国</option>
</select>
<br><br>
<button type="submit">提交</button>
</form>在这个例子中，用户名、邮箱、留言和国家选择都是必填项。如果用户尝试提交表单而未填写这些字段，浏览器会阻止提交并显示提示。
立即学习“前端免费学习笔记（深入）”；
为什么在表单中标记必填字段至关重要？
标记必填字段，在我看来，是构建用户友好和数据可靠性兼顾的Web应用的基础。它首先关乎用户体验：当用户看到一个表单时，他们需要清晰地知道哪些信息是必须提供的。一个明确标记的必填项，就像是给用户一个明确的指引，避免了他们提交后才发现“哦，原来这个没填”的挫败感。这是一种基本的交互礼仪。
其次，它直接影响数据完整性。在很多业务场景中，某些信息是业务流程得以继续的先决条件。例如，一个注册表单没有邮箱地址，后续的验证、通知就无从谈起。通过前端的 required 属性，我们能有效过滤掉一部分不完整的数据，减轻了后端服务器的验证压力。虽然这只是第一道防线，但它能显著减少无效请求，提升整体效率。我总觉得，与其让服务器去处理一堆残缺不全的数据，不如在源头就做好初步的把关。
对设计或页面进行 WCAG 2.1 AA 无障碍审计。触发关键词：“audit accessibility”、 “check a11y”、 “is this accessible?” 或在审查设计时使用。
required 属性的局限性与增强用户体验的策略
尽管 required 属性非常方便，但它并非万能药，存在一些固有的局限性。最明显的一点是，它属于客户端验证。这意味着，如果用户有心，或者通过某些工具（比如浏览器开发者工具），完全可以绕过这个前端验证。所以，我们绝不能只依赖 required 来保证数据的安全性与完整性；服务器端验证永远是不可或缺的最后一道防线，它才是真正的数据守护者。
此外，required 属性提供的默认提示信息，在不同浏览器中可能样式和措辞不一，有时显得不够友好或不够具体。为了提供更一致、更符合品牌调性的用户体验，我们通常会结合JavaScript来自定义验证逻辑和错误提示。例如，使用 element.setCustomValidity() 方法，可以在用户输入不符合要求时，显示我们自己定义的错误信息，并且在用户修正后通过 setCustomValidity('') 清除。
在视觉上，仅仅依赖浏览器默认的必填提示是不够的。一个好的实践是，通过CSS为必填字段添加明显的视觉标识，比如在标签旁加一个星号（*），或者在字段失去焦点且内容为空时，将其边框变为红色。这样，用户在填写过程中就能实时获得反馈，而不是等到提交时才发现问题。这些细微的改进，往往能显著提升用户填表的顺畅感。
如何提升必填字段的无障碍性和可访问性？
在考虑必填字段时，除了功能实现和视觉呈现，无障碍性（Accessibility）是一个不容忽视的维度。对于依赖屏幕阅读器等辅助技术的用户来说，仅仅通过视觉星号来表示必填是不够的。
这时，aria-required="true" 属性就派上用场了。虽然HTML5的 required 属性在语义上已经包含了必填的含义，并且现代屏幕阅读器通常能识别它，但显式地添加 aria-required="true" 可以提供额外的保证，确保辅助技术能够准确地向用户传达该字段是必填的信息。这是一种防御性编程，确保所有用户都能平等地访问和使用你的表单。
<label for="username_acc">用户名:</label> <input type="text" id="username_acc" name="username_acc" required aria-required="true">
另外，当字段验证失败时，除了视觉上的错误提示，我们还应该确保这些错误信息能够被屏幕阅读器捕获并朗读出来。这通常涉及到 aria-describedby 属性，将错误提示元素的ID与输入字段关联起来，这样当输入字段获得焦点时，屏幕阅读器就能同时朗读出相关的错误提示。
提升无障碍性不仅仅是遵守规范，它更是一种对所有用户的尊重。一个真正优秀的Web产品，应该让每个人都能无障碍地使用。
