HTML CSS 简单小实例_简单的html-CSDN博客

本文链接：https://blog.csdn.net/2302_76949164/article/details/137023498

一、登录注册页面

1.需求文档内容如下：

1.登录

用户名：

密码：

注册按钮跳转注册界面

忘记密码按钮跳转忘记密码界面

登录按钮跳转个人页面

2.注册

用户名：3-8字符（字母开头）

密码：6-12字符，字母+数字构成

再次输入相同的密码

手机号：

验证码

3.忘记密码

用户名：

手机号：

验证码：

若无手机号点击人工申诉按钮

4.个人页面

完善个人信息

1.上传头像

2.昵称

3.姓名、性别、年龄、家庭住址、身份证号

2.代码：

登录界面

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>登录界面</title>
    </head>
    <body>
        <div><h3 align="center">登录界面</h3></div>
        <center>
        <span>
            <form>
                <label for="login">登录：</label><input type="text" id="login" value="请输入用户名"><br/>
                <label for="password">密码：</label><input type="password" id="password"><br/>
                <a href="register.html"><input type="button" value="注册"></a>
                <a href="forget.html"><input type="button" value="忘记密码"></a><br/>
                <a href="personal.html"><input type="button" value="登录"></a>
            </form>
        </span>
        </center>
    </body>
</html>

注册界面

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>注册界面</title>
    </head>
    <body>
            <div align="center"><h2>注册界面</h2></div>
            <span>
                <table align="center">
                    <tr>
                        <td><label for="register">用户名：</label></td>
                        <td><input type="text" value="请输入符合规定的用户名" id="register">（3-8字符，字母开头）</td>
                    </tr>
                    <tr>
                        <td><label for="password">&nbsp;密码：</label></td>
                        <td><input type="password" id="password">（6-12字符，字母+数字）</td>
                    </tr>
                    <tr>
                        <td><label for="password1">确认：</label></td>
                        <td><input type="password" id="password1">（再次输入相同的密码）</td>
                    </tr>
                    <tr>
                         <td><label for="phone">手机号：</label></td>
                         <td><input type="text" id="phone"><br/></td>
                    </tr>
                    <tr>
                        <td><label for="yanma">验证码：</label></td>
                        <td><input type="text" id="yanma"></td>
                    </tr>
                    <tr>

                    </tr>
                    <tr>
                        <td></td>
                        <td><input type="reset" value="重新输入"></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><a href="login.html"><input type="button" value="注册" ></a></td>
                    </tr>
                    </table>
            </span>
    </body>
</html>

忘记密码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>忘记密码界面</title>
    </head>
    <body>
        <center>
            <div><h3>忘记密码</h3></div>
            <span>
                <form>
                    用户名：<input type="text" value="请输入正确的用户名"><br/>
                    手机号：<input type="text" value="请输入正确的电话号码"><br/>
                    验证码：<input type="text" value="请输入正确的验证码"><br/>
                    <a href="find.html"><input type="button" value="找回密码"></a>
                    <input type="reset" value="重新输入">
                </form>
            </span>
        </center>
    </body>
</html>

找回密码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>重新设置密码</title>
    </head>
    <body>
        <center>
            请输入密码<input type="password"><br/>
            再确认一次<input type="password"><br/>
            <a href="login.html"><input type="button" value="重新登录"></a>
        </center>
    </body>
</html>

个人页面

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>个人页面</title>
    </head>
    <body>
        <a href="config.html">
        <input type="button" value="设置用户信息"></a>
        <br/>
        <a href="login.html">
            <input type="button" value="退出登录">
        </a>
    </body>
</html>

个人信息录入

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>个人信息录入</title>
    </head>
    <body>
            <div align="center"><h3>个人信息录入</h3></div>
        <table align="center">
            <tr>
                <td>姓名：</td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td>性别：</td>
                <td>男<input type="radio" name="sex">女<input type="radio" name="sex"></td>
            </tr>
            <tr>
                <td> 身份证号：</td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td>家庭住址：</td>
                <td><select>
                    <option>北京</option>
                    <option>天津</option>
                    <option>上海</option>
                    <option>山东</option>
                    <option>河南</option>
                    <option>火星</option>
                    <option>太阳系</option>
                    <option>半人马星系</option>
                </select>省/直辖市
                    <select>
                        <option>A</option>
                        <option>B</option>
                        <option>C</option>
                        <option>D</option>
                        <option>E</option>
                        <option>青岛</option>
                    </select>市</td>

            </tr>
            <tr>
                <td>详细地址：</td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td>爱好：</td>
                <td>
                    <dl>
                        <dd>吃鸡<input type="checkbox" name="hobby"></dd>
                        <dd>吃饭<input type="checkbox" name="hobby"></dd>
                        <dd>学习<input type="checkbox" name="hobby"></dd>
                        <dd>篮球<input type="checkbox" name="hobby"></dd>
                        <dd>唱歌跳舞<input type="checkbox" name="hobby"></dd>
                        <dd>RAP<input type="checkbox" name="hobby"></dd>
                    </dl>
                </td>
            </tr>
            <tr>
                <td>个性签名：</td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td>上传头像：</td>
                <td><input type="file"></td>

            </tr>
            <tr>
                <td></td>
                <td><a href="personal.html">
                    <input type="button" value="保存信息"></a></td>
            </tr>

        </table>
    </body>
</html>