Form trong HTML5

Form HTML5

Cách tạo form trong HTML5 tương tự như HTML5, tuy nhiên có giới thiệu 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

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)

<form>
    <label for="email">Địa chỉ Email: </label>
    <input type="text" name="email" placeholder="email@example.com" autofocus/>
</form>

Kết quả:

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 đó.

<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 ý

<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

<form>
    <input id="email" name="email" type="email" placeholder="example@example.com" />
    <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>