Bằng cách sử dụng các bảng cấu trúc biểu mẫu trên trang web HTML5 của bạn - núm vú

Ngay từ đầu, các trang web đã có khả năng thu thập dữ liệu từ người dùng. HTML5 có một bộ các phần tử mẫu chuẩn nhưng khá hữu ích mà bạn có thể sử dụng để nhận dữ liệu nhập. Các thành phần biểu mẫu này tuân theo nhiều quy tắc giống như các thẻ khác.

Hình này cho thấy một mẫu có chứa tất cả các phần tử HTML chính mà bạn có thể gặp phải:

Các thẻ bạn sử dụng để quản lý cấu trúc chung của biểu mẫu bao gồm:

• : Thẻ này chứa hình thức thực tế; nó bao gồm tất cả các yếu tố hình thức khác. Thẻ cũng nên bao gồm action = "thuộc tính. Điều này chỉ ra rằng bạn không có kế hoạch gọi một kịch bản phía máy chủ khi nộp biểu mẫu.

• : Thẻ đặc biệt này cho phép bạn nhóm một loạt các yếu tố đầu vào lại với nhau. Nó không bắt buộc, nhưng nó có thể làm cho các hình thức phức tạp dễ điều hướng hơn. Theo mặc định, một fieldset có một đường viền duy nhất xung quanh nó, nhưng bạn có thể thay đổi nó bằng CSS.

• : Bạn có thể thêm một huy hiệu vào một fieldset để hoạt động như một nhãn cho toàn bộ fieldset.

• : Đánh dấu văn bản dưới dạng nhãn kết hợp với một phần tử đầu vào cụ thể. Bạn có thể sử dụng tùy chọn cho thuộc tính để chỉ định phần tử đầu vào nào nhãn được liên kết. Thẻ nhãn thường được sử dụng để tạo kiểu dáng của các mẫu CSS dễ quản lý hơn.

Mã cho một trang sử dụng tất cả các thẻ cấu trúc thể hiện trong hình vẽ như sau:

formDemo.

Hộp văn bản
Nhập văn bản
Hộp văn bản
Mật khẩu
Văn bản Văn bản Văn bản của bạn ở đây
Chọn phần tử
Chọn Danh sách một hai ba bốn
Hộp kiểm tra Trứng Xanh Hàm
Nút radio Nút
Nút
nhỏ

Các thẻ trường, huy chương và nhãn không bắt buộc, nhưng chúng giúp bạn tổ chức trang để dễ dàng bố cục hơn với CSS. Sử dụng đúng các thẻ này và CSS thường làm cho các hình thức của bạn dễ dàng hơn khi làm việc hơn so với các hacks dựa trên bảng cũ.