HTML5 07 – Form trong HTML5

0
144

Bài số 7 trong series học HTML5, chúng ta sẽ cùng tìm hiểu về Form trong HTML5. Form là 1 định dạng đã rất quen thuộc trong HTML4, và trong HTML5, chúng ta sẽ tìm hiểu thêm về những thuộc tính, đặc điểm mới mà Form HTML5 hỗ trợ.

Cách tạo cấu trúc Form trong HTML5

Cách tạo Form trong HTML5 tương tự như HTML4, vẫn xây dựng dựa trên cấu trúc các thẻ cũ trong Form HTML4. Tuy nhiên, HTML5 giới thiệu thêm các thuộc tính mới và 1 số kiểu input giúp tạo Form có các tính năng mà trải nghiệm của người dùng tốt hơn.

Một số thuộc tính mới trong HTML5

Hiện tại HTML5 đã giúp ích cho chúng ta rất nhiều trong việc thiết kế web. một trong những hữu ích to lớn đó phải kể đến là HTML FORM Attributes.

HTML5 Form Attributes là gì? Đó là là những thuộc tính trong form mà ta định nghĩa, trước đây cần sự hỗ trợ của java nhưng bây giờ ta có thể dùng luôn HTML5. Việc thiết kế sẽ gọn nhẹ và thuận tiện hơn rất nhiều.

1. placeholder và autofocus

Thuộc tính đầu tiên mà HTML5 giới thiệu là placeholder. Thuộc tính này giúp cho phần tử <input><textarea> cung cấp thông tin gợi ý khi người dùng nhập dữ liệu.

Thuộc tính autofocus kích hoạt ngay phần tử khi load trang (để người dùng nhập dữ liệu ngay mà không cần bấm chuột vào).

2. required và autocomplete

Thuộc tính required chỉ ra bắt buộc phải nhập dữ liệu cho phần tử. Nếu để trong thì form sẽ không submit được và hiện thị thông báo nhắc nhở.

Thuộc tính autocomplete thiết lập với giá trị on hoặc off cho biết các phần tử trong form có tự động điền dữ liệu vào hay không. Nếu on thì trình duyệt căn cứ vào những dữ liệu người dùng từng nhập trước đây để gợi ý lựa chọn một trong các dữ liệu đó.

3. Danh sách các thuộc tính mới cho form trong HTML5

  • autofocus : tự động kích hoạt phần tử
  • form : một phần tử nằm bên ngoài thẻ form vẫn thuộc form nếu thuộc tính này trong phần tử chỉ đến id của form
  • formaction đặt thuộc tính này cho input kiểu submit thì nó chỉ ra địa chỉ form sẽ submit đến.
  • formenctype kiểu mã hóa dữ liệu khi post
  • formmethod đặt trong input kiểu submit giá trị này là get hoặc post
  • formnovalidate
  • formtarget
  • height và width
  • list danh sách dữ liệu lựa chọn
  • min và max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

Các định dạng hỗ trợ form mới trong HTML5

  • color nhập màu sắc
  • date nhập ngày tháng
  • datetime
  • datetime-local
  • email nhập email
  • month điều khiển chọn ngày tháng
  • number số
  • range dải số
  • search hộp tìm kiếm
  • tel nhập số điện thoại
  • time thời gian
  • url nhập địa chỉ url
  • week điều khiển chọn tuần

Ví dụ 1

Tạo hộp tìm kiếm có các từ gợi ý.

Ví dụ 2

Nhập email, địa chỉ web, số điện thoại

Kết luận

Như vậy bài hôm nay chúng ta đã tìm hiểu xong về Form trong HTML5, cách sử dụng các thuộc tính và các định dạng mới do HTML5 Form hỗ trợ. Cùng với đó là những ví dụ rất cụ thể giúp các bạn hiểu rõ hơn. Hy vọng các bạn đã có những kiến thức bổ ích qua bài viết này.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây