Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Flexbox

Cách xây dựng một Form có tính đáp ứng (Responsive) với Flexbox

by
Difficulty:BeginnerLength:ShortLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách tận dụng flexbox để tạo ra một form có tính đáp ứng cao. Điều đáng chú ý là (và thú vị cùng một lúc) flexbox cho phép chúng ta xây dựng form của chúng ta mà không sử dụng bất kỳ media query nào.

Trước khi chúng ta bắt đầu, hãy nhìn vào những gì chúng ta hướng tới (kiểm tra trên phiên bản lớn hơn để xem cách form thay đổi layout):

Cấu trúc Form

Ngay sau đó, điều đầu tiên, hãy đào sâu vào cấu trúc của form. Chúng ta sẽ tạo ra như sau:

  • Chúng ta sẽ sử dụng danh sách không thứ tự .flex-outer để nhóm các phần tử form khác nhau
  • và danh sách không thứ tự .flex-inner để nhóm các hộp đánh dấu.
  • Hầu hết các phần tử điều khiển trong form đi kèm với nhãn liên kết với chúng.

Xong rồi! Bằng cách định nghĩa chỉ hai danh sách không có thứ tự (chúng ta cũng có thể sử dụng danh sách có thứ tự), chúng ta đã xây dựng một form rất sạch sẽ, gọn gàng. Nó trông giống như dưới đây:

Lưu ý: chúng ta sử dụng phần tử p thay cho phần tử label trước .flex-inner danh sách. Điều này là bởi vì, trong trường hợp cụ thể này, nó không có ý nghĩa gì khi sử dụng thẻ label. Thẻ này nên được sử dụng chỉ để liên kết một nhãn với một điều khiển của form.

Dưới đây là mã html cho các hộp đánh dấu:

Với mã html đã sẵn sàng, form chưa được định phong cách sẽ trông giống thế này:

Đây không phải là form đặc biệt mà bạn từng nhìn thấy, nhưng nó hoạt động! Nó có tính ý nghĩa, tính truy xuất và uyển chuyển; các khía cạnh này được cho là quan trọng hơn bất cứ điều gì.

Ở thời điểm hiện tại, chúng ta đã sẵn sàng áp dụng một số phong cách vào nó.

Các Style của Form

Hãy bắt đầu bằng cách thêm normalizeautoprefixer vào trong thiết lập pen của chúng ta:

Tiếp theo chúng ta nhận diện các flex container. Trong tường hợp của chúng ta, các phần tử sau:

  • Mỗi phần tử của .flex-outer danh sách.
  • Danh sách .flex-inner chứa tất cả các hộp đánh dấu.

Ngoài ra, chúng ta muốn canh giữa theo chiều dọc các phần tử flex trên trục cross-axis (trục dọc).

Để đạt được hành vi này, chúng ta thiết lập một số luật CSS ban đầu:

Bước tiếp theo là thiết lập chiều rộng cho các phần tử flex. Chúng ta bắt đầu với các phần tử flex của .flex-outer danh sách.

Các yêu cầu chính là:

  • Chiều rộng của các nhãn nên ít nhất 120px và dài nhất 220px.
  • Chiều rộng của các phần tử trong form theo sau các nhãn nên ít nhất 220px.

Điều này cho chúng ta những gì? Mỗi nhãn cùng với phần tử form liên kết với nó sẽ được hiển thị trên một dòng ngang khi tổng chiều rộng của form ít nhất 340px. Trong bất kỳ trường hợp nào khác, tất cả các phần tử của form (loại trừ các hộp đánh dấu ra một bên vì chúng ta sẽ xem xét trong chốc lát nữa) sẽ nằm xếp chồng lên nhau theo chiều dọc.

Lưu ý: các giá trị đã nêu ở trên là tuỳ ý - bạn có thể thay đổi chúng tuỳ vào nhu cầu của bạn.

Nút Submit

Cuối cùng, đối với nút submit, cũng là một phần thử flex, chúng ta định nghĩa một số phong cách cơ bản:

Các hộp đánh dấu

Hãy định phong cách các hộp đánh dấu. Hãy nhớ rằng phần tử flex bao quanh của chúng có chiều rộng nhỏ nhất là 220px.

Đầu tiên, chúng ta thiết lập chiều rộng của các phần tử flex là phần tử cha trực tiếp của các hộp đánh dấu là 100px:

Sau đó, chúng ta tận dụng thuộc tính justify-content để canh chúng trên trục main-axis (trục ngang). Lưu ý rằng thuộc tính này có các giá trị khác, nhưng đối với ví dụ này, chúng ta chỉ quan tâm đến giá trị space-between:

Giá trị này làm việc tốt và cho phép chúng ta đạt được một sự sắp xếp thíc hợp cho các hộp đánh dấu và các nhãn tương ứng của chúng. Một thứ mà chúng ta sẽ đề cập đó là giá trí của thuộc tính này có thể phân bổ các phần tử của dòng cuối cùng một cách vụng về. Tại các chiều rộng viewport cụ thể bạn sẽ thấy một số thứ như thế này:

Lưu ý sự sắp xếp hai phần tử flex cuối cùng. Nếu, vì một lý do nào đó, bạn không thích layout đó và bạn thích chúng xuất hiện kế bên cái khác hơn, thì bạn có thể thử vài thứ như thế này:

  • Xoá thuộc tính justify-content khỏi phần tử flex bao quanh.
  • Sử dụng phần trăm để thêm một chiều rộng cố định vào các phần tử flex (ví dụ width: 50%).
  • Sử dụng các media query để thay thế chiều rộng này. Ví dụ, khi chiều rộng viewport lớn hơn 992px, thì cho các phần tử flex width: 25% thay vì width: 50%.

Hầu hết, điều quan trọng cần phải hiểu là hai thứ này:

  • Flexbox cho chúng ta khả năng xây dựng các form đẹp một cách nhanh chóng và linh hoạt
  • và tất cả các giá trị được đề cập ở trên làm việc tốt với ví dụ cụ thể này. Đối với các thiết kế riêng của bạn, bạn sẽ gần như cần các giá trị khác. Ví dụ, ở đây các nhãn của các hộp đánh dấu là khá nhỏ và vì lý do này chúng ta cho chiều rộng của phần tử cha của chúng một chiều rộng cố định (ví dụ 100px). Tuy nhiên, nếu chúng có các chiều rộng khác nhau, có thể khôn khéo hơn cho chúng flex: 1 100px.

Các phong cách (style) cuối cùng

Trước khi kết thúc, hãy làm cho nó đẹp hơn một chút để các thứ có thể được trình bày tốt hơn. Chọn tab CSS trong demo dưới đây để xem nơi các màu sắc và khoảng trống đã được thêm:

Kết luận

Như bạn thấy, với một ít mã html và sức mạnh của flexbox, chúng ta đã xoay sở để xây dựng một form có tính đáp ứng cao (responsive). Bây giờ hy vọng, bạn đã học được một số kiến thức hữu ích mà sẽ giúp bạn xây dựng các form flexbox cho chính mình.

Bước tiếp theo

Nếu bạn muốn nâng form này lên một bước cao hơn, thì tôi có hai thử thách cho bạn:

  • cải thiện vẻ ngoài của nó bằng cách thay thế các phong cách (style) mặc định (ví dụ thêm các hộp đánh dấu tuỳ biến)
  • và làm cho nó động. Ví dụ, nếu bạn rành về WordPress, hãy xem nếu có thể tạo một Contact Form 7 hoặc một Ninja Form mà giữ nguyên cấu trúc và phong cách của form này.
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.