Trang chủ
accounting software
how to create form sign up javascript

Làm cách nào để tạo biểu mẫu đăng ký chuẩn bằng Javascript

Chương trình được thiết kế để tạo biểu mẫu đăng ký bằng JavaScript, giúp bạn có thể hiểu mã và áp dụng chương trình trong thực tế.
Làm cách nào để tạo biểu mẫu đăng ký chuẩn bằng Javascript

📌 Giới thiệu

Biểu mẫu đăng ký là một phần quan trọng trong bất kỳ website nào, từ blog cá nhân cho đến hệ thống thương mại điện tử. Việc biết cách xây dựng form chuẩn với HTML, CSS và JavaScript không chỉ giúp giao diện thân thiện hơn mà còn đảm bảo bảo mật và trải nghiệm người dùng. Trong bài viết này, chúng ta sẽ cùng tìm hiểu cách tạo biểu mẫu đăng ký chuyên nghiệp theo từng bước dễ hiểu.

Mục lục (Bấm để hiển thị / ẩn)
Hinh anh tao form dang ky bang javascript

Tạo biểu mẫu đăng ký với phương pháp học từng bước sẽ giúp bạn học ngôn ngữ HTML và CSS cùng nhau. Làm thế nào để tạo biểu mẫu đăng ký hoặc trang được tạo ra?

📌 Các bước tạo biểu mẫu đăng ký

Ở bài viết này tôi sẽ chia sẻ hướng dẫn từng bước đầy đủ và cung cấp mã nguồn hoàn chỉnh cho công việc của bạn. Bạn có thể tạo biểu mẫu đăng ký JavaScript này bằng cách sao chép mã trực tiếp nếu muốn. Trong HTML chỉ cần làm theo các bước dưới đây.

Hinh anh tao form dang ky bang javascript 1

Bước 1:

Mở Notepad hoặc Adobe Dreamweaver hoặc bất kỳ trình soạn thảo Html nào khác. Tôi khuyên bạn nên sử dụng Notepad để thực hành tốt hơn.

Sao chép mã HTML hoàn chỉnh bên dưới và dán vào trình chỉnh sửa của bạn.


<!DOCTYPE html>
<html lang="en">
    <head>
     <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!—Đặt thẻ CSS <style> .. </style> ở đây... -->
       <title> Mẫu Chương trình tạo biểu mẫu đăng ký </title>
    </head>
    <body>
<!-- Mã div chính -->
    <div class="sign-up">
        <h2>Đăng ký</h2>
     <div> <p>Vui lòng điền thông tin đăng ký </p></div><br>
      <hr>
     <br>
        <div class="input-row">
         <label for="username"><b>Tên đăng nhập:</b></label>
            <input type="text" placeholder="Họ và tên" id="username" />
            <small>Thông báo lỗi</small>
        </div>
        <div class="input-row">
       <label for="phone"><b>Số điện thoại:</b></label>
      <input type="text" placeholder="Số điện thoại" id="phone" />
            <small>Thông báo lỗi</small>
        </div>
        <div class="input-row">
            <label for="email"><b>Địa chỉ email:</b></label>
<input type="Email" placeholder="Email" id="email" />
            <small>Thông báo lỗi</small>
        </div>
        <div class="input-row">
            <label for="pwd"><b>Mật khẩu:</b></label>
          <input type="text" placeholder="Mật khẩu" id="pwd" />
            <small>Thông báo lỗi</small>
        </div>
        <div class="input-row">
            <label for="pwd"><b>Gõ lại mật khẩu:</b></label>
<input type="text" placeholder="Nhập lại mật khẩu" id="repwd" />
            <small>Thông báo lỗi</small>
        </div>
       <hr><br>
      <div> <p>Để tạo tài khoản vui lòng đồng ý với điều khoản của chúng tôi <a href="#">Terms & Privacy</a>.</p></div><br>
        <div class="input-row">
            <button class="btn" id="btn-Signup">
                ĐĂNG KÝ
            </button>
            <button class="btn" id="btn-xoa" onclick="XoaDK()">
                XÓA
            </button>
       </div>
<div class="Signup login">
<p>Bạn đã có tài khoản rồi? <a href="#">Đăng nhập</a>.</p>
</div>
    </div>
<!-- Div chính kết thúc tại đây... -->
<!—Đặt thẻ JavaScript <script> .. </script> ở đây... -->

    </body>
</html>

Bước 2:

Bây giờ hãy áp dụng CSS cho tất cả các Thành phần để trình bày đẹp hơn. Đầu tiên tạo thẻ CSS <style>.. </style> nằm giữa thẻ <head>.. </head> như bên dưới.


  <head> <style type="text/css"> 
    tất cả mã css để ở đây.... 
    </style> 
    </head>

