Cách tạo: Biểu mẫu nội tuyến
- Trang trước Biểu mẫu bật lên
- Trang tiếp theo Xóa hộp nhập
Học cách sử dụng CSS để tạo biểu mẫu nội tuyến tương tác.
Biểu mẫu nội tuyến tương tác
Thay đổi kích thước cửa sổ trình duyệt để xem hiệu ứng (thẻ và đầu vào sẽ chồng lên nhau, thay vì hiển thị song song 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ý đầu vào. Bạn có thể tìm hiểu thêm thông tin liên quan trong hướng dẫn PHP của chúng tôi.
<form class="form-inline" action="/action_page.php">
<label for="email">Email:</label>
<input type="email" id="email" placeholder="Nhập email" name="email">
<label for="pwd">Mật khẩu:</label>
<input type="password" id="pwd" placeholder="Nhập mật khẩu" name="pswd">
<label>
<input type="checkbox" name="remember"> Nhớ tôi
</label>
<button type="submit">Gửi</button>
</form>
Bước 2 - Thêm CSS:
/* Đặt kiểu cho biểu mẫu - Hiển thị các mục theo chiều ngang */
.form-inline {
display: flex;
flex-flow: row wrap;
align-items: center;
}
/* Thêm một số khoảng cách bên ngoài cho mỗi thẻ */
.form-inline label {
margin: 5px 10px 5px 0;
}
/* Đặt kiểu cho trường nhập liệu */
.form-inline input {
vertical-align: middle;
margin: 5px 10px 5px 0;
padding: 10px;
background-color: #fff;
border: 1px solid #ddd;
}
/* Đặt kiểu cho nút gửi */
.form-inline button {
padding: 10px 20px;
background-color: dodgerblue;
border: 1px solid #ddd;
color: white;
}
.form-inline button:hover {
background-color: royalblue;
}
/* Thêm khả năng phản hồi - Hiển thị các điều khiển biểu mẫu theo chiều dọc thay vì chiều ngang trên màn hình có độ rộng nhỏ hơn 800 pixel */
@media (max-width: 800px) {
.form-inline input {
margin: 10px 0;
}
.form-inline {
flex-direction: column;
align-items: stretch;
}
}
Trang liên quan
Giáo trình:HTML biểu mẫu
Giáo trình:CSS biểu mẫu
- Trang trước Biểu mẫu bật lên
- Trang tiếp theo Xóa hộp nhập
