Làm cách nào chúng tôi có thể tạo biểu mẫu đăng ký đáp ứng bằng HTML và CSS?

Form đăng ký là một module cần thiết cho một website. Vì vậy, trong blog này, bạn có thể tìm hiểu cách tạo biểu mẫu đăng ký đáp ứng bằng HTML và CSS

Trong dự án này, tôi đã sử dụng HTML và Pure CSS. Bạn có thể tự tùy chỉnh bố cục

Biểu mẫu đăng ký đáp ứng bằng HTML và CSS (Hướng dẫn trên YouTube)

Bạn có thể đã xem video YouTube này. Tôi hy vọng bạn sẽ hiểu cấu trúc tệp và cách gỡ lỗi nếu bạn gặp bất kỳ lỗi nào trong khi lập trình. Mặc dù vậy, tôi đã thêm mã nguồn cùng với lời giải thích có thể giúp bạn hiểu logic của chương trình

Nếu bạn là người mới bắt đầu trên con đường sự nghiệp phát triển web, đây có thể là dự án thực hành của bạn cho phần phát triển Frontend Cơ bản

Mẫu đăng ký đáp ứng [Mã nguồn]

Để tạo Biểu mẫu đăng ký phản hồi, bạn cần tạo thư mục Dự án trong Trình soạn thảo văn bản. Sẽ có hai tệp bao gồm chỉ mục. html, phong cách. css

• mục lục. html chứa các tệp tĩnh mà người dùng có thể đọc các giá trị đó
• Phong cách. css chứa biểu định kiểu CSS để làm đẹp các tệp tĩnh đó

Cấu trúc thư mục của dự án này

Các bước để tạo biểu mẫu Đăng ký đáp ứng bằng HTML và CSS thuần túy

1. Sao chép mã HTML bên dưới và đặt nó vào chỉ mục. tệp html

    
    
    
    

    
    


    

        

            
Registration
            
        
        

            

                

                    

                        First Name
                        
                    
                    

                        Last Name
                        
                    
                    

                        Contact Number
                        
                    
                    

                        Email
                        
                    
                    

                        Username
                        
                    
                    

                        Password
                        
                    
                
                Register Now
            
        
        

            
Already have an account?  Login
        
    

2. Bây giờ hãy sao chép mã dưới đây cho CSS và bạn có thể thay đổi màu sắc và kiểu phần tử khác cho dự án mà bạn yêu cầu

@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];500;700&display=swap');

:root{
    --primary-color: #F8F7FC;
    --secondary-color: #231E1E;
    --accent-color: #FC8C1B;
}

*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif ;
    box-sizing: border-box;
}

body{
    position: relative;
    display: flex;
    justify-content: center;    
    height: 100vh;
    background: var(--primary-color);
}
.registration-container{
    background: #FFFFFF;
    margin: auto;
    padding: 15px 25px;
    width: 640px;
    border-radius: 12px;
    box-shadow: 10px 14px 90px #f5ac6252;
}
.registration-container .registration-header{
    padding: 10px;
}
.registration-header h2{
    font-size: 20px;
    font-weight: 800;
}
.registration-header .divider{
    display: block;
    width: 15%;
    height: 5px;
    background: var(--accent-color);
    margin-top: 4px;
}
.registration-body .registration-box{
    position: relative;
    flex-direction: row;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 10px 0px;

}
.registration-box .input-box{
    position: relative;
    width: 50%;
    justify-content: space-around;
    padding: 05px 10px;
    display: block;
}
.registration-box .input-box label{
    font-size: 14px;
    color: var(--secondary-color);
}
.registration-box .input-field{
    width: 100%;
    height: 36px;
    border-radius: 4px;
    border: 1px solid #1b1b1b46;
    padding-left: 8px;
    display: block;
}
.registration-box .input-field:focus{
    border-radius: 4px;
    outline: none;
    border: solid var(--accent-color) ;
    border-width:1px 1px 3px 1px;
    padding-left: 8px;
    height: 48px;
    padding-top: 8px;
}
.registration-box  .input-box:focus-within label {
    font-size: 10px;
    display: inline-block;
    content: '';
    position: absolute;
    padding: 4px 10px;
    margin-bottom: 8px;
    
}
.registration-box  .input-box:focus-within {
    padding: 16px 10px;
    margin-bottom: -10px;
}
.registration-box  .input-box:focus-within .input-field::placeholder{
 visibility: hidden;
}

.registration-body .btn-register{
    border: 0;
    background: var(--accent-color);
    color: var(--primary-color);
    font-weight: 700;
    font-size: 16px;
    padding: 10px 25px;
    border-radius: 4px;
    box-shadow: 0px 4px 12px #f5ac6280;
    margin: 0px 10px;
    cursor: pointer;
}
.registration-body .btn-register:hover{
    background: var(--secondary-color);
    box-shadow: 0px 4px 12px #231E1E90;;
}

.registration-container .registration-footer{
    text-align: center;
    padding: 20px;
    position: relative;
}
.registration-footer h3{
    font-size: 16px;
    font-weight: 500;
    color: var(--secondary-color);
}
.registration-footer a{
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 700;
}

.registration-footer a:hover{
    border-bottom: 2px solid #FC8C1B;
}

/** Mobile Device **/
@media  screen and (max-width:480px) {
    .registration-container{
        display: block;
        padding: 10px;
        border-radius: 12px;
        box-shadow: 10px 14px 90px #f5ac6252;
        max-width: 400px;
    }
    .registration-container .registration-header{
        padding: 10px 0px;
    }
    .registration-body .registration-box{
        display: block;
    }
    .registration-box .input-box{
        width: 100%;
        justify-content: space-around;
        padding: 05px 0px;
        display: block;
    }
    .registration-box .input-box:focus-within{
        padding: 12px 0px;
        display: block;
    }
    .registration-body .btn-register{
        width: 100%;
        margin: auto;
    }
}

Giải thích dự án quan trọng

👉 Để biểu mẫu này hoạt động dưới dạng biểu mẫu phản hồi, thông thường chúng ta phải sử dụng @media Bố cục màn hình. Trình duyệt sau hỗ trợ thuộc tính CSS này

Bạn có thể tìm hiểu thêm về truy vấn phương tiện bằng cách nhấp vào đây

Hy vọng bạn tìm thấy điều gì đó quan trọng từ hướng dẫn này. Nếu bạn có bất kỳ câu hỏi nào, xin vui lòng cho tôi biết, tôi sẽ vui lòng trả lời chúng.  

Làm cách nào để tạo biểu mẫu đăng ký bằng HTML và CSS?

Làm cách nào để tạo biểu mẫu đăng ký học sinh bằng HTML và CSS?