Thiết kế form (tab/section)
Bố cục một main form được tổ chức theo tabs → sections → columns. Hiểu cấu trúc này giúp dựng form gọn, rõ và dễ dùng.
Ba cấp bố cục
Phần tiêu đề “Ba cấp bố cục”| Cấp | Vai trò |
|---|---|
| Tab | Trang con của form (vd “Thông tin chung”, “Tài chính”, “Lịch sử”) |
| Section | Khối trong tab, nhóm các cột liên quan |
| Column layout | Section chia 1–4 cột để xếp field |
Nguyên tắc thiết kế
Phần tiêu đề “Nguyên tắc thiết kế”- Thông tin quan trọng/hay dùng lên trước (tab đầu, section trên).
- Nhóm field theo ý nghĩa (liên hệ, tài chính, ngày tháng…).
- Section nhiều cột cho field ngắn (ngày, số); một cột cho field dài (mô tả).
- Đặt header field chứa 3–4 thông tin then chốt luôn hiện.
Responsive tự động
Phần tiêu đề “Responsive tự động”- Form tự sắp xếp lại trên tablet/phone — không cần thiết kế riêng.
- Nhưng bố cục hợp lý (section, cột) giúp responsive đẹp hơn.
Tab nâng cao
Phần tiêu đề “Tab nâng cao”- Tab ẩn theo điều kiện: kết hợp business rule để ẩn/hiện tab.
- Collapsible sections: thu gọn section ít dùng.
- Tab Related: tự liệt kê bản ghi liên quan (quan hệ).
Tránh các lỗi thường gặp
Phần tiêu đề “Tránh các lỗi thường gặp”- Form quá dài, nhồi mọi field → người dùng ngợp. Tách tab, ẩn field theo ngữ cảnh.
- Đặt field bắt buộc rải rác → khó tìm khi save lỗi. Nhóm field bắt buộc rõ ràng.
- Không dùng section → form lộn xộn.