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
Cách tạo form đăng ký đơn giản bằng HTML và CSSBâ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
Documentvar input = document.querySelector["#phone"]; window.intlTelInput[input, { separateDialCode: true }];Registration Form
Fill the form below and press the submit button!
Submit NowWhat is your gender?
MaleFemaleEnter your ID Card in given formate._ _Upload File
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
[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ý bằng mã HTML và CSS?
Làm thế nào để viết mã HTML cho mẫu đăng ký?
Đăng ký
Vui lòng điền vào biểu mẫu này để đăng ký.
Đăng ký
Vui lòng điền vào biểu mẫu này để đăng ký.