PHP选课系统第三集——登录页面（login.php）

PHP选课系统第三集——登录页面（login.php）

这是PHP选课系统系列的第三篇，此系列会带领新学习PHP的萌新们一点一点的自己完成一个选课系统。我也是新学的菜鸟，所以大家一起努力吧！
如果不想看过程，最后有最终代码。
在这里用的环境是NetBeans IDE 8.0.2和XAMPP。

一、登录页面的制作

1.构思

老样子，构思一下登录页面需要有什么
一个标题，一个输入用户名和一个输入密码的地方，一个选择是学生还是老师的选项，一个确认提交的按钮。

2.分解

用我们经典配色将它分解。首先，大家应该已经熟悉了，它应该在一个<div>里的。在这个div中，分成三块内容，分别是请登录这个标题，其他各种需要填写的信息，还有一个提交按钮。（这里的后两块按照功能划分了一下）
这里我们需要注意，在外层的<div>的外面，我们还要套一层表单<form>。表单用于向服务器传输数据。然后在表单里有一个大<div>，在其中又分别有三个<div>

第一个小<div>只有标题，很简单；第二个小<div>中则要复杂许多。通过分解，我们需要<label>一个“用户名”，并用<input>写用户名，密码同理；学生和老师的选项按钮则也用<input>完成；第三个小<div>中也只有一个提交按钮<input>。

3.写框架

先写出刚才分解后的框架，并做一些外层的简单的css设置，效果如下

		<form method="post" action="" style="text-align: center; font-family: 宋体; font-size: 14px;">
            <div style="border: 2px solid lightblue;">
                <div>
                        请登录
                </div>
                <div style="text-align: left; padding: 15px 5px;">                    
                        <label>用户名</label>
                        <input type="text" value="" name="user"/>
                        <label >密码</label>
                        <input type="password" value="" name="password" />
                        <input type="radio" name="lb" value="同学"  checked="checked" />
                        <label for="i3">学生</label>
                        <input type="radio" name="lb" value="老师" />
                        <label for="i4">教师</label>          
                </div>
                <div style="margin-bottom: 20px">
                    <input type="submit" value="确 认" name="log" />
                </div>
            </div>
            
        </form>

4.css调格式

到了最麻烦的调格式环节，这个框我们不想它有这么宽，想让它的width跟着内容的多少走，我们只需要在大<div>加上display: inline-block ;这样外层的设置就差不多了，接下来就是调整里面的内容了

2）
先从简单的入手，第一个小<div>给它起名字class="ct"，在style中写入css代码

 .ct{
                font-family: 宋体;
                font-size: 18px;
                padding: 15px 0;
                background-color: lightblue;
            }

3)
接下来再写第二简单的小<div>，最后的提交按钮，给它起名字class="ci2"（由于这里讲解和实际写的时候的顺序有一些出入，所以出现的名字可能有一些混乱，大家趁机可以锻炼自己的读代码能力），这里 cursor: pointer;的意思就是鼠标指针变成 手 的形状，和放到链接上面的鼠标指针一样。

		 .ci2{
                font-family: 宋体;
                font-size: 16px;
                padding: 5px 25px;
                cursor: pointer;
            }

最后调试的就是最复杂的第二个<div>，我们观察得知他们现在都处于一行，如何运用我们所学将他们分行呢？方法有很多，大家可以去尝试，我这里用了<p>“行”和“块”的知识。将需要在一行的内容放在同一个<p>中，这样就都分好行了。

				<div style="text-align: left; padding: 15px 5px;">     
                    <p>
                        <label>用户名</label>
                        <input type="text" value="" name="user"/>
                    </p>
                    <p>
                        <label >密码</label>
                        <input type="password" value="" name="password" />
                    </p>
                    <p>
                        <input type="radio" name="lb" value="同学"  checked="checked" />
                        <label for="i3">学生</label>
                        <input type="radio" name="lb" value="老师" />
                        <label for="i4">教师</label>     
                    </p>          
                </div>

接下来我们先来调试用户名和密码这两行，分别给前面的label和后面的input起名class="cl"和class="ci1",设置好宽度就可以让他们整整齐齐。
接下来我们给用户名和密码再添加一个功能，就是点这几个字就可以直接在后面的input中输入了，不必非点在后面的input中。给input起id名，再再前面的label中写入for="这是id名"就完成了。

			.ci1{
                font-family: 宋体;
                font-size: 13px;
                width: 150px;
            }
             .cl{
                display: inline-block;
                width: 70px;
            }
			<p>
                  <label for="i1" class="cl">用户名</label>
                  <input type="text" value="" name="user" id="i1" class="ci1" />
            </p>
            <p>
                 <label for="i2" class="cl">密码</label>
                 <input type="password" value="" name="password" id="i2" class="ci1" />
            </p>

最后，来到input的radio功能，分别给他们起名，同理用for
其中的checked="checked"是预选功能
这样，登录页面就完成了

<p>
        <input type="radio" name="lb" value="同学" id="i3" checked="checked" />
        <label for="i3">学生</label>
        <input type="radio" name="lb" value="老师" id="i4" />
        <label for="i4">教师</label>     
</p>

二、为了方便，这里又放上了代码

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
         <style type="text/css">
            .ci1{
                font-family: 宋体;
                font-size: 13px;
                width: 150px;
            }
            .ci2{
                font-family: 宋体;
                font-size: 16px;
                padding: 5px 25px;
                cursor: pointer;
            }
            .ct{
                font-family: 宋体;
                font-size: 18px;
                padding: 15px 0;
                background-color: lightblue;
            }
            .ce{
                font-family: 宋体;
                font-size: 13px;
                color: red;
            }
            .cl{
                display: inline-block;
                width: 70px;
            }
        </style>
        <form method="post" action="" style="text-align: center; font-family: 宋体; font-size: 14px;">
            <div style="border: 2px solid lightblue;display: inline-block ;">
                <div class="ct">
                        请登录
                </div>
                <div style="text-align: left; padding: 15px 5px;">     
                    <p>
                        <label for="i1" class="cl">用户名</label>
                        <input type="text" value="" name="user" id="i1" class="ci1" />
                    </p>
                    <p>
                        <label for="i2" class="cl">密码</label>
                        <input type="password" value="" name="password" id="i2" class="ci1" />
                    </p>
                    <p>
                        <input type="radio" name="lb" value="同学" id="i3" checked="checked" />
                        <label for="i3">学生</label>
                        <input type="radio" name="lb" value="老师" id="i4" />
                        <label for="i4">教师</label>     
                    </p>          
                </div>
                <div style="margin-bottom: 20px">
                    <input type="submit" value="确 认" name="log" class="ci2"  />
                </div>
            </div>        
        </form> 
    </body>
</html>