【HTML入门】第二十二课 - 【实战】做一个注册页面-CSDN博客

本文链接：https://blog.csdn.net/xingyu_qie/article/details/140922260

这一小节，我们继续纯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="请输入右侧图形验证码" />&nbsp;&nbsp;<img src="./files/imgs/verifyCode.png" />
            </div>
            <div>
                <label>手机验证码：</label><input type="text" placeholder="请输入手机验证码" />&nbsp;&nbsp;<a href="javascript:void(0);">获取验证码</a>
            </div>
            <div>
                <button>注册</button>
            </div>
        </form>
    </body>

</html>