A.2 实验2：注册表单和登录表单

article/2025/9/23 20:47:24

A.2 实验2：注册表单和登录表单

A.2.1目的与要求
A.2.2 实验内容

本实验初步创建用于学生注册的模块文件registration.php和用于登录的模块文件login.php。这两个模块文件都保存于教务选课系统项目xk中的“源文件”结点。
本实验主要完成注册表单和登录表单外观的设计，实验7将对这两个模块文件进行修改，实现相关的注册和登录功能。

A.2.1目的与要求

(1)理解表单的概念和作用。
(2)掌握表单元素和各种表单控件元素的使用，掌握表单的设计。
(3)掌握有关CSS属性的应用。
(4)掌握利用CSS技术实现页面布局的技术。

A.2.2 实验内容

(1)创建PHP文件 regisration.php，作为用于学生注册的模块文件。本实验仅设计表单的外观，其注册功能将在实验7实现。运行该模块文件的呈现效果如图A-3所示。
该表单用于学生注册，具体要求如下：
①用CSS技术(不用HTML<table>标签)实现表单及表单控件的布局。
②将表单标签的 method属性值设置为“POST”。将action属性值设置为””，或缺省该属性，使表单提交时总是请求该模块文件(或其所在的页面文件)。
③除性别外，其他各输入域后面都有可能要显示错误信息，这些错误信息将用红色显示，请使用外部样式表xk.css中的合适样式。

(2)创建PHP文件 login.php，作为用于学生和教师登录的模块文件。本实验仅设计表单的外观，其登录功能将在实验7实现。
该表单用于学生或教师的登录，具体要求如下：
①用CSS技术(不用HTML<table>标签)实现表单及表单控件的布局。
②将表单标签的method属性值设置为"POST”。将action属性值设置为””，或缺省该属性，使表单提交时总是请求该模块文件(或其所在的页面文件)。
③用户名和密码两个输入域后面有可能要显示错误信息，这些错误信息将用红色显示，请使用外部样式表xk.css中的合适样式。

regisration.php

<html><head><meta charset="UTF-8"><title></title><link rel='stylesheet' type='text/css' href='xk.css'/></head><body><form class='style1' method = 'post'><div class='outer'><div class='title'>请注册</div><div class='inter'><p><label for='i1' class='label'>用户名*</label><input type='text' id='i1' name='user' maxlength='4' style='width: 130px'/></p><p><label for='i2' class='label'>密码*</label><input type='password' id='i2' name='pw' maxlength='12' style='width: 130px'/></p><p><label for='i3' class='label'>确认密码*</label><input type='password' id='i3' name='repw' maxlength='12' style='width: 130px'/></p><p><label for='i4' class='label'>姓名*</label><input type='text' id='i4' name='realname' maxlength='4' style='width: 60px'/></p><p><span>性别</span>&#12288&#12288&#12288<input id='a' type='radio' name='sex' value='m'/><label for='a'>男</label>&nbsp;<input id='b' type='radio' name='sex' value='f'/><label for='b'>女</label></p><p><label for='i5' class='label'>出生日期</label><input type='text' id='i5' name='birthday' maxlength='12' style='width: 130px'/></p><p><label for='i6' class='label'>Email*</label><input type='text' id='i6' name='email' maxlength='20' style='width: 200px'/></p><p style='text-align:center; padding-top:10px'><input type='submit' class='big' name='submit' value='立即注册'/></p></div></div></form></body>
</html>

login.php

<html><head><meta charset="UTF-8"><title></title><link rel='stylesheet' type='text/css' href='xk.css'/></head><body><form class='style1' method = 'post'><div class='outer'><div class='title'>请登陆</div><div class='inter'><p><label for='i1' class='label'>用户名</label><input type='text' id='i1' name='user' maxlength='4' style='width:130px'/></p><p><label for='i2' class='label'>密码</label><input type='password' id='i2' name='pw' maxlength='12' style='width:130px'/></p><p><input id='a' type='radio' name='identity' value='student'/><label for='a'>学生</label>&nbsp;<input id='b' type='radio' name='identity' value='teacher'/><label for='b'>教师</label></p><p style='text-align:center; padding-top:10px'><input type='submit' class='big' name='submit' value='确认'/></p></div></div></form></body>
</html>

xk.css
课本

/*48页*/
/*基本样式*/
body {font-size: 14px; letter-spacing: 1.2px}
.title {color: #458994; font-weight: 700}
a {color: steelblue; text-decoration: none}
a:visited {color: steelblue}
a:hover {text-decoration: underline; font-weight: 700}
/*水平导航栏样式*/
.nav .left {float: left; padding: 5px 10px 5px 10px}
.nav .right {float: right; padding: 5px 10px 5px 10px}
.nav .current {background-color: steelblue; color: white}
/*51页*/
/*表单样式*/
form {margin: 10px 0}
form .label {display: inline-block; width: 70px; margin-right: 10px}
form.style1 {text-align: center}
form.style1 div.outer {border: 1px solid #458994; display: inline-block}
form.style1 div.title {color: white; background-color: #458994; font-size: 20px;padding-top: 12px; padding-bottom: 8px; margin: 1px
}
form.style1 div.inter {padding: 10px; text-align: left}
input, select {font-size: 13px; padding: 3px 1px}
input[type=submit] {padding: 4px 15px; color: steelblue; background-color: #eeeeee;border: 1px solid steelblue; cursor: pointer
}
input[type=submit].big {font-size: 15px; padding: 7px 30px}
input[type=submit].text {font-size: 14px; padding: 1px 2px; color: steelblue;background-color: white; border-width: 0
}
input[type=submit]:hover {font-weight: 700}
textarea {letter-spacing: 1.2px; line-height: 1.5}
form .errMsg {font-size: 13px; color: red}