Form dùng để
- Cách thu thập thông tin từ khách truy cập
- Các loại điều khiển biểu mẫu khác nhau
- Các điều khiển biểu mẫu HTML5 mới
Theo truyền thống, thuật ngữ 'biểu mẫu' dùng để chỉ một tài liệu in có chứa khoảng trống để bạn điền thông tin.
HTML mượn khái niệm biểu mẫu để chỉ các phần tử khác nhau cho phép bạn thu thập thông tin từ những người truy cập vào trang web của bạn.
Cho dù bạn đang thêm một hộp tìm kiếm đơn giản vào trang web của mình hay bạn cần tạo các ứng dụng bảo hiểm phức tạp hơn, biểu mẫu HTML cung cấp cho bạn một tập hợp các yếu tố để thu thập dữ liệu từ người dùng của bạn. Trong chương này, bạn sẽ học:
● Cách tạo biểu mẫu trên trang web của bạn
● Các công cụ khác nhau để thu thập dữ liệu
● Các điều khiển biểu mẫu HTML5 mới
Các bạn hãy vui tay code loạt ví dụ sau để hiểu thêm về form nhé. Nhớ đặt tên theo TÊN FILE đã được ghi ở góc trên của ảnh ;) ví dụ các tên file là
text-input.html
password-input.html
textarea.html
radio-button.html
drop-down-list-box.html
checkbox.html
file-input-box.html
submit-button.html
image-button.html
button-and-hidden-controls.html
labelling-form-controls.html
grouping-form-elements.html
html5-form-validation.html
html5-date-input.html
html5-email-input.html
html5-url-input.html
html5-search-input.html
html5-placeholder.html
Xem ảnh và code theo nha bạn <3
Ví dụ này hiển thị một phản hồi và biểu mẫu đăng ký nhận bản tin. Nó sử dụng nhiều loại điều khiển biểu mẫu.
Phần tử <form> sử dụng thuộc tính action để chỉ ra trang mà dữ liệu đang được gửi đến. Mỗi điều khiển biểu mẫu nằm bên trong phần tử <form>. Các loại điều khiển biểu mẫu khác nhau phù hợp để thu thập các loại dữ liệu khác nhau. Phần tử <fieldset> được sử dụng để nhóm các câu hỏi liên quan lại với nhau. Phần tử <label> cho biết mục đích của mỗi điều khiển biểu mẫu.
Bạn hãy vận dụng kiến thức đã làm để tạo form như hình dưới đây ;)
Đăng nhận xét