Làm cách nào để tạo biểu mẫu đăng ký bằng mã nguồn html và css?
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 Show
Đâ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à CSSHơ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à CSSBâ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
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ẫnCá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 CSSTrong 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 HTMLTrong 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
Cách tạo danh sách mã điện thoại quốc gia thả xuống trong HTMLBâ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 CSSBâ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ý Biểu mẫu đăng ký đáp ứng bằng HTML và CSSTô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?Cách tạo biểu mẫu đăng ký bằng HTML . Chọn trình soạn thảo HTML Tạo tệp HTML của bạn Thêm các trường văn bản cơ bản Thêm các trường bổ sung Thêm trình giữ chỗ Tại sao biểu mẫu HTML của tôi quá xấu? Tùy chỉnh biểu mẫu HTML của bạn bằng CSS Làm thế nào để viết mã HTML cho mẫu đăng ký?Cấu trúc HTML cho trang đăng ký . |