Tạo form đăng nhập – đăng ký thành viên giống trang Facebook

Hôm bữa có một bạn trên Facebook đã hỏi mình về cách tạo form đăng nhập và đăng ký thành viên giống như trên Facebook. Hôm nay mình sẽ bê nguyên xi trang chủ của facebook về và cũng là một bài học hữu ích cho các bạn, có thể học cách sắp xếp cũng như trang trí các field sao cho đẹp mắt và gọn gàng bằng CSS3.

Xem Demo | Download

HTML

Như các bạn đã biết, trên facebook sẽ có 2 phần , 1 cho login và 1 cho đăng ký thành viên, và chúng được khéo léo sắp xếp theo cấu trúc html bên dưới.

 
<div id="facebook-Bar">
  <div id="facebook-Frame">
    <div id="logo"> <a href="https://thuthuatweb.net">thuthuatweb.net</a> </div>
    <div id="header-main-right">
      <div id="header-main-right-nav">
        <form method="post" action="" id="login_form" name="login_form">
          <table border="0" style="border:none">
            <tr>
              <td ><input type="text" tabindex="1"  id="email" placeholder="Email or Phone" name="email" class="inputtext radius1" value=""></td>
              <td ><input type="password" tabindex="2" id="pass" placeholder="Password" name="pass" class="inputtext radius1" ></td>
              <td ><input type="submit" class="fbbutton" name="login" value="Login" /></td>
            </tr>
            <tr>
              <td><label>
                  <input id="persist_box" type="checkbox" name="persistent" value="1" checked="1"/>
                  <span style="color:#ccc;">Keep me logged in</span></label></td>
              <td><label><a href="" style="color:#ccc; text-decoration:none">forgot your password?</a></label></td>
            </tr>
          </table>
        </form>
      </div>
    </div>
  </div>
</div>
 
<div class="loginbox radius">
  <h2 style="color:#141823; text-align:center;">Welcome to Facebook</h2>
  <div class="loginboxinner radius">
    <div class="loginheader">
      <h4 class="title">Connect with friends and the world around you.</h4>
    </div>
     
    <div class="loginform">
      <form id="login" action="" method="post">
        <p>
          <input type="text" id="firstname" name="firstname" placeholder="First Name" value="" class="radius mini" />
          <input type="text" id="lastname" name="lastname" placeholder="Last Name" value="" class="radius mini" />
        </p>
        <p>
          <input type="text" id="email" name="email" placeholder="Your Email" value="" class="radius" />
        </p>
        <p>
          <input type="text" id="remail" name="remail" placeholder="Re-enter Email" class="radius" />
        </p>
        <p>
          <input type="password" id="password" name="password" placeholder="New Password" class="radius" />
        </p>
        <p>
          <button class="radius title" name="signup">Sign Up for Facebook</button>
        </p>
      </form>
    </div>
     
  </div>
   
</div>
 

CSS

Và không có gì phải giấu diếm ở đây cả, vì toàn bộ đoạn css bên dưới sẽ giúp các bạn định dạng form theo đúng nguyên bản facebook.

html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend {
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h2 { 
  font-size: 30px; 
  line-height:38px; 
  font-weight:normal; 
}

.loginbox {
 background: #FBFCFD; 
 padding: 10px; awidth: 490px; 
 margin: 4% auto 0 auto; 
 position: relative; 
}

.loginboxinner {
  background: #FBFCFD; 
  padding: 5px; position: relative; 
  border: 1px solid #FBFCFD;
  -moz-box-shadow: inset 0 1px 0 #FBFCFD; 
  -webkit-box-shadow: inset 0 1px 0 #FBFCFD; 
  box-shadow: inset 0 1px 0 #FBFCFD;
}

.loginheader { height: 20px; }

.loginform { margin: 4px auto; text-align:center; }

.loginbox h1 { 
  font-size: 30px; 
  letter-spacing: 1px; 
  color: #555; 
  font-weight: normal; 
  padding-top: 10px; 
}

.loginbox p { margin: 7px 0 5px 0; }

.loginbox label { 
  display: block; 
  color: #666; 
  letter-spacing: 1px; 
  font-size: 18px; 
}

.loginbox input.mini { awidth:195px; }

.loginbox input {
  padding: 12px 10px; 
  color: #ccc;
  font-family: Arial, Helvetica, sans-serif; 
  margin-top: 8px; 
  font-size: 15px; 
  border: 1px solid #ccc; 
  awidth: 420px;  
  outline: none;
}

.loginbox button {
  background: #5870A8; 
  background-image:-webkit-linear-gradient(top, #637BAD, #4F67A4); 
  padding: 10px 20px; 
  font-size: 18px; 
  border: 1px solid #1D3871; 
  letter-spacing: 1px; color: #fff; awidth: 440px; 
  line-height:30px; font-family:  'Helvetica Neue', Helvetica, Arial, sans-serif;
  -moz-box-shadow: 1px 1px 3px #1D3871; 
  -webkit-box-shadow: 1px 1px 3px #1D3871; 
  box-shadow: 1px 1px 3px #1D3871; 
  cursor: pointer;
}

.radius { 
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px; 
  border-radius: 5px; 
}

.radius1 { 
  -moz-border-radius: 3px; 
  -webkit-border-radius: 3px; 
  border-radius: 3px; 
}

.title { 
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
  color:#8E989E; line-height:28px; 
  font-weight:normal; 
  text-align:center; 
  font-size:16px; 
}

@media screen and (max-awidth: 430px) {

  body { font-size: 11px; }
  button, input, select, textarea { font-size: 11px; }

  .loginbox { awidth: auto; margin: 10px; }
  .loginbox input { awidth: 95%; }
  .loginbox button { awidth: 100%; }
}

#facebook-Bar {
  background:#45619D;
  border-bottom: 1px solid #0053A6;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.52);
  min-awidth: 1000px;
  awidth: 100%;
  z-index: 1000;
}

#facebook-Frame {
  margin-left:auto;
  margin-right:auto;
  max-awidth:1000px;
  height:70px;
  display:block;
}

/*-------LOGO-----------*/
#logo {
  float: left;
  height: 70px;
  position: relative;
  awidth: 160px;
}

#logo a {
  position: absolute;
  top: 20px;
  font-size:23px; font-weight:bold; color:#FFF;
  text-decoration:none;
  font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

/*-------Login-----------*/
#header-main-right {
  float: right;
  height: 68px;
  position: relative;
  top:5px;
}

#header-main-right-nav {
  padding: 4px 6px 4px 4px;
  position: absolute;
  right: 0;
}

#login_form .inputtext {
  background-color: #FFFFFF;
  height:16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  margin: 0;
  padding: 5px 8px 5px 8px;
  awidth: 166px;
  border:1px solid #3A518A;
}

#login_form .inputtext:hover {
  border-color: #A0A0A0 #B9B9B9 #B9B9B9;
  border-image: none;
  border-style: solid;
  border-awidth: 1px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
}

#login_form table tr td {
  padding: 0 0 0 5px;
}

#login_form table tr td label {
  color: #fff;
  cursor: pointer;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: normal;
  padding-left: 1px;
  text-align: left;
  vertical-align: middle;
}

.fbbutton { 
  border:1px solid #1D3871; 
  awidth:94px; 
  background-image:-webkit-linear-gradient(top, #637BAD, #4F67A4); 
  font-size:14px; 
  line-height:25px; 
  font-weight:normal; 
  color:#fff; 
}

Bài viết này chỉ mang tính chất tham khảo, mong là các bạn có thể từ nó mà sáng tạo thêm những mẫu form cho website hoặc blog của mình.

Chuyên Mục: Css

Bài viết được đăng bởi webmaster