Terms & Privacy.
Đăng kýHướng dẫn tạo form bằng javascript
Bạn đã có tài khoản rồi? Đăng nhập.
Bước 2: Tạo file style.css để trang trí Form trông bắt mắt hơn
body { font-family: Arial, sans-serif; background-color: #cecece; } a { color: #00bd00; } * { box-sizing: border-box; } .register { width: 500px; padding: 16px; margin: 0 auto; background-color: white; } input[type=text], input[type=password] { width: 100%; padding: 15px; margin: 5px 0 22px 0; display: inline-block; border: none; background: #f1f1f1; } input[type=text]:focus, input[type=password]:focus { background-color: #ddd; outline: none; } hr { border: 1px solid #f1f1f1; margin-bottom: 25px; } .submit { background-color: #0900bd; color: white; padding: 15px 18px; margin: 8px 0; border: none; cursor: pointer; width: 100%; opacity: 0.9; } .submit:hover { opacity: 1; } .login { background-color: #ffffff; text-align: center; }
Bước 3: Tạo file kiemtra.js để bắt lỗi form và kiểm tra các giá trị người dùng đã nhập vào chưa
function validate[] { var u = document.getElementById["username"].value; var p1 = document.getElementById["password"].value; var p2 = document.getElementById["password-repeat"].value; if[u== ""] { alert["Vui lòng nhập tên!"]; return false; } if[p1 == ""] { alert["Vui lòng nhập mật khẩu!"]; return false; } if[p2 == ""] { alert["Vui lòng xác minh mật khẩu!"]; return false; } alert["Xin hãy điền đúng thông tin!"] return true; }
Giải thích:
Thuật toán sẽ thực hiện từng bước như sau:
Nếu tài khoản Username trong Form đăng ký trống thì JavaScript dùng Alert để cảnh báo.
Kết luận: Bài viết này đã hướng dẫn bạn cách tạo Form đăng ký bằng JavaScript cực kỳ đơn giản phải không nào. Ngay sau khi đọc xong bạn có thể bắt tay vào thực hành để kiểm tra kết quả như thế nào và đừng quên đọc thêm JavaScript là gì để hiểu rõ hơn cách thức hoạt động của ngôn ngữ lập trình web được nhiều người ưa chuộng này!
Bạn cũng có thể kết hợp Form JavaScript cùng với PHP. Đọc bài Cách tạo Form đăng ký bằng PHP và MySQL để được hướng dẫn chi tiết.