Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
24 Signup Form Dành Cho Website

24 Signup Form Dành Cho Website


Ngày 28 Tháng 1 Năm 2021

Bài viết hôm nay chúng ta sẽ đi vào tìm hiểu cách tạo một signup form cơ bản và các ví dụ thực tế để giúp bạn có thể dễ dàng tự xây dựng một form đăng ký đẹp mắt dành cho website của mình bằng HTML, CSS và Javascript nhé.

Cách Tạo Form Đăng Ký Cơ Bản Bằng HTML CSS

Trong phần này chúng ta sẽ đi vào tìm hiểu cách tạo form đăng ký bằng HTML CSS cơ bản và tinh chỉnh nó để có thể hiển thị được trên nhiều màn hình thiết bị khác nhau thông qua đoạn mã bên dưới nhé:

HTML

<form action="" >
  <div class="container">
    <h1>Form Đăng Ký</h1>
    <p>Xin hãy nhập biểu mẫu bên dưới để đăng ký.</p>
    <hr>
    <label for="email"><b>Email</b></label>
    <input type="text" placeholder="Nhập Email" name="email" required>
    <label for="psw"><b>Mật Khẩu</b></label>
    <input type="password" placeholder="Nhập Mật Khẩu" name="psw" required>
    <label for="psw-repeat"><b>Nhập Lại Mật Khẩu</b></label>
    <input type="password" placeholder="Nhập Lại Mật Khẩu" name="psw-repeat" required>
    <label>
      <input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Nhớ Đăng Nhập
    </label>
    <div class="clearfix">
      <button type="submit" class="signupbtn">Sign Up</button>
    </div>
  </div>
</form>

CSS

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
* {box-sizing: border-box}
body{
  font-family: 'Noto Sans JP', sans-serif;
}
h1, label{
  color: DodgerBlue;
}
  input[type=text], input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: none;
  width:100%;
  resize: vertical;
  padding:15px;
  border-radius:15px;
  border:0;
  box-shadow:4px 4px 10px rgba(0,0,0,0.2);
}
input[type=text]:focus, input[type=password]:focus {
  outline: none;
}
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}
button {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}
button:hover {
  opacity:1;
}
.cancelbtn {
  padding: 14px 20px;
  background-color: #f44336;
}
.signupbtn {
  float: left;
  width: 100%;
  border-radius:15px;
  border:0;
  box-shadow:4px 4px 10px rgba(0,0,0,0.2);
}
.container {
  padding: 16px;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

Và kết quả bạn xem hình ảnh dưới đây nhé:

Form Đăng Ký Cơ Bản Bằng HTML CSS

Còn dưới đây là kết quả trên codepen nhé!

See the Pen Login Form HTML CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Các Ví Dụ Về SignUp Form CSS Javascript

Trước khi đi vào ví dụ thì mình có một số chú ý sau là để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x hay nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Nếu file là SCSS thì bạn có thể chuyển sang CSS ở đây nhé : SCSS to CSS. Nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha.

Thiết Kế Signup Form Overlay Javascript

Signup Form Overlay Javascript

Kết quả bạn xem bên dưới nhé!

See the Pen Overlay Signup Form by Chris Deacy (@chrisdothtml) on CodePen.

Nguồn

Thiết Kế Signup Form CSS3

Signup Form CSS3

Kết quả bạn xem bên dưới nhé!

See the Pen Creative SignUp Form by Aigars Silkalns (@colorlib) on CodePen.

Nguồn

Thiết Kế HTML5 Signup Form

HTML5 Signup Form

Kết quả bạn xem bên dưới nhé!

See the Pen HTML5 Form by Alexandru Pora (@axpro) on CodePen.

Nguồn

Thiết Kế Interactive Sign Up Form

Interactive Sign Up Form

Kết quả bạn xem bên dưới nhé!

See the Pen Interactive Sign Up Form by Riccardo Pasianotto (@rkpasia) on CodePen.

Nguồn

Thiết Kế Sign Up Form VueJS

Sign Up Form VueJS

Kết quả bạn xem bên dưới nhé!

See the Pen Sign Up Form by Sicontis (@Sicontis) on CodePen.

Nguồn

Thiết Kế Sign Up Form Với Social Button

Sign Up Form Với Social Button

Kết quả bạn xem bên dưới nhé!

See the Pen Daily UI #001: Sign Up by Fabio Ottaviani (@supah) on CodePen.

Nguồn

Thiết Kế Sign Up Form ReactJS

Sign Up Form ReactJS

Kết quả bạn xem bên dưới nhé!

See the Pen React signup form example by Mikhail Proniushkin (@mikepro4) on CodePen.

Nguồn

Thiết Kế Sign Up Form Template

Sign Up Form Template

Kết quả bạn xem bên dưới nhé!

See the Pen Sign Up Form by José Carneiro (@josecarneiro) on CodePen.

Nguồn

Thiết Kế Register Form

Register Form

Kết quả bạn xem bên dưới nhé!

See the Pen Register Form by Gerta Xhepi (@xhepigerta) on CodePen.

Nguồn

Thiết Kế Javascript Sign Up Form

Javascript Sign Up Form

Kết quả bạn xem bên dưới nhé!

See the Pen Minimal sign up form by Alex Cican (@alexcican) on CodePen.

Nguồn

Thiết Kế Sign Up Với Video

Sign Up Với Video

Kết quả bạn xem bên dưới nhé!

See the Pen Signup No. 2 - Video by Ricky Eckhardt (@rickyeckhardt) on CodePen.

Nguồn

Thiết Kế Sign Up Form Template HTML

Sign Up Form Template HTML

Kết quả bạn xem bên dưới nhé!

See the Pen #CodePenChallenge - Sign up, love (w/ dynamic styles) by Rafael Goulart (@faelplg) on CodePen.

Nguồn

Thiết Kế Material Signup Form

Material Signup Form

Kết quả bạn xem bên dưới nhé!

See the Pen Minimal Material Signup Form by Shane Geach (@shane-geach) on CodePen.

Nguồn

Thiết Kế Signup Form Với Hình Ảnh

Signup Form Với Hình Ảnh

Kết quả bạn xem bên dưới nhé!

See the Pen Cupcake Co. Sign-up form by Kholoud Ameen (@kholoud840) on CodePen.

Nguồn

Colorlib Reg Form v7

Colorlib Reg Form v7

Demo

Nguồn Download

Colorlib Reg Form v8

Colorlib Reg Form v8

Demo

Nguồn Download

Colorlib Reg Form v24

Colorlib Reg Form v24

Demo

Nguồn Download

Colorlib Reg Form v12

Colorlib Reg Form v12

Demo

Nguồn Download

Colorlib Reg Form v16

Colorlib Reg Form v16

Demo

Nguồn Download

Colorlib Reg Form v20

Colorlib Reg Form v20

Demo

Nguồn Download

Signup Form V08

Signup Form V08

Demo

Nguồn Download

Signup Form V01

Signup Form V01

Demo

Nguồn Download

Signup Form V02

Signup Form V02

Demo

Nguồn Download

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những signup form hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Load WooCommerce Stores in 249ms!