运维人员简单了解些web页面的编写是有必要的,后面几篇从记录一些算是学习或摘录的简单web页面的实现方法。本篇就结合bootstrap + php实现一个简单的用户注册的页面代码。具体实现效果如下图:
一、代码结构
具体代码结构如下:
[root@361way registration]# tree . ├── css │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── fonts │ ├── glyphicons-halflings-regular.eot │ ├── glyphicons-halflings-regular.svg │ ├── glyphicons-halflings-regular.ttf │ └── glyphicons-halflings-regular.woff ├── js │ ├── bootstrap.js │ └── bootstrap.min.js └── registration.php
二、HTML结构类
这里实现页面代码的主要是registration.php文件,而里面基本全是html 代码,其中html 代码分以下模块类:
class="navbar navbar-inverse navbar-fixed-top" class="container" class="navbar-header" class="navbar-toggle" class="navbar-collapse collapse" class="navbar-form navbar-right" class="form-group" class="form-control" class="rows" class="col-xs-6" class="form-horizontal" class="form-control input-lg" class="form-inline" class="form-control input-sm" class="radio"
三、php代码
php代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0" name="viewport"> <meta content="" name="description"> <meta content="" name="author"> <link href="" rel="shortcut icon"> <title>Registration form</title><!-- Bootstrap core CSS --> <link href="css/bootstrap.css" rel="stylesheet"> <link href="css/bootstrap-responsive.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="well"> <form action="register.php" class="form-horizontal well" method="post"> <fieldset> <legend>Register Now</legend> <h4>It’s free and always will be.</h4> <div class="row"> <div class="col-xs-8"> <div class="form-group"> <div class="rows"> <div class="col-md-8"> <div class="col-lg-6"> <input class="form-control input-lg" id="fName" name="fName" placeholder="First Name" type="text"> </div> <div class="col-lg-6"> <input class="form-control input-lg" id="lName" name="lName" placeholder="Last Name" type="text"> </div> </div> </div> </div> <div class="form-group"> <div class="rows"> <div class="col-md-8"> <div class="col-lg-12"> <input class="form-control input-lg" id="email" name="email" placeholder="Your Email" type="email"> </div> </div> </div> </div> <div class="form-group"> <div class="rows"> <div class="col-md-8"> <div class="col-lg-12"> <input class="form-control input-lg" id="reemail" name="reemail" placeholder="Re-enter Email" type="text"> </div> </div> </div> </div> <div class="form-group"> <div class="rows"> <div class="col-md-8"> <div class="col-lg-12"> <input class="form-control input-lg" id="password" name="password" placeholder="New Password" type= "password"> </div> </div> </div> </div> <div class="form-group"> <div class="rows"> <div class="col-md-8"> <h4> <div class="col-md-3"> <label class="col-lg-4 control-label">Birthday</label> </div> <div class="col-lg-3"> <select class="form-control input-sm" name="month"> <option>Month</option> <?php $m = array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"); foreach ($m as $month) { echo '<option value='.$month.'>'.$month.'</option>'; } ?> </select> </div> <div class="col-lg-3"> <select class="form-control input-sm" name="day"> <option>Day</option> <?php $d = range(31, 1); foreach ($d as $day) { echo '<option value='.$day.'>'.$day.'</option>'; } ?> </select> </div> <div class="col-lg-3"> <select class="form-control input-sm" name="year"> <option>Year</option> <?php $years = range(2020, 1900); foreach ($years as $yr) { echo '<option value='.$yr.'>'.$yr.'</option>'; } ?> </select> </div> </h4> </div> </div> </div> <div class="form-group"> <div class="rows"> <div class="col-md-4"> <div class="col-lg-6"> <div class="radio"> <label><input checked id="optionsRadios1" name="optionsRadios" type="radio" value="Female">Female</label> </div> </div> <div class="col-lg-6"> <div class="radio"> <label><input id="optionsRadios2" name="optionsRadios" type="radio" value="Male"> Male</label> </div> </div> </div> </div> </div> <div class="form-group"> <div class="rows"> <div class="col-md-8"> <div class="col-lg-12"> <button class="btn btn-success btn-lg" type="submit">Register</button> </div> </div> </div> </div> </div> </div> </fieldset> </form> </div> </div><!-- /container --> </body> </html>
bootstrap可以到bootstrap官网下载。
全部代码可以到我的github页面查看 。
《bootstrap+php实现注册页面》有1条评论