Làm thế nào để - Biểu mẫu xếp chồng
Tìm hiểu cách tạo biểu mẫu xếp chồng bằng CSS.
Biểu mẫu xếp chồng lên nhau
Một biểu mẫu xếp chồng lên nhau theo chiều dọc (trong đó đầu vào và nhãn được đặt chồng lên nhau, thay vì cạnh nhau):
Cách tạo biểu mẫu xếp chồng
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 về điều này trong hướng dẫn PHP của chúng tôi .
Thêm đầu vào (với nhãn phù hợp) cho mỗi trường:
Thí dụ
<form action="/action_page.php">
<label for="fname">First
Name</label>
<input type="text" id="fname" name="firstname"
placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="country">Country</label>
<select id="country"
name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
<input type="submit" value="Submit">
</form>
Bước 2) Thêm CSS:
Thí dụ
/* Style inputs */
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing:
border-box;
}
/* Style the submit
button */
input[type=submit] {
width: 100%;
background-color: #04AA6D;
color: white;
padding: 14px
20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* Add a background color to the submit button on
mouse-over */
input[type=submit]:hover {
background-color: #45a049;
}
Mẹo: Đi tới Hướng dẫn về 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: Đi tới 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.