前言： 大家好，我是[小奇腾]。欢迎来到 “幼儿园前端” 第 9 集！ 从今天开始，我们的网页要“活”过来了。 我们要学习如何让用户“输入信息”。不管是登录、注册还是发弹幕，都离不开 表单 (Form) 。 今天这集特别简单，我们只学 3 个单词，就能亲手写出一个标准的登录框！
本期详细的视频教程bilibili：幼儿园前端 #09：表单入门(上) —— 3个标签，手写一个登录框
一、 主角：万能输入框 <input>
在 HTML 里，想让用户打字，就用 <input> 标签。 它像变色龙一样，有一个 type 属性，改个词就变个样：
1. 账号框 (明文)
<input type="text">
效果：用户打什么字，屏幕就显示什么字。
2. 密码框 (密文)
<input type="password">
效果：用户打的字会自动变成小黑点 ••••，防偷窥。
二、 体验神器：<label> (标签)
这是新手最容易忽略的细节！ 如果不加 <label>，用户必须拿鼠标精准地点击那个小方框才能输入。 如果加了 <label>，点击文字也能输入！
✅ 高手写法（包裹起来）：
<label> 账号：<input type="text"> </label>
操作：试着点击“账号”这两个字，光标是不是自动跳进框里了？这对手指粗的手机用户非常友好！
三、 组装实战：做个登录页
打开 VS Code，新建 09-login.html。 我们需要用一个 <form> 标签把所有东西包起来，这代表它们是一个整体。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的登录页</title>
</head>
<body>
<h2>欢迎登录</h2>
<form action="#">
<div style="margin-bottom: 10px;">
<label>
账号：
<input type="text">
</label>
</div>
<div style="margin-bottom: 10px;">
<label>
密码：
<input type="password">
</label>
</div>
<button>立即登录</button>
</form>
</body>
</html>
四、 为什么点按钮没反应？
如果你现在去点“登录”，你会发现浏览器只是刷新了一下，好像什么都没发生。 这是因为我们少了一个关键属性：name。
如果不给输入框起名字，浏览器不知道你填的是啥，就不会提交。 我们给代码补个名字：
<input type="text" name="username">
<input type="password" name="password">
再次测试： 输入 admin / 123456，点击登录。 看地址栏：?username=admin&password=123456 看到这串小尾巴，就说明你的表单做成功了！
