任务目标
利用HTML表单控件制作云课堂登录页面。
任务要求
（1）按照下图所示效果完成用户登录页面。
（2）“登录”按钮使用input标签完成。
（3）对文本框、密码框和表单控件使用label标签进行包裹。
（4）使用图片按钮制作“登录”按钮。
效果如下图：
任务实施
（1）在项目根目录中创建login.html文件。
（2）使用form元素并设定method与action属性。
（3）添加“账户”文本框。
（4）添加“密码”密码框。
（5）添加“登录”按钮。
经验分享
单选框、多选框有一个先天的“缺点”，就是有效地点击范围，只能通过点击圆形或方形的选择控件触发选择功能，实际上用户体验非常不好。第一，控件体积小，不容易选中；第二，控件与相关文本的关联关系相对不明确，可能因为排版等问题，选项换行容易看串行，导致错误选择的问题。
这里HTML使用label标签提供的绑定功能可以有效地解决上述问题。label标签标记作用，可将其他元素的点击事件绑定给指定控件，也就是说可以让某个元素有了一个“分身代表”，让”分身的点击“可以出发自己的点击效果。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>文本框</title>
</head>
<body>
<form method="post" action="">
性别：
<!-- label的用法一 -->
<input id="gen_id" name="gen" type="radio" class="input" value="男">
<label for="gen_id">男</label>
<!-- label的用法二 -->
<label>
<input name="gen" type="radio" value="女" class="input"/>女
</label>
</form>
</body>
</html>
首先给文字部分使用label包裹形成以的”分身代理“，然后给要被绑定的元素怒设定一个唯一ID属性，再让label元素的for属性值完全等于被绑定元素的id值，就实现了点击触发的绑定。
除了上面的方法还有方便的方式，不需要去设定id属性和for属性，而是直接将要被绑定的元素与”分身代理“元素或内容都放到label元素的内容中，他们就会自己绑定为一个整体。
前者要比后者灵活，因为后者的方式必须保证选项的文字等内容与选项控件必须紧邻。
能量贴士
天行健，君子以自强不息;地势坤，君子以厚德载物。语出《周易》。
