Cách tạo: Biểu mẫu đăng nhập mạng xã hội

Học cách sử dụng CSS để tạo biểu mẫu đăng nhập mạng xã hội.

Cách tạo biểu mẫu đăng nhập mạng xã hội

Bước 1 - Thêm HTML:

Sử dụng thẻ <form> để xử lý đầu vào. Bạn có thể tìm hiểu thêm thông tin liên quan trong hướng dẫn PHP của chúng tôi.

Sau đó thêm các điều khiển nhập hoặc liên kết mạng xã hội cho mỗi trường:

<div class="container">
  <form action="/action_page.php">
    <div class="row">
      <h2 style="text-align:center">Đăng nhập với Mạng xã hội hoặc thủ công</h2>
      <div class="vl">
        <span class="vl-innertext">hoặc</span>
      </div>
      <div class="col">
        <a href="#" class="fb btn">
          <i class="fa fa-facebook fa-fw"></i> Đăng nhập với Facebook
        </a>
        <a href="#" class="twitter btn">
          <i class="fa fa-twitter fa-fw"></i> Đăng nhập với Twitter
        </a>
        <a href="#" class="google btn">
          <i class="fa fa-google fa-fw"></i> Đăng nhập với Google+
        </a>
      </div>
      <div class="col">
        <div class="hide-md-lg">
          <p>Hoặc đăng nhập thủ công:</p>
        </div>
        <input type="text" name="username" placeholder="Tên đăng nhập" required>
        <input type="password" name="password" placeholder="Mật khẩu" required>
        <input type="submit" value="Đăng nhập">
      </div>
    </div>
  </form>
</div>
<div class="bottom-container">
  <div class="row">
    <div class="col">
      <a href="#" style="color:white" class="btn">Đăng ký</a>
    </div>
    <div class="col">
      <a href="#" style="color:white" class="btn">Quên mật khẩu?</a>
    </div>
  </div>
</div>

Bước 2 - Thêm CSS:

* {box-sizing: border-box}
/* Đặt phong cách cho container */
.container {
  position: relative;
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px 0 30px 0;
}
/* Đặt phong cách cho trường nhập liệu và nút liên kết */
input,
.btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 4px;
  margin: 5px 0;
  opacity: 0.85;
  display: inline-block;
  font-size: 17px;
  line-height: 20px;
  text-decoration: none; /* Xóa underline của liên kết */
}
input:hover,
.btn:hover {
  opacity: 1;
}
/* Thêm màu sắc phù hợp cho các nút Facebook, Twitter và google */
.fb {
  background-color: #3B5998;
  color: white;
}
.twitter {
  background-color: #55ACEE;
  color: white;
}
.google {
  background-color: #dd4b39;
  color: white;
}
/* Đặt lại phong cách cho nút submit */
input[type=submit] {
  background-color: #04AA6D;
  color: white;
  cursor: pointer;
}
input[type=submit]:hover {
  background-color: #45a049;
}
/* Lưu lại layout hai cột */
.col {
  float: left;
  width: 50%;
  margin: auto;
  padding: 0 50px;
  margin-top: 6px;
}
/* Xóa浮动 sau cột */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Đường thẳng dọc */
.vl {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  border: 2px solid #ddd;
  height: 175px;
}
/* Văn bản trong đường thẳng dọc */
.inner {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  border-radius: 50%;
  padding: 8px 10px;
}
/* Ẩn một số văn bản trên màn hình lớn và trung */
.hide-md-lg {
  display: none;
}
/* Hộp chứa dưới cùng */
.bottom-container {
  text-align: center;
  background-color: #666;
  border-radius: 0px 0px 4px 4px;
}
/* Lưu lại布局响应 - Khi độ rộng màn hình nhỏ hơn 650px, hai cột sẽ chồng lên nhau thay vì đặt song song */
@media screen and (max-width: 650px) {
  .col {
    width: 100%;
    margin-top: 0;
  }
  /* Ẩn đường thẳng dọc */
  .vl {
    display: none;
  }
  /* Hiện văn bản ẩn trên màn hình nhỏ */
  .hide-md-lg {
    display: block;
    text-align: center;
  }
}

Thử ngay

Trang liên quan

Giáo trình:Form HTML

Giáo trình:Form CSS