Trong hướng dẫn HTML CSS này, bạn sẽ tìm hiểu cách tạo biểu mẫu đăng ký đáp ứng bằng HTML và CSS. Dự án bao gồm tất cả các trường nhập cơ bản để đăng ký sinh viên hoặc người dùng, chẳng hạn như nhập email, ngày sinh, nhập số điện thoại với tất cả các danh sách mã quốc gia, trường nhập thẻ ID với một mẫu cụ thể và nhập radio giới tính

Đây là biểu mẫu đăng ký đáp ứng trên thiết bị di động được thiết kế dành cho các nhà phát triển ở cấp độ mới bắt đầu. Tôi đã sử dụng phương pháp CSS flexbox để tạo biểu mẫu đăng ký thành hai cột. Khi người dùng giảm kích thước màn hình, hai cột sẽ chuyển đổi thành một cột duy nhất trên thiết bị di động

Cách tạo form đăng ký đơn giản bằng HTML và CSS

Hơn nữa, đây là một biểu mẫu đăng ký đơn giản được tạo bằng cách chỉ sử dụng HTML và CSS. Tôi cũng đã bao gồm mã nguồn của mẫu đăng ký trong bài đăng trên blog này. Một thiết kế mẫu giao diện người dùng đơn giản của biểu mẫu đăng ký dành cho các nhà phát triển web mới bắt đầu. Để tạo một biểu mẫu đăng ký đáp ứng, bạn cần tìm hiểu kiến ​​thức cơ bản về ngôn ngữ HTML và CSS

Cách tạo biểu mẫu đăng ký đáp ứng trong HTML và CSS

Bây giờ, tôi sẽ chỉ cho bạn các bước chính để tạo biểu mẫu HTML đăng ký người dùng. Để tạo biểu mẫu này, tôi đã sử dụng các loại đầu vào HTML5 sau trong dự án HTML CSS đơn giản này

• Loại văn bản đầu vào
• Loại đầu vào email
• Đài phát thanh loại đầu vào HTML5
• Điện thoại loại đầu vào HTML5
• Đối với tệp tải lên, tệp loại đầu vào HTML

Ngoài ra, để bạn hiểu, tôi đã tạo một video hướng dẫn cách tạo một biểu mẫu đăng ký đơn giản bằng HTML và CSS. Xem video hướng dẫn hoàn chỉnh với mã nguồn bên dưới

Video hướng dẫn

Bây giờ, bạn sẽ nhận được các mã nguồn kèm theo lời giải thích để tạo một biểu mẫu đăng ký đơn giản cho việc thực hành của bạn. ’

Mã nguồn – Biểu mẫu đăng ký HTML CSS

Trong phần này của bài viết trên blog, bạn sẽ nhận được mã nguồn của HTML và CSS với một lời giải thích ngắn gọn cho người mới bắt đầu và người mới viết mã

Mã nguồn HTML

Trong mã HTML này, tôi đã sử dụng các kiểu đầu vào HTML cơ bản để tạo một biểu mẫu đăng ký người dùng đơn giản. Bây giờ, trước hết, chúng ta sẽ tạo một phần tử div HTML với lớp chứa và tất cả các biểu mẫu được bao bọc bởi lớp chứa. Biểu mẫu có một hàng và hai cột

Một nửa số trường nhập được đặt trong cột đầu tiên và các trường khác được đặt trong cột thứ hai. Mã HTML sau đây sẽ xóa khái niệm của bạn cho phù hợp

    
    
    
    
    
    
    



    

        

            
Registration Form
            
Fill the form below and press the submit button!
            

                
                
                        
                    

                        
                    
                    

                        
                    
                    

                        
                    
                    

                        
                    
                    
                    

                        
                    
                
                
                

                    

                        
What is your gender?
                        

                            
                            Male
                        
                        

                            
                            Female
                        
                    
                    

                        Enter your ID Card in given formate.
                        

                             _
                             _ 
                            
                        
                    
                    

                        
Upload File
                        
                    
                
            
            
            

                Submit Now
            
        
    


    
    

Cách tạo danh sách mã điện thoại quốc gia thả xuống trong HTML

Bây giờ, hãy cùng tìm hiểu về cách tạo danh sách mã điện thoại quốc gia thả xuống và biểu mẫu đăng ký HTML. Danh sách chứa danh sách mã điện thoại của tất cả các quốc gia trên thế giới. Người dùng có thể dễ dàng chọn mã điện thoại quốc gia của mình bằng cách sử dụng danh sách thả xuống như trong hình bên dưới

