这一小节,我们继续纯HTML标签的使用,这一节我们做一个 注册页面。说到注册页面,其实大家的网站都大同小异,所以我们就不四处去找设计图了,我们自己想一个注册页面,想想注册页面都应该有哪些元素,应该长什么样子。
目录
1 需求分析
我们先来分析一下,注册页面都应该有哪些功能:
- 用户名,一般用来注册成功后,网站上显示的昵称;
- 密码,后续登录所用的密码;
- 注册的时候,为了确保用户密码输入正确,确保用户没有输入错误,怕后续自己记不住,会有一个确认密码,也就是把密码再输入一次,真正网站开发的时候,还会验证两次输入的密码是否一致;
- 会有手机号的输入;
- 会有手机号的验证码,为什么要有手机号验证码呢?网站得确认你输入的手机号是否是可用的,并且是自己的,如果不是可用的手机号,或者不是自己的,那么你就无法填入正确的手机验证码,对吧。(当然,你也可以用身边输入的手机号,也可以做到这一点,不一定非得是自己的)
- 会有图形验证码,和图形验证码的输入框。(为什么还要有个图形验证码呢?一般都是图形验证码输入正确后,才可以点击发送 “手机验证码” 的按钮,一般图形验证码人都需要使劲儿的看,所以机器是看不出来的。试想一下,如果没有这一步,那么人们是不是就可以使劲儿的点击那个发送 手机验证码 的按钮了,给用户发短信,是需要短信费用的,如果没有图形验证码,那很快坏人不就把网站的短信费浪费光了,多费钱呀,所以得有验证的这一步,才能发短信)
- 发完短信,收到短信验证码,得输入短信验证码;
- 点击“注册”按钮
所以,如果不考虑细节功能的话,注册页面大概需要这些元素:
2 标签使用分析
分析完了功能,那么我们还需要分析一下布局,分析一下使用的标签,对吧。
- 顶部“注册”标题,可以使用h2标签;
- 底部是一个form表单,可以使用 form 标签;
- 每个内容前面应该有个文字提示;
- 有文字输入框,有密码输入框,输入框内应该有灰色文字提示;
- 有图形验证码的图片;
- 有发送手机验证码的按钮;
- 底部有“注册”按钮
所以需要的标签大概会 包括但不限于一下这些:
3 布局分析
布局方面呢,
- 应该是顶部有个“注册”的标题;
- 然后底部是一个大的form表单区域;
- 然后表单中又区分多个小区域;
- 每个小区域呢,有个文字提示,比如用户名:后面是一个用户名输入口,这些是横线展示的;
- 然后遇到点击“发送验证码”,遇到图形验证码的,就又需要和输入框在同一行,对吧;
- 然后最底部的区域,是一个最终的 “注册” 按钮。
就像这样:
我们这个教程与其他教程不同之处就在于,稳扎稳打,一步一个脚印。其他教程HTML章节肯定是匆匆而过了,导致很多同学们,都学到后面了,布局也不熟,用的标签也不熟。然后就很容易学的跟不上,越学越混乱。
而且,越到后面需要学的东西就会越多,不稳扎稳打,后面只会觉得像一团浆糊一样。学了后面的,又得不断去学前面的。
4 实战源码
分析了布局,分析了元素,分析了功能,下面你可以练着敲代码了,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一个网页</title>
<style type="text/css">
</style>
</head>
<body>
<h2>注册</h2>
<form>
<div>
<label>用户名:</label><input type="text" placeholder="请输入用户名" />
</div>
<div>
<label>密码:</label><input type="password" placeholder="请输入密码" />
</div>
<div>
<label>确认密码:</label><input type="password" placeholder="请输入确认密码" />
</div>
<div>
<label>手机号:</label><input type="text" placeholder="请输入手机号" />
</div>
<div>
<label>图形验证码:</label><input type="text" placeholder="请输入右侧图形验证码" /> <img src="./files/imgs/verifyCode.png" />
</div>
<div>
<label>手机验证码:</label><input type="text" placeholder="请输入手机验证码" /> <a href="javascript:void(0);">获取验证码</a>
</div>
<div>
<button>注册</button>
</div>
</form>
</body>
</html>