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

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?

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

Đăng nhận xét