Tìm hiểu các thuộc tính mới, các phần tử mới ứng dụng trong FORM của HTML5

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,728
Được Like
12,680
Tìm hiểu các thuộc tính mới, các phần tử mới ứng dụng trong FORM của HTML5

Form trên HTML5 giới thiệu thêm các thuộc tính mới và một 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. Cách tạo form trong HTML5 cũng tương tự như HTML.

Một số thuộc tính mới
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)
Mã:
<form>
    <label for="email">Địa chỉ Email: </label>
    <input type="text" name="email" placeholder="[email protected]" autofocus/>
</form>

Kết quả:

screenshot_1590544423.png

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 đó.
Mã:
<form autocomplete="off">
    <label for="e-mail">Email: </label>
    <input name="Email" type="text" required />
    <input type="submit" value="Submit"/>
</form>

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 phần tử form HTML5 mới
  • 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ụ tạo hộp tìm kiếm có các từ gợi ý
Mã:
<input id="car" type="text" list="colors" />
<datalist id="colors">
    <option value="Red">
    <option value="Green">
    <option value="Yellow">
</datalist>

Ví dụ nhập email, địa chỉ web, số điện thoại
Mã:
<form>
    <input id="email" name="email" type="email" placeholder="[email protected]" />
    <br />
    <input id="url" name="url" type="url" placeholder="example.com" />
    <br />
    <input id="tel" name="tel" type="tel" placeholder="555.555.1211" />
    <br>
    <input type="submit" value="Submit"/>

</form>

screenshot_1590544540.png

Chúc các bạn thành công.


Nguồn: Internet​
 
  • Like
Reactions: THB

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom