Hướng dẫn tạo form bằng javascript

Xin chào mọi người tiếp tục Series hướng dẫn tạo trang web bằng HTML và CSS. Hôm nay mình sẽ hướng dẫn bạn cách tạo form đăng ký bằng JavaScript để bắt lỗi form (validate form javascript).

Nội dung chính Show

Video học lập trình mỗi ngày
See demo: Here
See demo: Here
javascript
See demo:
Here

Giúp kiểm tra Form hợp lệ xem người dùng đã điền đầy đủ thông tin chưa, nếu chưa thì không thực hiện. Với đoạn code
JavaScript đăng ký thành viên sẽ kiểm tra Input bằng JavaScript khá đơn giản dễ hiểu mời bạn cùng theo dõi.

JavaScript là ngôn ngữ lập trình Frond end chính vì thế bạn cần phải nghiên cứu nhiều về nó. Dưới đây là từng bước xây dựng Form và dùng lệnh Js để kiểm tra.

Để cho dễ hiểu bạn sẽ phải tạo cho mình 3 file lần lượt là dangky.html, style.css và kiemtra.js. Ba tập tin này bạn sẽ đặt trong cùng một thư mục.

Bước 1: Tạo Form đăng ký thành viên
dangky.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<!-- Nhúng file CSS -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Nhúng file JavaScript -->
<script language="javascript" src="kiemtra.js"></script>
<form action="" method="POST" onsubmit="return validate()">
<div class="register">
<h2>Đăng ký</h2>
<p>Vui lòng điền thông tin để đăng ký</p>
<hr>
<label for="username"><b>Tên đăng nhập</b></label>
<input type="text" placeholder="Họ và tên" name="username" id="username">
<label for="password"><b>Mật khẩu</b></label>
<input type="password" placeholder="******" name="password" id="password">
<label for="password-repeat"><b>Nhập lại mật khẩu</b></label>
<input type="password" placeholder="******" name="password-repeat" id="password-repeat">
<hr>
<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>
<button type="submit" class="submit">Đăng ký</button>
</div>
<div class="register login">
<p>Bạn đã có tài khoản rồi? <a href="#">Đăng nhập</a>.</p>
</div>
</form>
</body>
</html>

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.

Nội dung bài viết

Tóm Tắt

Video học lập trình mỗi ngày

Chỉ với những dòng code css và javascript đã tạo nên một form đăng ký và đăng nhập vô cùng độc đáo và tôi
nghĩ các bạn cũng nên tham khảo và biết đâu một ngày gần đây các bạn lại sử dụng chúng…
Mẫu form đăng ký và đăng nhập đơn giản sử dụng css và javascript.

Các bạn theo dõi các file ở dưới.

See demo: Here

index.html

<h2>Sign in/up Form</h2>
    <div class="container" id="container">
        <div class="form-container sign-up-container">
            <form action="#">
                <h2>Create Account</h2>
                <div class="social-container">
                    <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
                    <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
                </div>
                <span>or use your email for registration</span>
                <input type="text" placeholder="Name" />
                <input type="email" placeholder="Email" />
                <input type="password" placeholder="Password" />
                <button>Sign Up</button>
            </form>
        </div>
        <div class="form-container sign-in-container">
            <form action="#">
                <h2>Sign in</h2>
                <div class="social-container">
                    <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
                    <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
                </div>
                <span>or use your account</span>
                <input type="email" placeholder="Email" />
                <input type="password" placeholder="Password" />
                <a href="#">Forgot your password?</a>
                <button>Sign In</button>
            </form>
        </div>
        <div class="overlay-container">
            <div class="overlay">
                <div class="overlay-panel overlay-left">
                    <h2>Welcome Back!</h2>
                    <p>To keep connected with us please login with your personal info</p>
                    <button class="ghost" id="signIn">Sign In</button>
                </div>
                <div class="overlay-panel overlay-right">
                    <h2>Hello, Friend!</h2>
                    <p>Enter your personal details and start journey with us</p>
                    <button class="ghost" id="signUp">Sign Up</button>
                </div>
            </div>
        </div>
    </div>

See demo: Here

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');

* {
    box-sizing: border-box;
}

