Cách thực hiện - Biểu mẫu nội tuyến
Tìm hiểu cách tạo biểu mẫu nội tuyến đáp ứng bằng CSS.
Biểu mẫu nội tuyến đáp ứng
Thay đổi kích thước cửa sổ trình duyệt để xem hiệu ứng (nhãn và thông tin đầu vào sẽ xếp chồng lên nhau thay vì cạnh nhau trên màn hình nhỏ hơn):
Cách tạo biểu mẫu nội tuyến
Bước 1) Thêm HTML
Sử dụng phần tử <form> để xử lý dữ liệu đầu vào. Bạn có thể tìm hiểu thêm về điều này trong hướng dẫn PHP của chúng tôi.
Ví dụ
<form class="form-inline" action="/action_page.php">
<label
for="email">Email:</label>
<input type="email" id="email"
placeholder="Enter email" name="email">
<label for="pwd">Password:</label>
<input type="password" id="pwd" placeholder="Enter password" name="pswd">
<label>
<input type="checkbox" name="remember"> Remember me
</label>
<button type="submit">Submit</button>
</form>
Bước 2) Thêm CSS:
Ví dụ
/* Style the form - display items horizontally */
.form-inline {
display: flex;
flex-flow: row wrap;
align-items: center;
}
/* Add some margins for each label */
.form-inline label {
margin: 5px 10px 5px 0;
}
/* Style the input fields */
.form-inline input {
vertical-align: middle;
margin:
5px 10px 5px 0;
padding: 10px;
background-color: #fff;
border: 1px solid #ddd;
}
/* Style the submit button */
.form-inline button {
padding: 10px 20px;
background-color: dodgerblue;
border: 1px solid #ddd;
color: white;
}
.form-inline button:hover
{
background-color: royalblue;
}
/* Add responsiveness -
display the form controls vertically instead of horizontally on screens that
are less than 800px wide */
@media (max-width: 800px) {
.form-inline input {
margin: 10px 0;
}
.form-inline {
flex-direction: column;
align-items: stretch;
}
}
Hãy tự mình thử »Mẹo: Hãy truy cập Hướng dẫn biểu mẫu HTML của chúng tôi để tìm hiểu thêm về Biểu mẫu HTML.
Mẹo: Hãy truy cập Hướng dẫn biểu mẫu CSS của chúng tôi để tìm hiểu thêm về cách tạo kiểu cho các phần tử biểu mẫu.