HTML+CSS制作登录页面

本是古典何须时尚 2024-02-20 04:27 44阅读 0赞

## 一.运行截图 ##

![8b51c60af71a47d088f1591b14de553e.png][]

## 二.图片资源 ##

图片可以在body中变更成自己喜欢的图片

![8110659e53bd4020862b233ad0032468.webp][]

## 三.代码 ##

<!doctype html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<style>
    			
    			body{
    				background-image: url(../img/a.webp);
    				background-repeat: no-repeat;
    				position: absolute;
    				background-size: cover;
    				left: 30%;
    			}
    			
    			img{
    				opacity: 0.5;
    			}
    			
    			input[type="reset"] {
    			  background-color: blue;
    			  color: white;
    			  font-size: 16px;
    			  position: absolute;
    			  left: 60%;
    			  width: 60px;
    			  height: 30px;
    			}
    			
    			input[type="submit"] {
    			  background-color: blue;
    			  color: white;
    			  font-size: 16px;
    			  position: absolute;
    			  left: 10%;
    			  width: 60px;
    			  height: 30px;
    			}
    			
    			
    			h1{
    				color: #000;
    				text-align: center;
    			}
    			
    			h3{
    				color: red;
    			}
    			tr{
    				height: 35px;
    			}
    			th{
    				color: aquamarine;
    			}
    			input[type="radio"] {
    			  height: 10px;
    			  width: 10px;
    			}
    
    		</style>
    	</head>
    	
    	<body>
    			<h1>学生信息注册</h1><hr />
    			<h3>请注意：带有*号键的必须填写</h3>
    			<table >
    			<form action="" method="get" autocomplete="on">
    				
    				<tr>
    				<th>昵称*：</th>
    				<td><input name="txtUsername" type="text"  pattern="^[a-zA-Z][a-zA-Z0-9_]{4,15}$" required>
    				(6-18个字符，由字母，数字，或者下划线组成)
    				</td>
    				</tr>
    				
    				<tr>
    				<th>手机*：</th>
    				<td><input name="txtUsername" type="text"  pattern="[0-9]{11}" required></td>
    				</tr>
    				
    				<tr>
    				<th>姓名*：</th>
    				<td><input name="txtPwd" type="text" pattern="[\u4e00-\u9fa5]*" required >
    				（要真实姓名，只能输入汉字）
    				</td></tr>
    				
    				<tr>
    				<th>性别：</th>
    				<td><input type="radio" name="gender" value="male" checked>男</td>
    				<td><input type="radio" name="gender" value="female" >女</td>
    				</tr>
    				
    				<tr>
    				<th>年龄：</th>
    				<td><input type="number" name="tel" min="18" max="100" maxlength="3" >
    				（年龄介于18-100岁之间）
    				</td>
    				</tr>
    				
    				<tr>
    				<th>出生日期：</th>
    				<td><input name="txtPwd" type="date" ></td>
    				</tr>
    				
    				<tr>
    				<th>电子邮箱</th>
    				<td><input name="txtPwd" type="email" placeholder="sunsan@126.com" ></td>
    				</tr>
    				
    				<tr>
    				<th>身份证号*：</th>
    				<td><input type="text" name="shenfenzheng" pattern="[0-9]{16}" required></td>
    				</tr>
    				
    				<tr>
    				<th>籍贯：</th>
    				<td>
    					<select id="city" name="city">
    				    <option value="chongqing">重庆市</option>
    				    <option value="jiangxi">江西省</option>
    				    <option value="yunnan">云南省</option>
    				    <option value="sichuan">四川省</option>
    				    </select>
    				</td>
    				</tr>
    				
    				<tr>
    				<th>爱好：</th>
    				<td><label> <input  name="favor" type="checkbox" value="a" checked="checked">音乐 </label>
    				<label> <input  name="favor" type="checkbox" value="a">上网 </label>
    				<label> <input  name="favor" type="checkbox" value="a">看电影 </label>
    				<label> <input  name="favor" type="checkbox" value="a">下棋 </label>
    				</td>
    				</tr>
    				
    				<tr>
    				<th><span>喜爱的颜色：</span></th>
    				<td><input name="txtPwd" type="color">（请选择你喜欢的颜色）</td>
    				</tr>
    				
    				<tr>
    				<td><input name="btnLogin" type="submit" value="提交" class="btn1"></td>
    				<td><input name="btnReg" type="reset" value="重置" class="btn2"></td>
    				</tr>
    			
    			</form>
    		</table>
    	</body>
    </html>

四.部分知识点

### 4.1 `input[type="radio"]` ###

在 CSS 中，选择器用于确定要应用规则的 HTML 元素。可以根据标记名称、类名、ID、属性等选择元素。`input[type="radio"]` 选择器是属性选择器的一种，它选择了具有特定属性值的元素

### 4.2 form ###

*  `<form>` 元素：用于包含表单元素并定义表单的属性，比如提交方式（method）和目标页面（action）。
 *  `<label>` 元素：用于标记表单元素，通常与对应的输入元素相对应。需要使用 `for` 属性来指定关联的输入元素的 `id`。
 *  输入元素：例如 `<input>` 和 `<textarea>` 元素，用于接受用户输入。
 *  `<input type="submit">` 元素：用于提交表单数据到服务器处理，并触发提交事件。

注意: `action` 属性指定表单提交的目标页面，`method` 属性指定表单提交的方式（GET 或 POST）以及其他参数。

### 4.3 table ###

`<table>` 标签用于创建 HTML 表格（table）。HTML 表格由表头（`<thead>`）、表身（`<tbody>`）和表尾（`<tfoot>`）三部分组成。

*  `<table>`：定义一个表格。
 *  `<thead>`：定义表格的表头。
 *  `<tbody>`：定义表格的表身。
 *  `<tfoot>`：定义表格的表尾。
 *  `<tr>`：定义一个表格行。
 *  `<th>`：定义表头单元格。
 *  `<td>`：定义表身单元格。
 *  `colspan`：规定单元格横跨的列数。
 *  `rowspan`：规定单元格纵跨的行数。

需要注意的是，表格是不应该被用来布局网页的，应该只被用来呈现具有明确数据关系的数据。

### 4.4 pattern ###

`pattern` 属性是用于验证 `<input>` 元素中的文本输入的正则表达式。如果用户输入的值与该正则表达式不匹配，则表单无法提交。

需要注意的是，`pattern` 属性只在支持 HTML5 的浏览器中有效。如果用户使用的是不支持 HTML5 的浏览器，那么该属性将被忽略。

### 4.5 checked ###

`checked` 是用于设置 `<input>` 元素的默认选中状态的布尔属性。当该属性设置为 true 时，表示该选项默认为选中状态；当该属性设置为 false 或者不设置时，则表示该选项默认为未选中状态。

### 4.6 required ###

`required` 是用于设置表单元素是否必须填写的属性。当该属性被设置为 `true` 时，表示该表单元素必须填写才能提交表单，否则提交表单时会提示用户必须填写该项。

该属性适用于以下表单元素：

*  `<input>` 元素中的 `text`、`email`、`url`、`tel`、`number`、`date`、`time`、`datetime-local` 类型
 *  `<select>` 元素
 *  `<textarea>` 元素

[8b51c60af71a47d088f1591b14de553e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/3b62a66a10de4bc88d9778e1d79e7319.png
[8110659e53bd4020862b233ad0032468.webp]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/35c5beac5ee74495a434ec0e4eee5850.png