HTML5 & CSS3 –HTML5 Input Types

HTML5 sở hữu nhiều kiểu dữ liệu nhập (input types) mới dành cho việc nhập liệu. Nhiều tính năng mới cho phép ta điều khiển và bắt lỗi được dữ liệu nhập vào.

Bài này trình bày những kiểu input mới sau:

• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

Lưu ý: Có một vài trình duyệt chưa hỗ trợ những kiều input mới này.

Input Type color:

Kiểu color được dùng khi ta muốn nhập một thông tin chứa mã màu.

Trình duyệt hỗ trợ: Opera, Chrome

Ví dụ
Chọn một màu trong hộp chọn mã màu:

<input type=”color” name=”favcolor”> 

Input Type: date

Cho phép ta chọn ngày tháng.

Trình duyệt hỗ trợ: Opera, Chrome, Safari

Ví dụ
Chọn ngày sinh:

<input type="date" name="bday"> 

Input Type: datetime

Cho phép ta chọn ngày và giờ (có múi giờ).

Trình duyệt hỗ trợ: Opera, Safari

Ví dụ
Chọn ngày tháng, thời gian trong bảng sau:

<input type="datetime" name="bdaytime">

Input Type: datetime-local

Cho phép ta chọn ngày và giờ (không có múi giờ).

Trình duyệt hỗ trợ: Opera, Safari

Ví dụ
Chọn ngày tháng, thời gian trong bảng sau:

<input type="datetime-local" name="bdaytime"> 

Input Type: email

Cho phép ta nhập địa chỉ email, nếu nhập không hợp lệ sẽ tự động báo lỗi khi ta nhấn gửi thông tin (submit).

Trình duyệt hỗ trợ: Opera, Chrome, Firefox

Ví dụ
Nhập một địa chỉ email, bắt lỗi nhập sai:

<input type=”email” name=”usremail”>

Mách nhỏ: Safari trên iPhone chấp nhận kiểu nhập này, và nó sẽ tự động chuyển dạng bàn phím phù hợp (adds @ and .com options).

Input Type: month

Cho phép ta chọn ngày tháng
Trình duyệt hỗ trợ: Opera, Safari, Chrome

Ví dụ
Chọn ngày tháng (không múi giờ)

<input type="month" name="bdaymonth">

Input Type: number

Cho phép nhập dữ liệu chứa giá trị là kiểu số.
Bạn có thể thiết lập số nhỏ nhất đến số lớn nhất mà người dùng có thể nhập.

Trình duyệt hỗ trợ: Opera, Safari, Chrome

Ví dụ
Nhập một số (có thiết lập hạn chế):

<input type=”number” name=”quantity” min=”1″ max=”5″>  

Các thuộc tính:
• max – giá trị lớn nhất có thể nhập
• min – giá trị lớn nhất có thể nhập
• step – bước số nhập, số sau sẽ tăng thêm “step” đơn vị so với số trước (ví dụ như step =”2” thì ta có thể nhập là 1,3,5,7,..)
• value – Giá trị mặc định

Ví dụ

<input type="number" name="points" min="0" max="10" step="3" value="6"> 

Input Type: range

Cho phép ra nhập số trong một khoảng quy định.

Trình duyệt hỗ trợ: Opera, Safari , Chrome

Ví dụ
Nhập 1 số bằng cách dùng thanh trượt.

<input type="range" name="points" min="1" max="10">  

Các thuộc tính:
• max – giá trị lớn nhất có thể nhập
• min – giá trị lớn nhất có thể nhập
• step – bước số nhập, số sau sẽ tăng thêm “step” đơn vị so với số trước (ví dụ như step =”2” thì ta có thể nhập là 1,3,5,7,..)
• value – Giá trị mặc định

Input Type: search

Cho phép ta nhập từ cần tìm (trường tìm kiếm hoạt động như trường nhập liệu thông thường).

Trình duyệt hỗ trợ: Safari , Chrome

Ví dụ
Nhập dữ liệu tìm kiếm (vd như tìm kiếm google):

Search Google:

<input type="search" name="googlesearch">

Input Type: tel

Ví dụ
Nhập số điện thoại:

<input type="tel" name="usrtel">  

Input Type: time

Cho phép người dùng chọn giờ.

Trình duyệt hỗ trợ: Opera, Safari , Chrome

Ví dụ
Nhập dữ liệu ngày giờ (không múi giờ):

<input type="time" name="user_time">  

Input Type: url

Cho phép ta nhập một địa chỉ liên kết, tự bắt lỗi khi ta gửi dữ liệu.

Trình duyệt hỗ trợ: Opera, Chrome, Firefox

Ví dụ
Nhập dữ liệu vào thanh địa chỉ:

<input type="url" name="homepage"> 

Mách nhỏ: Safari trên iPhone chấp nhận kiểu nhập này, và nó sẽ tự động chuyển dạng bàn phím phù hợp (adds @ and .com options).

Input Type: week

Cho phép ta chọn tuần và năm.

Trình duyệt hỗ trợ: Opera, Safari, Chrome

Ví dụ
Tạo một trường dữ liệu nhập tuần và năm (không có múi giờ):

<input type="week" name="week_year"> 

Theo khoapham.vn