Cách thực hiện - 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
Một dạng xếp chồng 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ý 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.
Thêm đầu vào (có nhãn phù hợp) cho từng trường:
Ví 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:
Ví 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;
}
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.