前言： 大家好，我是[小奇腾]。欢迎来到 “幼儿园前端” 第 10 集！ 上一集我们做出了登录框的“样子”，但它是个“傻白甜”——你不填密码它让你过，你填个乱七八糟的邮箱它也让你过。 今天我们要给表单加点**“智商”**。 不需要写复杂的 JS 代码，只需要在 HTML 标签里加几个单词，浏览器就能自动帮你拦截不听话的用户！
本期详细的视频教程bilibili：幼儿园前端 #10：表单进阶(下) —— 必填？邮箱？勾选？一行代码立规矩！
一、 最强保安：required (必填)
这是表单里最实用的属性，没有之一。 它的作用是： “你不填满，就不准提交！”
写法：只需要在 <input> 标签里添加 required 这个单词
<input type="text" name="username" required>
效果：如果你留空并点击提交按钮，浏览器会弹出一个提示框（气泡）：“请填写此字段”。如果系统语言设置是英文就显示英文。
注意：这个验证是当用户点击提交的时候才会触发
二、 格式专家：type="email"
之前我们都用 type="text"，用户可以在里面填“哈哈哈哈”。 但如果你要用户填邮箱，怎么办？
HTML5 自带验证： 把 type="text" 改成 type="email"。
<label>
邮箱：<input type="email" name="user_email" required>
</label>
效果：
- 手机端键盘变了：手机会自动弹出带
@符号的专用键盘。 - 自动检查：如果用户填了“12345”这种不像邮箱的东西，点击提交时，浏览器会报错：“请在邮箱地址中包含 @ 符号”。
同理还有：
type="number"：只能输数字。(带有增减器）type="tel"：调出手机号键盘。（只在手机端生效)type="date"：直接弹出一个日历选择器！📅
三、 勾选框：type="checkbox"
登录页通常还有个**“记住我”或者“同意用户协议”**的功能。 这种“是/否”的选择，我们用 复选框 (Checkbox) 。
如果你想让它一打开页面就是打钩的状态，加个 checked 单词。
<label> <input type="checkbox" name="agree" checked> 我已阅读并同意协议 </label>
四、 动手实战：做一个“智能”登录框
打开 VS Code，新建 10-form-pro.html。 这次我们要把“保安”和“勾选框”全都用上！
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>智能登录框</title>
</head>
<body>
<h1>用户登录 (Pro版)</h1>
<form action="#">
<div style="margin-bottom: 15px;">
<label>
邮箱：
<input type="email" name="email" placeholder="请输入邮箱" required>
</label>
</div>
<div style="margin-bottom: 15px;">
<label>
密码：
<input type="password" name="password" required>
</label>
</div>
<div style="margin-bottom: 20px;">
<label>
<input type="checkbox" name="remember" checked>
下次自动登录
</label>
</div>
<button type="submit">登录</button>
</form>
</body>
</html>
五、 亲自测试（找茬环节）
请大家在 Live Server 里狠狠地“折磨”这个表单：
- 什么都不填，直接点登录 -> ❌ 被
required拦住了吗？ - 邮箱栏填“张三”，点登录 -> ❌ 被
type="email"拦住了吗？ - 填好邮箱和密码，点登录 -> ✅ 地址栏出现数据了吗？
能通过这三关，你的表单才算合格！
