Chào mừng bạn đến với Tìm hiểu Biểu mẫu!

Khoá học này chia nhỏ các biểu mẫu HTML thành các phần dễ hiểu. Trong vài học phần tiếp theo, bạn sẽ tìm hiểu cách hoạt động của biểu mẫu HTML và cách sử dụng biểu mẫu này sao cho hiệu quả trong các dự án của mình. Sử dụng ngăn trình đơn bên cạnh biểu trưng Tìm hiểu biểu mẫu để điều hướng các mô-đun.

Bạn sẽ tìm hiểu cách tạo một biểu mẫu HTML cơ bản, về các thành phần biểu mẫu HTML, tạo kiểu cho biểu mẫu, giúp người dùng nhập lại dữ liệu, đảm bảo rằng biểu mẫu có thể truy cập được và an toàn, cách kiểm tra biểu mẫu cũng như về các loại biểu mẫu cụ thể.

Mỗi học phần có đầy đủ các bản minh hoạ có tính tương tác và bài tự đánh giá để bạn kiểm tra kiến thức của mình.

Khoá học này phù hợp với những người mới bắt đầu và các nhà phát triển HTML nâng cao. Một số mô-đun đầu tiên giúp bạn bắt đầu xây dựng biểu mẫu HTML, các mô-đun khác sẽ cung cấp thêm chi tiết. Bạn có thể xem qua loạt từ đầu đến cuối để hiểu chung về biểu mẫu HTML hoặc chọn một mô-đun cụ thể mà bạn muốn tìm hiểu thêm.

Điều kiện tiên quyết

Trước khi bắt đầu khoá học này, bạn nên biết về HTML. Đối với những người mới làm quen với việc phát triển web, hãy xem khoá học giới thiệu về HTML của MDN để tìm hiểu mọi thông tin về cách viết mã đánh dấu.

Bản thu thử

Đối với hầu hết các bản minh hoạ, chúng ta sử dụng CodePen.

Nhìn vào bản minh hoạ, có thể bạn sẽ thắc mắc về nguồn gốc của các kiểu. Chúng tôi sử dụng biểu định kiểu chung có trong tất cả các bản minh hoạ, do đó, chỉ các kiểu có liên quan mới hiển thị ở đó. Trong CodePen, bạn có thể chọn các tệp CSS đi kèm trong phần Cài đặt.

Các thành phần điều khiển biểu mẫu và các trường của biểu mẫu

Thành phần điều khiển biểu mẫu là một phần tử cho phép người dùng tương tác và chọn hoặc chọn dữ liệu: <input>, <select>, <textarea> hoặc <button>.

Đôi khi, trường biểu mẫu được dùng để tham chiếu đến các thành phần điều khiển biểu mẫu, trong các phần tử cụ thể cho mục nhập văn bản: <input><textarea>.

Sau đây là những nội dung bạn sẽ tìm hiểu

Sử dụng biểu mẫu để lấy dữ liệu từ người dùng

Tìm hiểu kiến thức cơ bản về cách sử dụng biểu mẫu trên web qua phần giới thiệu về phần tử biểu mẫu này.

Giúp người dùng nhập dữ liệu vào biểu mẫu

Tổng quan về các thành phần biểu mẫu mà bạn có thể chọn để tạo biểu mẫu.

Giúp người dùng tránh nhập lại dữ liệu trong biểu mẫu

Giúp người dùng điền vào biểu mẫu thuận tiện hơn.

Giúp người dùng nhập đúng dữ liệu vào biểu mẫu

Tìm hiểu cách xác thực biểu mẫu trên giao diện người dùng.

Kiểm thử biểu mẫu

Tìm hiểu cách kiểm tra và phân tích biểu mẫu của bạn.

Kiến thức cơ bản về thiết kế

Tìm hiểu cách xây dựng biểu mẫu thân thiện với người dùng.

Hỗ trợ tiếp cận

Cách xây dựng biểu mẫu dành cho tất cả mọi người.

Quốc tế hoá và bản địa hoá

Chuẩn bị cho các định dạng dữ liệu quốc tế và tìm hiểu cách lập kế hoạch biểu mẫu để bản địa hoá.

Bảo mật và quyền riêng tư

Tìm hiểu cách bảo mật biểu mẫu và bảo mật dữ liệu của người dùng.

Tự động điền

Tìm hiểu mọi thông tin về tính năng tự động điền và thuộc tính tự động hoàn thành.

Cách kiểm tra khả năng hữu dụng của biểu mẫu

Khám phá cách kiểm tra khả năng hữu dụng và đảm bảo biểu mẫu của bạn hoạt động tốt cho tất cả người dùng.

Kiểm thử biểu mẫu trên nhiều thiết bị và nền tảng

Đảm bảo biểu mẫu của bạn hoạt động với nhiều thiết bị, trình duyệt, nền tảng và ngữ cảnh khác nhau.

Thu thập dữ liệu

Tìm hiểu cách đo lường và phân tích biểu mẫu.

Thông tin chuyên sâu về biểu mẫu

Tìm hiểu mọi thứ về yếu tố biểu mẫu, thời điểm bạn nên sử dụng biểu mẫu và cách hoạt động chi tiết của biểu mẫu.

Thông tin chuyên sâu về trường biểu mẫu

Tìm hiểu về các trường biểu mẫu mà bạn có thể sử dụng và cách chọn thành phần biểu mẫu phù hợp.

Thông tin chuyên sâu về thuộc tính biểu mẫu

Tìm hiểu mọi thuộc tính của biểu mẫu: cách sửa đổi bố cục của bàn phím ảo, kích hoạt tính năng xác thực tích hợp, v.v.

Tạo kiểu cho biểu mẫu

Tạo kiểu cho các biểu mẫu bằng cách sử dụng CSS, trong khi vẫn đảm bảo chúng vẫn hữu dụng và dễ đọc đối với mọi người.

Tạo kiểu cho các thành phần điều khiển biểu mẫu

Tìm hiểu cách triển khai các tùy chọn kiểm soát biểu mẫu bằng CSS.

JavaScript

Tìm hiểu cách sử dụng JavaScript để cải thiện biểu mẫu của bạn.

Hình thức thanh toán

Cải thiện tỷ lệ chuyển đổi bằng cách xây dựng các phương thức thanh toán tốt hơn.

Biểu mẫu địa chỉ

Giúp người dùng điền vào biểu mẫu địa chỉ một cách nhanh chóng và dễ dàng.

Tổng kết và các bước tiếp theo

Các tài nguyên khác giúp bạn thực hiện các bước tiếp theo.

Vậy, bạn đã sẵn sàng tìm hiểu về biểu mẫu chưa? Hãy bắt đầu nào.