|
发表于 2023-4-5 21:13:57
|
显示全部楼层
以下是一个简单的注册页面示例:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>注册页面</title>
- <style>
- body {
- margin: 0;
- padding: 0;
- font-family: Arial, sans-serif;
- }
-
- #registration-form {
- width: 500px;
- margin: 50px auto;
- border: 1px solid #ccc;
- padding: 20px;
- }
-
- label {
- display: block;
- margin-bottom: 10px;
- }
-
- input[type="text"],
- input[type="password"],
- select {
- width: 100%;
- padding: 10px;
- border: 1px solid #ccc;
- border-radius: 5px;
- margin-bottom: 20px;
- }
-
- select {
- height: 40px;
- }
-
- input[type="submit"] {
- background-color: #4CAF50;
- color: #fff;
- padding: 10px 20px;
- border: none;
- border-radius: 5px;
- cursor: pointer;
- }
-
- input[type="submit"]:hover {
- background-color: #3e8e41;
- }
- </style>
- </head>
- <body>
- <form id="registration-form">
- <label for="username">用户名:</label>
- <input type="text" id="username" name="username" required>
-
- <label for="password">密码:</label>
- <input type="password" id="password" name="password" required>
-
- <label for="confirm-password">确认密码:</label>
- <input type="password" id="confirm-password" name="confirm-password" required>
-
- <label for="email">邮箱:</label>
- <input type="text" id="email" name="email" required>
-
- <label for="gender">性别:</label>
- <select id="gender" name="gender">
- <option value="male">男</option>
- <option value="female">女</option>
- <option value="other">其他</option>
- </select>
-
- <input type="submit" value="注册">
- </form>
- </body>
- </html>
复制代码
在这个页面中,我们使用了 HTML 表单元素来收集用户的注册信息,CSS 来美化页面样式,JavaScript 则可以用来验证表单输入的有效性并在提交表单时进行处理。 |
|