The easiest way to create the dropdown country phone code list in HTML, paste the following CDN code links inside the section of the HTML code.

Sau đó, thêm trường nhập HTML sau với kiểu nhập văn bản và id = phone bên trong thẻ body của HTML

Và cuối cùng, thêm đoạn mã JavaScript này vào cuối phần nội dung HTML. Mã này sẽ khởi tạo danh sách mã điện thoại trên mỗi lần tải lại

cũng đọc. Cách tạo thiết kế trang đăng ký trong HTML CSS bằng mã nguồn

Mã nguồn CSS

Bây giờ, bạn sẽ nhận được mã nguồn CSS của thiết kế mẫu biểu mẫu đăng ký đơn giản này. CSS là một ngôn ngữ web rất quan trọng để định kiểu trang web và biểu mẫu HTML. Trong dự án này, tôi đã sử dụng mô hình CSS flexbox và truy vấn phương tiện CSS để làm cho biểu mẫu phản hồi trên thiết bị di động. Dưới đây là mã nguồn cho sự hiểu biết của bạn

/* import google font family */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,[email protected],600;1,600&display=swap');
/* selecting everything */
* {
 padding: 0;
 margin: 0;
 box-sizing: border-box;
}
body {
 font-family: 'Open Sans', sans-serif, helvetica, Arial;
 font-weight: 400;
 font-size: 14px;
 color: black;
 /* body background image */
 background-image: linear-gradient(to bottom, rgba(128, 128, 128, 0.541), rgba(204, 0, 255, 0.637)), url(image.jpg);
 background-attachment: fixed;
 background-size: cover;
 
}
.container {
 max-width: 800px;
 width: 100%;
 margin: 0 auto;
}
#contact {
 background-color: rgba(220, 255, 66, 0.7);
 padding: 20px;
 margin: 50px 0;
}
#contact input, button {
 font: 400 15px 'Open Sans', sans-serif, helvetica, Arial;
}
#contact h1 {
 font-size: 35px;
 font-weight: bold;
 text-align: center;
 color: blue;
}
#contact h3 {
 margin: 5px 0px 15px;
 text-align: center;
}
.row {
 display: flex;
 width: 100% !important;
 padding: 20px 0px;
}
.row .column {
 margin: 0px 20px;
 width: 50%;
}
fieldset {
 border: medium none !important;
 margin:  0 0 10px;
 min-width: 100%;
 width: 100%;
}
#contact input {
 width: 100%;
 border: 1px solid rgb(150, 150, 150);
 background-color: white;
 padding: 10px;
 margin: 5px 0;
}
input[type = "radio"] {
 width: 10% !important;
}
#contact .row .radio {
 border: 1px solid rgb(150, 150, 150);
 background-color: white;
 margin: 7px 0 10px;
 padding: 5px;
}
#contact .row .idCard{
 display: flex;
 height: 45px !important;
 margin: 5px 0;
}
#contact .row .idCard :first-child {
 width: 80px;
}
#contact .row .idCard :last-child {
 width: 40px;
}
#contact .row #phone {
 max-width: 100% !important;
 padding-right: 80px;
}
#contact input:hover {
 transition: border-color 0.3s ease-in-out;
 border: 1px solid rgb(68, 68, 68);
}
#contact button {
 outline: none;
 border: none;
 background-color: blue;
 color: white;
 margin: 0 0 5px 40%;
 padding: 10px;
 font-size: 17px;
 width: 150px;
}

#contact button:hover {
 background-color: rgba(0, 0, 255, 0.8);
}

#contact input:focus {
 outline: 0;
 border: 1px solid red;
}

/* mobile responsive mode */
@media screen and (max-width: 580px)  {
 .row {
  flex-direction: column;
 }
 .row .column {
  width: 90% !important;
 }
 #contact .row #phone {
 padding-right: 180px;
}
}

Cuối cùng, bên dưới là chế độ xem phản hồi trên thiết bị di động của biểu mẫu đăng ký

Tôi hy vọng bạn hiểu mẫu đăng ký HTML CSS ở trên. Nếu bạn vẫn cần bất kỳ trợ giúp nào liên quan đến hướng dẫn này, bạn có thể liên hệ với tôi. Mã hóa vui vẻ

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

Làm cách nào để tạo biểu mẫu đăng ký và đăng nhập trong HTML?

Làm cách nào để áp dụng CSS vào biểu mẫu đăng ký?