Biểu mẫu ưu tiên thiết bị di động

Thuộc phần Thực hành frontend trong hành trình HTML của Coddy. Bài học 10 trên 35.

Biểu mẫu là một trong những phần quan trọng nhất của web: người dùng liên tục nhập, chạm và tương tác với chúng. Khi thiết kế biểu mẫu ưu tiên thiết bị di động, chúng ta tập trung vào khả năng sử dụng trên màn hình nhỏ:

Làm cho các ô nhập liệu và nút lớn hơn để người dùng dễ nhập và chạm.
Sắp xếp các trường theo chiều dọc và dùng ô nhập liệu chiếm toàn bộ chiều rộng.
Thêm vùng đệm và khoảng cách để ngón tay dễ thao tác.

Ví dụ cho thiết bị di động:

input, button {
  width: 100%;       /* chiếm toàn bộ chiều rộng trên màn hình nhỏ */
  padding: 0.75rem;  /* dễ chạm hơn */
  font-size: 1rem;   /* chữ dễ đọc */
}

Sau đó, trên màn hình lớn hơn (máy tính bảng hoặc máy tính để bàn), chúng ta cải thiện bố cục:

Căn giữa biểu mẫu trên trang.
Đặt một số trường cạnh nhau thay vì xếp chồng lên nhau.
Điều chỉnh chiều rộng và khoảng cách để giao diện đẹp hơn.

Ví dụ cho màn hình lớn hơn:

@media (min-width: 768px) {
  form {
    max-width: 500px;  /* Căn giữa và giới hạn chiều rộng */
    margin: 0 auto;
  }

  .row {
    display: flex;
    gap: 1rem;         /* Các ô nhập liệu đặt cạnh nhau */
  }
}

Thử thách

Dễ

Bạn được cung cấp một biểu mẫu HTML cơ bản. Nhiệm vụ của bạn là thiết lập kiểu theo hướng ưu tiên thiết bị di động:

Các phần tử bên trong biểu mẫu cần được xếp theo chiều dọc. Dùng display: flex và flex-direction: column, rồi thêm một chút gap để giao diện trông đẹp mắt.
Đặt width: 100% và thêm một chút padding cho các phần tử input, button và textarea để chúng đủ lớn trên màn hình di động và người dùng dễ chạm vào.

Tự làm thử

<!DOCTYPE html>
<html>
<head>
  <title>Mobile-First Forms</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 1rem;
      background-color: #f0f4f8;
    }

    form {
      
    }

    input, textarea, button {
      padding: 0.75rem;    
      font-size: 1rem;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    button {
      background-color: #4a90e2;
      color: white;
      border: none;
      cursor: pointer;
    }

    /* Larger screens */
    @media (min-width: 768px) {
      form {
        max-width: 600px;
        margin: 0 auto; /* center form */
      }

      .row {
        display: flex;
        gap: 1rem; /* side-by-side fields */
      }

      .row input {
        width: 100%; /* split space equally */
      }
    }
  </style>
</head>
<body>
   <h1>Contact Us</h1>
  <form>
    <div class="row">
      <input type="text" placeholder="Name" required>
      <input type="email" placeholder="Email" required>
    </div>
    <textarea placeholder="Your Message" rows="4" required></textarea>
    <button type="submit">Send</button>
  </form>
</body>
</html>