Form đăng ký html css javascript

Posted on by mtoplistChuyên mục:Top List

Form đăng ký html css javascript

Trong các Form đăng ký, đăng nhập thành viên ở input sẽ phải thực hiện công việc kiểm tra đầu vào. Với mục đích xem người dùng có nhập đúng thông tin yêu cầu hay
không.

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

Validate form bằng JavaScript sẽ yêu cầu nhập vào các thông tin chính xác. Giả sử không kiểm tra họ sẽ nhập abc, xyz… hay như số điện thoại thì 123 không đúng định dạng.

Bài viết dưới đây daibang.xyz sẽ hướng dẫn bạn cách tạo form đăng ký bằng Javascript chỉ với vài đoạn mã đơn giản.

Bước 1: Viết mã HTML

<!DOCTYPE html>
<html>
<body>

<form action="" method="post">
<input type="text" name="username" id="username" placeholder="Tên đăng ký"/><br/>
<input type="password" name="password" id="password" placeholder="Mật khẩu"/><br/>
<input type="submit" name="btnsubmit" id="btnsubmit" value="Đăng ký"/>
</form>

</body>
</html>

Bước 2: Thêm đoạn mã JavaScript trước thẻ </body>

<script>
function validate() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;

if(username== "") {
alert("Vui lòng nhập tên!");
return false;
}
if(password == "") {
alert("Vui lòng nhập mật khẩu!");
return false;
}
}
</script>

Giải thích:

Đoạn mã ở trên bạn
sẽ tạo ra một hàm (function) là validate(). Dùng document.getElementById để DOM lấy giá trị đầu vào từ input.

Tiếp theo dùng if để kiểm tra input có trống hay không. Nếu trông thì xuất hiện cảnh báo alert.

Kết luận: Với đoạn code ví dụ đơn giản ở trên bạn đã biết cách tạo form đăng ký bằng JavaScript. Nếu muốn thêm nhiều trường hơn bạn hãy nhân bản HTML và JavaScript.

Nội dung bài viế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.

mtoplist