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

东浔

已于 2022-03-05 20:57:44 修改

阅读量1.5k

点赞数 1

分类专栏： Web应用开发文章标签： php css html web

于 2022-03-03 16:36:24 首次发布

本文链接：https://blog.csdn.net/m0_51039351/article/details/123257341

版权

Web应用开发专栏收录该内容

7 篇文章 10 订阅

订阅专栏

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}