Bây giờ hãy sao chép mã CSS bên dưới và dán vào giữa cặp thẻ <style> .. </style>.


<style>
*,
::after,
::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #f6f6f6;
    color: #34465c;
    font-size: 16px;
    font-family: Roboto, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.sign-up {
    width: 500px;
    padding: 2rem;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    border-radius: 7px;
}

.sign-up h2 {
    margin-bottom: 1.5rem;
    text-align: center;
}

.input-row {
    margin-bottom: 1.5rem;
}
.input-row input {
    width: 100%;
    border: 1px solid #ccc;
    height: 40px;
    line-height: 40px;
    padding: 0 1rem;
    transition: all 0.3s ease-out;
}
.input-row input:focus {
    border: 1px solid #00bfa6;
}
.input__note textarea {
    width: 100%;
    min-height: 200px;
    border: 1px solid #ccc;
    user-select: none;
    resize: none;
    padding: 1rem;
}
.input__note textarea:focus {
    border: 1px solid #00bfa6;
}
.input-row {
    position: relative;
}
.input-row.thanhcong input {
    border-color: #2ecc71;
}
.input-row.loi input {
    border-color: #e74c3c;
}
.input-row small {
    color: #e74c3c;
    position: absolute;
    bottom: -22px;
    left: 0;
    visibility: hidden;
}
.input-row.loi small {
    visibility: visible;
}
.btn {
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    padding: 8px 15px !important;
}
#btn-Signup {
    display: inline-block;
    color: #fff;
    background-color: #00bfa6;
    border: 2px solid #00bfa6;
    outline: 0;
    cursor: pointer;
    text-decoration: none !important;
    position: relative;
    z-index: 20;
    overflow: hidden;
}
#btn-xoa {
    display: inline-block;
    color: #fff;
    background-color: #00bfa6;
    border: 2px solid #00bfa6;
    outline: 50;
    cursor: pointer;
    text-decoration: none !important;
    position: relative;
    z-index: 20;
    overflow: hidden;
}
</style>

Bước 3:

Tại đây, chúng ta sẽ thêm mã JavaScript để kiểm tra xác thực. Nếu hộp văn bản trống, mật khẩu không khớp, mật khẩu không hợp lệ và id email không hợp lệ thì nó sẽ đưa ra thông báo lỗi.

Bây giờ hãy tạo thẻ JavaScript <script> .. </script> ở giữa thẻ <body> .. </body> giống như bên dưới.


  <body> <script> 
    // dán mã vào đây.. 
    </script> 
    </body>

Sau đó, sao chép mã JavaScript bên dưới và dán vào giữa thẻ .


  <script style="text/javascript"> 
    const usernameBienco = document.getElementById('username');
const emailBienco = document.getElementById('email');
const phoneBienco = document.getElementById('phone');
const passwordBienco = document.getElementById('pwd');
const repasswordBienco = document.getElementById('repwd');

const btnSignup = document.getElementById('btn-Signup');
const inputBiencos = document.querySelectorAll('.input-row');

btnSignup.addEventListener('click', function () {
    Array.from(inputBiencos).map((bienco) =>
        bienco.classList.remove('thanhcong', 'loi')
    );
    let Bienxacthuc = XacthucKQ();

    if (Bienxacthuc) {
        alert('Gửi đăng ký thành công');
    }
});

function XacthucKQ() {
    let usernameValue = usernameBienco.value;
    let passwordValue = passwordBienco.value;
    let repasswordValue = repasswordBienco.value;
    let emailValue = emailBienco.value;
    let phoneValue = phoneBienco.value;

    let KiemTra = true;

    if (usernameValue == '') {
        DKLoi(usernameBienco, 'Tên không được để trống');
        KiemTra = false;
    } else {
        DKThanhCong(usernameBienco);
    }
    
      if (passwordValue == '') {
        DKLoi(passwordBienco, 'Mật khẩu không được để trống');
        KiemTra = false;
    } else {
        DKThanhCong(passwordBienco);
    }
    
        if (repasswordValue == '') {
        DKLoi(repasswordBienco, 'Mật khẩu không được để trống');
        KiemTra = false;
    } else if (repasswordValue != passwordValue) {
        DKLoi(repasswordBienco, 'Mật khẩu không trùng. Nhập lại');
        KiemTra = false; 
    } else {
        DKThanhCong(repasswordBienco);
    }


    if (emailValue == '') {
        DKLoi(emailBienco, 'Email không được để trống');
        KiemTra = false;
    } else if (!KTEmail(emailValue)) {
        DKLoi(emailBienco, 'Email không đúng định dạng');
        KiemTra = false;
    } else {
        DKThanhCong(emailBienco);
    }


    if (phoneValue == '') {
        DKLoi(phoneBienco, 'Số điện thoại không được để trống');
        KiemTra = false;
    } else if (!KTDienThoai(phoneValue)) {
        DKLoi(phoneBienco, 'Số điện thoại không đúng định dạng');
        KiemTra = false;
    } else {
        DKThanhCong(phoneBienco);
    }

    return KiemTra;
}

