Thứ Hai, 23 tháng 12, 2013
HTML5 loại đầu vào
HTML5 mới loại đầu vào
HTML5 có một số loại đầu vào mới cho hình thức. Những tính năng mới cho phép kiểm soát đầu vào tốt hơn và xác nhận.
Chương này bao gồm các loại đầu vào mới:
- màu
- ngày
- datetime
- datetime địa phương
- tháng
- số
- phạm vi
- tìm kiếm
- như vậy
- thời gian
- url
- tuần
Lưu ý: Không phải tất cả các trình duyệt hỗ trợ tất cả các loại đầu vào mới. Tuy nhiên, bạn đã có thể bắt đầu sử dụng chúng; Nếu họ không được hỗ trợ, họ sẽ hành xử như lĩnh vực văn bản thông thường.
Loại đầu vào: màu
Loại màu được sử dụng cho các lĩnh vực đầu vào nên có một màu sắc.
Ví dụ
Chọn một màu từ một bảng chọn màu sắc:
Select your favorite color: <input type="color" name="favcolor">
Thử nó cho mình »
Loại đầu vào: ngày
Loại ngày cho phép người dùng chọn một ngày.
Loại đầu vào: datetime
Các loại datetime cho phép người dùng lựa chọn một ngày và thời gian (với múi giờ).
Ví dụ
Xác định một ngày và kiểm soát thời gian (với múi giờ):
Birthday (date and time): <input type="datetime" name="bdaytime">
Thử nó cho mình »
Loại đầu vào: datetime địa phương
Các loại datetime địa phương cho phép người dùng lựa chọn một ngày và thời gian (không có múi giờ).
Ví dụ
Xác định một ngày và kiểm soát thời gian (không có múi giờ):
Birthday (date and time): <input type="datetime-local" name="bdaytime">
Thử nó cho mình »
Loại đầu vào: email
Loại email được sử dụng cho các lĩnh vực đầu vào cần có một địa chỉ e-mail.
Ví dụ
Xác định một lĩnh vực cho một địa chỉ e-mail (sẽ được tự động xác nhận khi gửi):
E-mail: <input type="email" name="email">
Thử nó cho mình »
Mẹo: Safari trên iPhone nhận các loại thư điện tử, và thay đổi bàn phím trên màn hình để phù hợp với nó (thêm @ và các tùy chọn com.).
Loại đầu vào: tháng
Các loại tháng cho phép người dùng lựa chọn một tháng và năm.
Ví dụ
Xác định một tháng và kiểm soát năm (không có múi giờ):
Birthday (month and year): <input type="month" name="bdaymonth">
Thử nó cho mình »
Loại đầu vào: số
Kiểu số được sử dụng cho các lĩnh vực đầu vào nên có một giá trị số.
Bạn cũng có thể thiết lập hạn chế về những con số này được chấp nhận:
Ví dụ
Xác định một số lĩnh vực (với giới hạn):
Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5">
Thử nó cho mình »
Sử dụng các thuộc tính sau đây để xác định những hạn chế:
- tối đa - xác định giá trị tối đa cho phép
- phút - quy định cụ thể giá trị tối thiểu cho phép
- bước - xác định khoảng thời gian số quy phạm pháp luật
- giá trị - Chỉ định giá trị mặc định
Loại đầu vào: phạm vi
Loại phạm vi được sử dụng cho các lĩnh vực đầu vào nên có một giá trị từ một loạt các con số.
Bạn cũng có thể thiết lập hạn chế về những con số này được chấp nhận.
Ví dụ
Xác định một điều khiển để nhập một số có giá trị chính xác là không quan trọng (như một điều khiển thanh trượt):
<input type="range" name="points" min="1" max="10">
Thử nó cho mình »
Sử dụng các thuộc tính sau đây để xác định những hạn chế:
- tối đa - xác định giá trị tối đa cho phép
- phút - quy định cụ thể giá trị tối thiểu cho phép
- bước - xác định khoảng thời gian số quy phạm pháp luật
- giá trị - Chỉ định giá trị mặc định
Loại đầu vào: tìm kiếm
Loại tìm kiếm được sử dụng cho các lĩnh vực tìm kiếm (một lĩnh vực tìm kiếm hoạt động như một trường văn bản thường xuyên).
Ví dụ
Xác định một lĩnh vực tìm kiếm (giống như một trang web tìm kiếm, hoặc tìm kiếm Google):
Search Google: <input type="search" name="googlesearch">
Thử nó cho mình »
Loại đầu vào: tel
Ví dụ
Xác định một lĩnh vực để nhập một số điện thoại:
Telephone: <input type="tel" name="usrtel">
Thử nó cho mình »
Loại đầu vào: thời gian
Các loại thời gian cho phép người dùng lựa chọn một thời điểm.
Ví dụ
Xác định một điều khiển để nhập một thời gian (không có múi giờ):
Select a time: <input type="time" name="usr_time">
Thử nó cho mình »
Loại đầu vào: url
Loại url được sử dụng cho các lĩnh vực đầu vào cần có một địa chỉ URL.
Giá trị của lĩnh vực url được tự động xác nhận khi biểu mẫu được gửi.
Ví dụ
Xác định một lĩnh vực để nhập một URL:
Add your homepage: <input type="url" name="homepage">
Thử nó cho mình »
Mẹo: Safari trên iPhone nhận ra các loại đầu vào url, và thay đổi bàn phím trên màn hình để phù hợp với nó (bổ sung thêm tùy chọn com.).
Loại đầu vào: tuần
Loại tuần cho phép người dùng lựa chọn một tuần và năm.
Ví dụ
Xác định một tuần và kiểm soát năm (không có múi giờ):
Select a week: <input type="week" name="week_year">
Thử nó cho mình »
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét