04/10/2018, 20:11

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 ...

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.

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

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.

Tags: css3 login form Registration Page

Chuyên Mục: Css

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

Bài liên quan

Tạo form đăng nhập phong cách Google với Bootstrap

Cách đây vài hôm, mình có đăng một bài viết là Tạo form đăng nhập – đăng ký thành viên giống trang Facebook . Hôm nay mình sẽ tiếp tục mang đến cho các bạn thêm một mẫu form đăng nhập được bắt chước từ gã khổng lồ Google. Bài viết này sử dụng Bootstrap framewokd để tạo hiệu ứng và sắp xếp ...

Vũ Văn Thanh viết 20:12 ngày 04/10/2018

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 ...

Trần Trung Dũng viết 20:11 ngày 04/10/2018

Thiết kế mẫu form đăng ký (sign up) bằng CSS

Với mẫu thiết kế mà mình chia sẻ trong bài viết này sẽ giúp các bạn có thêm một lựa chọn cho những trang đăng ký với nhiều dữ liệu cần thu nhập từ người dùng. Mẫu form này rất nhỏ gọn và đơn giản. Xem Demo | Download HTML Giả sử chúng ta có nhiều thông tin cho người dùng đăng ký ...

Vũ Văn Thanh viết 20:11 ngày 04/10/2018

Tạo trang đăng ký thành viên bằng PHP/MySQL

Bạn cần tạo thành viên cho web của mình, nếu bạn chưa có kinh nghiệm gì về PHP và MySQL thì bài viết này sẽ giúp bạn làm một trang đăng ký một cách hoàn chỉnh với từng bước một. Bước 1 : Tạo database và table Trong ví dụ này chúng ta sẽ đặt tên database là ” simple_login ...

Bùi Văn Nam viết 17:53 ngày 04/10/2018

Hướng dẫn xây dựng chức năng đăng ký thành viên với php và mysql

Tìm hiểu session và cookie trong php Hướng dẫn kết nối cơ sở dữ liệu MYSQL sử dụng MYSQLI Tìm hiểu hàm isset() và empty() trong php Xây dựng chức năng đăng ký thành viên với php và mysql, đây là chức năng đơn giản rất hay được sử dụng dùng để kiểm tra username và mật khẩu bị trùng khi ...

Bùi Văn Nam viết 17:20 ngày 04/09/2018
0