body {
    background: #f6f5f7;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    height: 100vh;
    margin: -20px 0 50px;
}

h2 {
    font-weight: bold;
    margin: 0;
}

h2 {
    text-align: center;
}

p {
    font-size: 14px;
    font-weight: 100;
    line-height: 20px;
    letter-spacing: 0.5px;
    margin: 20px 0 30px;
}

span {
    font-size: 12px;
}

a {
    color: #333;
    font-size: 14px;
    text-decoration: none;
    margin: 15px 0;
}

button {
    border-radius: 20px;
    border: 1px solid #FF4B2B;
    background-color: #FF4B2B;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: bold;
    padding: 12px 45px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: transform 80ms ease-in;
}

button:active {
    transform: scale(0.95);
}

button:focus {
    outline: none;
}

button.ghost {
    background-color: transparent;
    border-color: #FFFFFF;
}

form {
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 50px;
    height: 100%;
    text-align: center;
}

input {
    background-color: #eee;
    border: none;
    padding: 12px 15px;
    margin: 8px 0;
    width: 100%;
}

.container {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
        0 10px 10px rgba(0, 0, 0, 0.22);
    position: relative;
    overflow: hidden;
    width: 768px;
    max-width: 100%;
    min-height: 480px;
}

.form-container {
    position: absolute;
    top: 0;
    height: 100%;
    transition: all 0.6s ease-in-out;
}

.sign-in-container {
    left: 0;
    width: 50%;
    z-index: 2;
}

.container.right-panel-active .sign-in-container {
    transform: translateX(100%);
}

.sign-up-container {
    left: 0;
    width: 50%;
    opacity: 0;
    z-index: 1;
}

.container.right-panel-active .sign-up-container {
    transform: translateX(100%);
    opacity: 1;
    z-index: 5;
    animation: show 0.6s;
}

@keyframes show {

    0%,
    49.99% {
        opacity: 0;
        z-index: 1;
    }

    50%,
    100% {
        opacity: 1;
        z-index: 5;
    }
}

.overlay-container {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: transform 0.6s ease-in-out;
    z-index: 100;
}

.container.right-panel-active .overlay-container {
    transform: translateX(-100%);
}

.overlay {
    background: #FF416C;
    background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C);
    background: linear-gradient(to right, #FF4B2B, #FF416C);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 0;
    color: #FFFFFF;
    position: relative;
    left: -100%;
    height: 100%;
    width: 200%;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

.container.right-panel-active .overlay {
    transform: translateX(50%);
}

.overlay-panel {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 40px;
    text-align: center;
    top: 0;
    height: 100%;
    width: 50%;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

.overlay-left {
    transform: translateX(-20%);
}

.container.right-panel-active .overlay-left {
    transform: translateX(0);
}

.overlay-right {
    right: 0;
    transform: translateX(0);
}

.container.right-panel-active .overlay-right {
    transform: translateX(20%);
}

.social-container {
    margin: 20px 0;
}

.social-container a {
    border: 1px solid #DDDDDD;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0 5px;
    height: 40px;
    width: 40px;
}

footer {
    background-color: #222;
    color: #fff;
    font-size: 14px;
    bottom: 0;
    position: fixed;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 999;
}

footer p {
    margin: 10px 0;
}

footer i {
    color: red;
}

footer a {
    color: #3c97bf;
    text-decoration: none;
}

javascript

    <script>
        const signUpButton = document.getElementById('signUp');
        const signInButton = document.getElementById('signIn');
        const container = document.getElementById('container');

        signUpButton.addEventListener('click', () => {
            container.classList.add('right-panel-active');
        });

        signInButton.addEventListener('click', () => {
            container.classList.remove('right-panel-active');
        });
    </script>

See demo:
Here

Kết luận: Dù bạn là một lập trình thiên về cái nào đi chăng nữa thì đây cũng là một ví dụ rất đáng để xem và tham khảo.

Fanpage: TIPJS (tip javascript)

Ref-Source: Originally published at
www.florin-pop.com.

Video học lập trình mỗi ngày

See demo: Here

index.html

See demo: Here

javascript

See demo: Here

mtoplist

See demo:
Here