一.运行截图
二.图片资源
图片可以在body中变更成自己喜欢的图片
三.代码
<!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>元素
275
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
