键盘顺序
通常按 Tab 可依次移动到下一个控件。当前准备接收键盘操作的控件称为“获得焦点”，应有清楚的边框或轮廓提示。
使用HTML创建表单
好看的报名表，也要能顺利操作
同一张表单，在键盘、触屏和窄屏上都应保持清楚。
手机阅读
标签持续可见，点击区域够大；输入框不超出屏幕。不同设备控件外观不必完全一致。
错误表达
不要只靠颜色；同时给出文字规则与修正方式。不要为了“干净”删除焦点轮廓。
思考
报名表中，如何在输入框外显示“通知邮箱（必填）”和“例如 mei@example.com”？对于首次报名者和熟悉流程的用户，保留或省略示例提示，分别在什么情况下更合适？请结合阅读负担、填写效率和信息安全说明理由。
展开参考分析
先看用户与任务：字段名称让用户知道填什么；对首次报名、不了解填写要求的用户，框外示例可以减少猜测，输入后也能回看。若用途清楚、格式熟悉，省略重复示例可能更简洁；但熟悉流程并不意味着一定不需要提示，还要看要求是否特殊。
安全性：提示可以减少误填，也可提醒不要填写无关敏感信息，但它不能验证数据，更不能防止恶意输入。安全不能靠提示文字或浏览器校验来保证，服务器仍需检查收到的数据并保护个人信息。
再看是否合适：比较两种设计时，要看提示能否帮助理解、减少误填，以及是否占用过多屏幕空间、增加阅读负担。“省略额外示例”不等于“省略字段名称”：无论采用哪种设计，都应让用户（包括使用辅助技术的用户）识别控件用途，并能顺利操作与纠错。
一种实现方式：用 label 显示字段名称，通过 for 与输入框的 id 关联；需要补充示例时，再用 p 显示，并用 aria-describedby 关联说明。下面是可选的完整示例，不是每个输入框都必须照搬的模板。
<label for="email">通知邮箱（必填）</label>
<input id="email" name="email" type="email"
required aria-describedby="email-help">
<p id="email-help">例如 mei@example.com</p>p 负责显示说明文字；aria-describedby 建立说明与控件的关联，本身不负责显示文字或改变排版。