Trong hướng dẫn HTML CSS này, bạn sẽ học cách tạo mẫu đăng ký đáp ứng trong HTML và CSS. Dự án bao gồm tất cả các trường đầu vào cơ bản cho đăng ký của sinh viên hoặc người dùng như đầu vào email, ngày sinh, đầu vào số điện thoại với tất cả các danh sách mã quốc gia, trường đầu vào thẻ ID có mẫu cụ thể và đầu vào radio giới tính.
Đây là một hình thức đăng ký đáp ứng di động được thiết kế cho các nhà phát triển cấp độ mới bắt đầu. Tôi đã sử dụng phương thức CSS Flexbox để tạo 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 chuyển đổi thành một cột trên các thiết bị di động.
Cách tạo biểu mẫu đăng ký đơn giản bằng cách sử dụng HTML và CSS
Hơn nữa, nó có 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 các 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 phía trước đơn giản của mẫu đăng ký cho các nhà phát triển web mới bắt đầu. Để tạo mẫu đăng ký đáp ứng, bạn cần tìm hiểu những điều cơ bản của ngôn ngữ HTML và CSS.
Cách tạo 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. Để thực hiện biểu mẫu này, tôi đã sử dụng các loại đầu vào HTML5 sau đây trong dự án HTML CSS đơn giản này.
- Loại đầu vào văn bản
- Nhập loại email
- Html5 radio loại đầu vào
- Điện thoại loại đầu vào HTML5
- Để tải lên tệp, tệp loại đầu vào HTML
Ngoài ra, để bạn hiểu, tôi đã tạo một hướng dẫn video về cách tạo biểu mẫu đăng ký đơn giản bằng HTML và CSS. Xem hoàn chỉnh video hướng dẫn với mã nguồn bên dưới:
Video hướng dẫn
Cách tạo biểu mẫu đăng ký đơn giản bằng cách sử dụng HTML và CSS
Bây giờ, bạn sẽ nhận được các mã nguồn với các giải thích để tạo một biểu mẫu đăng ký đơn giản cho thực tiễn của bạn.
Mã nguồn - 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 cá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à mã mới.
Mã nguồn HTML
Trong mã HTML này, tôi đã sử dụng các loại đầu vào HTML cơ bản để tạo biểu mẫu đăng ký người dùng đơn giản. Bây giờ, trước hết, chúng tôi sẽ tạo một phần tử HTML Div với một lớp container và tất cả các biểu mẫu được bao quanh bởi lớp container. Biểu mẫu có một hàng và hai cột.HTML div element with a container class and all the forms enclosed by the container class. The form has one row and two columns.
Một nửa các trường đầu vào đượ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.
Document
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
var input = document.querySelector["#phone"];
window.intlTelInput[input, {
separateDialCode: true
}];
Cách tạo Dropdown & NBSP; Country & NBSP; Phone & NBSP; Danh sách mã trong HTML
Bây giờ, hãy để Lừa tìm hiểu về cách tạo Dropdown & nbsp; Country & nbsp; Phone & nbsp; Danh sách mã và mẫu đăng ký HTML. Danh sách này 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 họ bằng cách sử dụng danh sách thả xuống như trong hình dưới đây:
Cách dễ nhất để tạo Dropdown & nbsp; Country & nbsp; Phone & nbsp; Danh sách mã trong HTML, dán các liên kết mã CDN sau đây bên trong phần của mã HTML. section of the HTML code.
Sau đó, thêm đầu vào HTML sau được nộp bằng văn bản loại đầu vào và id = điện thoại bên trong thẻ cơ thể của HTML.id = phone inside the body tag of HTML.
Và cuối cùng, thêm đoạn mã JavaScript này ở dưới cùng của phần cơ thể 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.
var input = document.querySelector["#phone"];
window.intlTelInput[input, {
separateDialCode: true
}];
Cũng đọc: Cách tạo thiết kế trang đăng ký trong HTML CSS với mã nguồn How to Create Sign Up Page Design in HTML CSS With Source Code
Mã nguồn CSS:
Bây giờ, bạn sẽ nhận được mã nguồn CSS của thiết kế mẫu mẫu đăng ký đơn giản này. CSS là một ngôn ngữ web rất quan trọng đối với các trang web và các hình thức HTML. Trong dự án này, tôi đã sử dụng mô hình CSS Flexbox và các 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:CSS flexbox model and CSS media queries to make the form mobile responsive. Below is the source code for your understanding:
/* import google font family */
@import url['//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 h2 {
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, dưới đây là quan điểm đáp ứng di động của 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 hạnh phúc !!!