24 Signup Form Dành Cho Website

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é:

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.

24 Signup Form Dành Cho Website

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

HTML

CSS

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

Thiết Kế Signup Form Overlay Javascript

Thiết Kế Signup Form CSS3

Thiết Kế HTML5 Signup Form

Thiết Kế Interactive Sign Up Form

Thiết Kế Sign Up Form VueJS

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

Thiết Kế Sign Up Form ReactJS

Thiết Kế Sign Up Form Template

Thiết Kế Register Form

Thiết Kế Javascript Sign Up Form

Thiết Kế Sign Up Với Video

Thiết Kế Sign Up Form Template HTML

Thiết Kế Material Signup Form

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

Colorlib Reg Form v7

Colorlib Reg Form v8

Colorlib Reg Form v24

Colorlib Reg Form v12

Colorlib Reg Form v16

Colorlib Reg Form v20

Signup Form V08

Signup Form V01

Signup Form V02

Tổng kết:

CSS HTML Javascript Nguồn Lập Trình

Góc trả lời