Cách tạo: Biểu mẫu liên hệ

Cách tạo biểu mẫu liên hệ

Bước 1 - Thêm HTML:

Sử dụng thẻ <form> để xử lý đầu vào. Bạn có thể tìm hiểu thêm thông tin liên quan trong giáo trình PHP của chúng tôi.

Sau đó thêm các điều khiển nhập cho mỗi trường (và có thẻ nhãn tương ứng):

<div class="container">
  <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>
    <label for="subject">Chủ đề</label>
    <textarea id="subject" name="subject" placeholder="Viết điều gì đó..." style="height:200px"></textarea>
    <input type="submit" value="Submit">
  </form>
</div>

Bước 2 - Thêm CSS:

/* Thiết lập các樣式 cho các phần tử input loại "text", phần tử chọn và văn bản域 */
input[type=text], select, textarea {
  width: 100%; /* Chiều rộng toàn bộ */
  padding: 12px; /* Một số khoảng cách trong */ 
  border: 1px solid #ccc; /* Viền màu xám */
  border-radius: 4px; /* Góc bo tròn viền */
  box-sizing: border-box; /* Đảm bảo khoảng cách trong và chiều rộng không thay đổi */
  margin-top: 6px; /* Khoảng cách dưới bên ngoài */
  margin-bottom: 16px; /* Khoảng cách dưới */
  resize: vertical /* Cho phép người dùng điều chỉnh kích thước văn bản theo chiều dọc (không phải chiều ngang) */
}
/* Thiết lập màu nền và các樣式 đặc biệt cho nút submit */
input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
/* Thêm màu nền xanh đậm hơn khi con trỏ chuột nằm trên nút submit */
input[type=submit]:hover {
  background-color: #45a049;
}
/* Thêm màu nền và khoảng cách trong cho khung biểu mẫu */
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

Thử ngay

Trang liên quan

Giáo trình:Form HTML

Giáo trình:Form CSS