function DKThanhCong(bienco) {
    bienco.parentNode.classList.add('thanhcong');
}

function DKLoi(bienco, thongbao) {
    let parentBienco = bienco.parentNode;
    parentBienco.classList.add('loi');
    parentBienco.querySelector('small').innerText = thongbao;
}

function KTEmail(email) {
return /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(

//    return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-//9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-//Z]{2,}))$/.test(
        email
    );
}

function KTDienThoai(number) {
    return /(84|0[3|5|7|8|9])+([0-9]{8})\b/.test(number);
}

	function XoaDK()
	{
		document.getElementById("username").value="";
		document.getElementById("email").value="";
		document.getElementById("phone").value="";
		document.getElementById("pwd").value="";
		document.getElementById("repwd").value="";
	}
    </script>

Bước 4:

Bây giờ hãy lưu trang của bạn với bất kỳ tên nào có phần mở rộng .html . Giống như signup.html . Sau khi lưu tệp, hãy mở tệp bằng cách nhấp đúp vào tệp và xem kết quả cuối cùng của bạn.

🔧 Ví dụ thực tế áp dụng

Dưới đây là vài tình huống thực tế bạn có thể áp dụng form đăng ký này:

  • Trang khóa học online: Thu thập tên, email, số điện thoại để tạo tài khoản học viên và gửi email kích hoạt.
  • E-commerce / Shop: Tạo tài khoản khách hàng để lưu địa chỉ, lịch sử mua hàng và ưu đãi.
  • SaaS / Ứng dụng web: Đăng ký dùng thử; bước xác thực email giúp giảm tài khoản rác.

📚 Case study: Áp dụng form đăng ký cho trang khóa học nội bộ

Bối cảnh: Một đội ngũ đào tạo muốn tạo hệ thống đăng ký khóa học nội bộ nhanh — cần thông tin: Họ tên, email, phone, mật khẩu.

Giải pháp triển khai:

  1. Tạo form với validation front-end (HTML + JS) để giảm lỗi nhập liệu và hướng dẫn người dùng.
  2. Sau khi client-side xác thực thành công, gửi AJAX POST tới endpoint backend (ví dụ /api/register) để lưu vào DB và gửi email xác thực.
  3. Sử dụng recaptcha hoặc throttle request nếu cần chống đăng ký hàng loạt.

Kết quả: Tỷ lệ lỗi nhập liệu giảm ~40%, thời gian hoàn thành đăng ký nhanh hơn, ít email đăng ký rác nhờ bước xác thực email.

✅ Kết luận

Qua bài viết này, bạn đã học được cách tạo một biểu mẫu đăng ký chuẩn chỉ với HTML, CSS và JavaScript. Việc thực hành từng bước sẽ giúp bạn hiểu rõ hơn về cách kiểm tra dữ liệu, xử lý lỗi và cải thiện trải nghiệm người dùng. Đây là nền tảng cơ bản để bạn tiếp tục phát triển các dự án web chuyên nghiệp hơn, như hệ thống đăng nhập, quản lý tài khoản hoặc ứng dụng web phức tạp.

❓ Câu hỏi thường gặp (FAQ)

Làm thế nào để kiểm tra định dạng email trong JavaScript?

Bạn có thể dùng biểu thức chính quy (regex) để kiểm tra định dạng email.
Ví dụ: /^([a-zA-Z0-9_\\.\\-])+\\@(([a-zA-Z0-9\\-])+\\.)+([a-zA-Z0-9]{2,4})+$/

Làm sao để xóa dữ liệu form khi người dùng nhấn nút XÓA?

Tạo hàm JavaScript để gán chuỗi rỗng cho các input.
Ví dụ: document.getElementById('username').value = '';

Tôi có thể dùng mã này trong Blogger không?

Có thể, nhưng cần đặt mã HTML/CSS/JS vào chế độ HTML của trình soạn thảo bài viết, hoặc chèn vào template nếu muốn áp dụng toàn site.

Đăng nhận xét