Đây là bài 6 của chương 2: Biểu mẫu và dữ liệu nhập, thuộc khóa demo HTML & CSS. Nội dung được dùng để trải nghiệm cấu trúc chương trình học; hãy thực hành trên dữ liệu và môi trường thử nghiệm riêng. Trong dự án xuyên suốt, bạn sẽ xây dựng website giới thiệu khóa học có trang chủ, danh sách bài học và biểu mẫu đăng ký.
Mục tiêu cụ thể
Label kết nối với input bằng cặp for và id. Type phù hợp hỗ trợ bàn phím và kiểm tra dữ liệu cơ bản, nhưng máy chủ vẫn phải xác thực lại dữ liệu.
Tích hợp vào dự án xuyên suốt
Sản phẩm cuối khóa là website giới thiệu khóa học có trang chủ, danh sách bài học và biểu mẫu đăng ký. Ở chương này, bạn cần bàn giao một phần có thể giải thích và kiểm tra độc lập: Thiết kế form đăng ký học gồm họ tên, email và đồng ý điều khoản; bản demo chưa gửi dữ liệu thật. Hãy nêu rõ phần mới phụ thuộc vào kết quả nào của chương trước và phần nào có thể làm riêng.
Kế hoạch thực hiện
- Xác định đầu vào, đầu ra và trạng thái trước khi bắt đầu. Với biểu mẫu và dữ liệu nhập, hãy ghi lại kết quả bạn mong muốn trước khi chạy ví dụ.
- Tạo bản thử nhỏ nhất trong một thư mục hoặc môi trường riêng. Chỉ dùng dữ liệu giả; không sao chép token, tài khoản hoặc dữ liệu cá nhân vào bài tập.
- Thực hiện yêu cầu: Thiết kế form đăng ký học gồm họ tên, email và đồng ý điều khoản; bản demo chưa gửi dữ liệu thật.
- Quan sát kết quả và so sánh từng điều kiện chấp nhận. Khi chưa đạt, thay đổi một yếu tố mỗi lần để biết thay đổi nào tạo ra tác động.
- Lưu kết quả cùng ghi chú giải thích quyết định. Người khác cần tái hiện được thao tác mà không phải đoán cấu hình hoặc dữ liệu ban đầu.
Điều kiện nghiệm thu
- Nhấp label đưa focus vào input
- Email sai định dạng bị cảnh báo
- Điều khoản được đọc rõ trước khi chọn
Rủi ro cần xử lý
Placeholder không thay thế label. Không đặt mật khẩu vào URL bằng phương thức GET và không xem kiểm tra trên trình duyệt là hàng rào duy nhất.
Yêu cầu bàn giao
- Một phiên bản chạy được hoặc tài liệu thiết kế đủ để kiểm chứng.
- Mô tả đầu vào, đầu ra và cách bắt đầu thử.
- Ít nhất ba ca thử gắn với tiêu chí chương.
- Một ca lỗi được tái hiện và cách xử lý.
- Ghi chú giới hạn: điều gì chưa làm, vì sao và bước tiếp theo.
Bài dự án có thể cần nhiều thời gian thực hành hơn thời gian đọc hiển thị. Bạn tự chọn mức độ mở rộng theo mục tiêu; không cần đưa nội dung lên hệ thống production để hoàn thành bài. Khi review, tập trung vào hành vi quan sát được và tính rõ ràng của giải thích thay vì số dòng mã.
Liên hệ chương tiếp theo
Giữ lại phiên bản đã đạt tiêu chí trước khi thêm yêu cầu mới. Nếu thay đổi tiếp theo làm sai hành vi cũ, dùng các ca thử đã ghi để phát hiện và khoanh vùng thay đổi gây ra vấn đề.