[Bài 3]: Các thuộc tính mới trong form và input của HTML5

Bạn đang ở bài 3 trong 6 bài của serie HTML5 cơ bản.

bài trước chúng ta đã tìm hiểu về những thẻ tag mới trong HTML5, và hôm nay chúng ta sẽ tiếp tục tìm hiểu về những thuộc tính mới trong form và thẻ input.

Các thuộc tính mới trong form

+ autocomplete : Chỉ ra nếu trường dữ liệu trong form sẽ tự động hoàn thành dựa vào lịch sử người dùng. Thuộc tính autocomplete có 2 giá trị on và off, mặc định là on.

+ novalidate : Chỉ ra rằng form sẽ không kiểm tra trong quá trình gửi dữ liệu.

Các thuộc tính mới của thẻ input

+ placeholder : Hiển thị phần diễn giải cho ý nghĩa của trường nhập liệu trước khi nhập.

<input type="text" name="name" placeholder="Họ và tên">

+ autofocus : Chỉ định thẻ input được tự động chỉ định khi tải trang, nó có giá trị kiểu Boolean.

<input type="text" name="name" autofocus>

+ autocomplete : Khi có thuộc tính autocomplete được bật, trình duyệt sẽ tự động điền vào các giá trị dựa trên những gì mà người dùng đã xác định trước đó.

<input type="email" name="email" autocomplete="on">

+ required : Khi thêm thuộc tính này vào trường dữ liệu, trình duyệt sẽ bắt buộc bạn phải nhập dữ liệu trước khi gửi dữ liệu.

<input type="text" name="username" required>

+ pattern : Định nghĩa một biểu thức để kiểm tra một định dạng dữ liệu trước khi nhập vào trường dữ liệu.

<input type="text" name="country" pattern="[A-Za-z]{3}" title="Mã quốc gia bao gồm 3 kí tự">

+ list : Thuộc tính này sử dụng để gán dữ liệu từ phần tử <datalist> cho <input>

</pre>
<div class="example-code hljs xml"><span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">list</span>=<span class="hljs-value">"browsers"</span>></span>

<span class="hljs-tag"><<span class="hljs-title">datalist</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"browsers"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"Internet Explorer"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"Firefox"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"Chrome"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"Opera"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"Safari"</span>></span>
<span class="hljs-tag"></<span class="hljs-title">datalist</span>></span></div>
<pre>

+ multiple : Cho phép người dùng nhập nhiều hơn một giá trị vào thẻ <input>

<input type="file" name="image" multiple>

+ step : Xác định một bước nhảy đối với giá trị số học của một thẻ <input>

<input type="number" name="points" step="3">

+ min và max : Thuộc tính này xác định giá trị nhỏ nhất và giá trị lớn nhất của giá trị một thẻ <input>.

<input type="number" name="quantity" min="1" max="10">

+ form : Thuộc tính form định nghĩa một hoặc nhiều form mà một thẻ <input> có thể tham gia vào.

<input type="text" name="lname" form="form1">

+ formaction : Thuộc tính này xác định một địa chỉ URL của một tập tin sẽ xử lý các dữ liệu nhập vào khi form được gửi đi.

<input type="submit" formaction="/submit_form.php" value="Submit form">

+ formmethod : Thuộc tính này được sử dụng để định nghĩa một phương thức gửi dữ liệu (POST hoặc GET) tới địa chỉ URL xử lý (action) của form.

<input type="submit" formmethod="post" formaction="/submit_form.php" value="Gửi phương thức POST">

Kết luận:

Như vậy qua bài này chúng ta đã làm quen thêm các thuộc tính mới trong form và input trong HTML5, qua đó sẽ hỗ trợ cho các lập trình viên thao tác với form tốt hơn.

Xem tiếp bài trong serie HTML5 cơ bản

Bài trước: [Bài 2]: Các thẻ tag mới trong HTML5Bài kế tiếp: [Bài 4]: HTML5 Canvas là gì?
[Bài 3]: Các thuộc tính mới trong form và input của HTML5
4.8 (96.67%) 6 votes

Bình luận

Hãy trở thành người đầu tiên bình luận!

Thông báo
avatar
wpDiscuz