Cách tạo: Biểu mẫu đ堆叠

Học cách sử dụng CSS để tạo biểu mẫu đ堆叠.

Biểu mẫu đ堆叠

Một biểu mẫu đ堆叠 dọc (trong đó các trường nhập và thẻ được đặt theo hướng dọc, thay vì theo hướng ngang):

Thử ngay

Cách tạo biểu mẫu đ堆叠

Bước 1 - Thêm HTML:

Sử dụng yếu tố <form> để xử lý đầu vào. Bạn có thể trong trang web của chúng tôi Hướng dẫn PHP tìm hiểu thêm thông tin.

Thêm các điều khiển nhập vào mỗi trường (và có thẻ tiêu đề phù hợp):

<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:

/* Đặt kiểu dáng cho trường nhập liệu */
  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;
}
/* Đặt kiểu dáng cho nút submit */
input[type=submit] {
  width: 100%;
  background-color: #04AA6D;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
/* Thêm màu nền cho nút submit khi chuột trỏ qua */
input[type=submit]:hover {
  background-color: #45a049;
}

Thử ngay

Trang liên quan

Hướng dẫn:HTML Form

Hướng dẫn:CSS Form