bootstrap+php实现注册页面

2015年5月17日 发表评论 阅读评论

运维人员简单了解些web页面的编写是有必要的,后面几篇从记录一些算是学习或摘录的简单web页面的实现方法。本篇就结合bootstrap + php实现一个简单的用户注册的页面代码。具体实现效果如下图:

registration

一、代码结构

具体代码结构如下:

[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页面查看 。




本站的发展离不开您的资助,金额随意,欢迎来赏!

You can donate through PayPal.
My paypal id: itybku@139.com
Paypal page: https://www.paypal.me/361way

  1. 本文目前尚无任何评论.
  1. 2015年5月29日22:36 | #1