html简单编写一个注册界面

最新推荐文章于 2026-06-09 23:33:06 发布

原创最新推荐文章于 2026-06-09 23:33:06 发布 · 2.7k 阅读

17 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #css #前端

本文介绍了一个简单的网页注册表单的设计与实现过程。该页面使用HTML进行布局，并通过CSS进行了美化，包括背景渐变效果及字体样式等。表单包含了用户名、密码、邮箱等基本信息的输入框，并提供了性别选择及爱好填写区域。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8">
    <title></title>
    <style>

        body { background-image: linear-gradient(110deg, #f9bde8, #f670d0);}
        .header 
        {
            font-size: 60px;
            font-weight: 900;
            text-align: center;
            line-height: 120px;
        }
    </style>
</head>

<body>
    <table border="1" width="700" height="400" align="center" background-color="#FF6699">
        <tr>
            <td bgcolor="#fbf1f1">
                <div class="header">Register</div>
                <form action="" align="center">
                    username:<input type="text" placeholder="Please input your usename" style="width: 400px;height: 30px;"><br><br>password :
                    <input type="password" placeholder="Please input your password" style="width: 400px;height: 30px;"><br><br> repeat :
                    <input type="password" placeholder="repeat your password" style="width: 400px;height: 30px;"><br><br> email  :
                    <input type="text" placeholder="Please input your email" style="width: 400px;height: 30px;"><br><br> gender :
                    <input type="radio"> man <input type="radio">woman
                    </select><br><br> habits&nbsp;&nbsp;&nbsp;love:<label for="awards"></label><textarea id="awards" cols="1" rows="3" style="width: 400px;height: 100px;">action\music\lover\</textarea><br><br>
                    <hr><br>
                    <input type="button" value="register" / style="width: 100px;height: 25px;"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="reset" value="reset" / style="width: 100px;height: 25px;">
                </form>
            </td>
        </tr>
    </table>
</body>
</html>

运行结果：