Thuộc tính type trong thẻ input
Bài này sẽ đề cập đến tất cả các giá trị của thuộc tính type trong thẻ input.
Kiểu text
tạo ra một dòng giúp người dùng nhập liệu:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | Họ: Tên: Lưu ý:mặcđịnhbảnthânform không hiểnthịrabênngoài,chỉ cácthành phầntrong form hiểnthị. Chiềudàikhung nhập liệukiểutextmặcđịnhlà20kýtự.
|
Demo
Khi hiển thị trên trình duyệt, ví dụ trên nhìn sẽ tương tự như thế này:
Họ:
Tên:
Kiểu password
tạo ra một dòng để người dùng nhập mật khẩu:
Tênđăng nhập: Mậtkhẩu:
Nhữngkýtựtrongômậtkhẩusẽđượccheđi[bằngdấu hoa thịhoặcchấmtròn].
|
Demo
Khi hiển thị trên trình duyệt, ví dụ trên nhìn sẽ tương tự như thế này:
Tên đăng nhập:
Mật khẩu:
Những ký tự trong ô mật khẩu sẽ được che đi [bằng dấu hoa thị hoặc chấm tròn].
Kiểu submit
giúp bạn tạo một nút nhấn để gửi thông tin mà người dùng đã nhập vào.
Những thông tin này sau đó sẽ được gửi tới máy chủ để xử lý và trả về kết quả.
Thuộc tính action của form sẽ quyết định thông tin được gửi đi đâu:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | Họ: Tên: Nếu bạnnhấnvàonút"Gửi",dữliệutrong formsẽđượcchuyểntới trang"action_page.php".
|
Demo
Khi hiển thị trên trình duyệt, ví dụ trên nhìn sẽ tương tự như thế này:
Nếu thiếu giá trị value trong thẻ input subit, nút sẽ lấy giá trị mặc định:
Họ: Tên:
|
Demo
Kiểu radio
giúp bạn tạo một nút nhấn radio.
Nút radio chỉ cho phép người dùng chọn MỘT trong số các lựa chọn:
Nam Nữ
|
Demo
Khi hiển thị trên trình duyệt, ví dụ trên nhìn sẽ tương tự như thế này:
Nam
Nữ
Kiểu checkbox
giúp bạn tạo một ô tích giá trị.
Người dùng có thể chọn nhiều hơn một giá trị hoặc không chọn giá trị nào.
Tôicómộtchiếcxeđạp Tôicómộtchiếcôtô
|
Demo
Khi hiển thị trên trình duyệt, ví dụ trên nhìn sẽ tương tự như thế này:
Thẻ
Thẻ được sử dụng để tạo nút nhấn:
Nhấnvào đây!
|
Demo
Khi hiển thị trên trình duyệt, ví dụ trên nhìn sẽ tương tự như thế này:
Các kiểu input trong HTML5
HTML5 đã thêm những kiểu input sau:
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
Những kiểu input không được hỗ trợ trong những trình duyệt cũ sẽ trở thành kiểu input text.
Kiểu number
Thẻ tạo ô nhập liệu chỉ có giá trị là số.
Bạn có thể thiết lập điều kiện các số được nhập vào.
Những điều kiện của bạn có được áp dụng hay không thì còn tùy thuộc vào sự hỗ trợ của trình duyệt.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | Phụthuộcvàosựhỗtrợ củatrình duyệt: Mànhữngđiềukiệncủabạncóđược ápdụng hay không. Nhậpvàosốtừ1đến 5: Lưu ý:type="number"khôngđượchỗtrợtrong trình duyệttừIE9 trởvề trước.
|
Demo
Điều kiện trong thẻ input
Dưới đây là danh sách các điều kiện phổ biến được sử dụng trong thẻ input [có một vài điều kiện mới thuộc HTML5]:
| disabled | Khóa thẻ input |
| max | Giá trị lớn nhất có thể nhập vào trong thẻ input |
| maxlength | Số ký tự tối đa có thể nhập vào trong thẻ input |
| min | Giá trị nhỏ nhất có thể nhập vào trong thẻ input |
| pattern | Kiểm tra dự liệu nhập vào có đúng theo định dạng mẫu hay không |
| readonly | Dữ liệu chỉ có tác dụng hiển thị [không thể thay đổi] |
| required | Ô nhập liệu bắt buộc [không được bỏ trống] |
| size | Quy định chiều dài của khung nhập liệu [đơn vị là ký tự, không phải px] |
| step | Quy định mức nhảy cho ô nhập liệu [dự liệu nhập vào phải là bội số của step] |
| value | Thiết lập giá trị mặc định của ô nhập liệu |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | Phụthuộcvàosựhỗtrợ củatrình duyệt: Cácbướcnhảysốcóđượcápdụng hay không. Nhậpsố: Lưu ý:type="number"khôngđượchỗtrợtrong trình duyệttừIE9 trởvề trước.
|
Demo
Kiểu date
Thẻ tạo ô nhập liệu chỉ có giá trị là ngày tháng.
Nếu trình duyệt hỗ trợ, bạn sẽ nhìn thấy khung chọn ngày tháng trong phần nhập liệu.
Kiểu date chưa được hỗ trợ trong trình duyệt Internet Explorer và Firefox.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | Nếutrình duyệthỗtrợ: Bạnsẽnhìnthấykhung chọnngàytháng trong phầnnhậpliệu.
Ngàysinh:
Lưuý:type="date"chưađượchỗtrợtrong trình duyệt Internet ExplorervàFirefox.
|
Demo
Ngoài ra, bạn có thể thêm một số điều kiện khi nhập ngày tháng:
Nhậpngàysinh trước 01/01/1980: Nhập ngàysinh sau01/01/2000:
Lưuý:type="date" chưađượchỗtrợtrong trình duyệtInternet ExplorervàFirefox.
|
Demo
Kiểu color
Thẻ tạo ô nhập liệu chỉ chứa giá trị là màu.
Nếu trình duyệt hỗ trợ, bạn sẽ nhìn thấy khung chọn màu trong phần nhập liệu.
Kiểu color chưa được hỗ trợ trong trình duyệt Internet Explorer và Safari.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | Nếutrình duyệthỗtrợ: Bạnsẽnhìnthấykhung chọnmàutrong phầnnhậpliệu. Chọnmàuyêuthíchcủabạn: Lưuý: type="color"chưađượchỗtrợtrong trình duyệtInternet ExplorervàSafari.
|
Demo
Kiểu range
Thẻ tạo ô nhập liệu chỉ chứa giá trị trong một khoảng nhất định.
Nếu trình duyệt hỗ trợ, bạn sẽ nhìn thấy thanh kéo thay vì ô nhập liệu.
Kiểu range không được hỗ trợ trong các trình duyệt Internet Explorer 9 trở về trước.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | Nếutrình duyệthỗtrợ: bạnsẽnhìnthấythanhkéothayvìônhậpliệu. Điểm: Lưuý: type="range"không đượchỗtrợtrongcáctrình duyệtInternet Explorer9trởvềtrước.
|
Demo
Bạn có thể thêm một số điều kiện trong thẻ input range như: min, max, step, value.
Kiểu month
Thẻ tạo ô nhập liệu cho phép người dùng chọn tháng và năm.
Nếu trình duyệt hỗ trợ, bạn sẽ nhìn thấy khung chọn tháng năm trong phần nhập liệu.
Kiểu month chưa được hỗ trợ trong trình duyệt Internet Explorer và Firefox.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | Nếutrình duyệthỗtrợ: Bạnsẽnhìnthấykhung chọnthángnăm. Nhập ngàysinh[thángvànăm]: Lưuý: type="month"chưađượchỗ trợtrong trình duyệtInternet ExplorervàFirefox.
|
Demo
Kiểu week
Thẻ tạo ô nhập liệu cho phép người dùng chọn tuần trong năm.
Nếu trình duyệt hỗ trợ, bạn sẽ nhìn thấy khung chọn tuần trong năm ở phần nhập liệu.
Kiểu week chưa được hỗ trợ trong trình duyệt Internet Explorer và Firefox.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | Nếutrình duyệthỗtrợ: Bạnsẽnhìnthấykhung tuầnvànăm. Chọn tuần: Lưu ý: type="week"chưađượchỗtrợtrong trình duyệtInternet ExplorervàFirefox.
|
Demo
Kiểu time
Thẻ tạo ô nhập liệu cho phép người dùng chọn thời gian [không có múi giờ].
Nếu trình duyệt hỗ trợ, bạn sẽ nhìn thấy khung chọn thời gian trong phần nhập liệu.
Kiểu time chưa được hỗ trợ trong trình duyệt Internet Explorer và Firefox.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | Nếutrình duyệthỗtrợ: Bạnsẽnhìnthấykhung chọnthờigian. Chọn thờigian: Lưu ý: type="time"chưađượchỗtrợtrong trình duyệtInternet ExplorervàFirefox.
|
Demo
Kiểu datetime
Thẻ tạo ô nhập liệu cho phép người dùng chọn thời gian và ngày tháng [có múi giờ].
Kiểu input datetime đã bị gỡ bỏ khỏi chuẩn HTML. Bạn sử dụng kiểu datetime-local để thay thế.
Kiểu datetime-local
Thẻ tạo ô nhập liệu cho phép người dùng chọn thời gian và ngày tháng [không có múi giờ].
Nếu trình duyệt hỗ trợ, bạn sẽ nhìn thấy khung chọn thời gian và ngày tháng trong phần nhập liệu.
Kiểu datetime-local chưa được hỗ trợ trong trình duyệt Internet Explorer và Firefox.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | Nếutrình duyệthỗtrợ: Bạnsẽnhìnthấykhung chọnthờigianvàngàytháng. Chọnngàysinh[thờigianvàngàytháng]: Lưu ý: type="datetime-local"chưađượchỗtrợtrong trình duyệtInternet ExplorervàFirefox.
|
Demo
Kiểu email
Thẻ tạo ô nhập liệu chỉ chứa giá trị là email.
Nếu trình duyệt hỗ trợ, địa chỉ email sẽ tự động được kiểm tra khi nhấn submit.
Một số điện thoại thông minh có thể nhận dạng kiểu email và thêm nút “.com” trên bàn phím ảo.
Kiểu email không được hỗ trợ trong trình duyệt Internet Explorer 9 [cùng các phiên bản trước đó] và Safari.
NhậpE-mail: Lưuý:type="email" khôngđượchỗtrợtrong trình duyệtInternet Explorer9[cùngcácphiênbản trướcđó]vàSafari.
|
Demo
Kiểu search
Thẻ tạo ô nhập liệu tìm kiếm.
Kiểu search không được hỗ trợ trong trình duyệt Internet Explorer, Firefox và Opera.
Từkhóatìmkiếm: Lưu ý: type="search"chưađượchỗtrợtrong trình duyệtInternet Explorer,Firefoxvà Opera.
|
Demo
Kiểu tel
Thẻ tạo ô nhập liệu chỉ chứa giá trị là số điện thoại.
Hiện tại kiểu tel chỉ được hỗ trợ trên trình duyệt Safari 8.
Sốđiệnthoại: Lưuý: type="tel"chỉđượchỗtrợtrêntrình duyệtSafari8.
|
Demo
Kiểu url
Thẻ tạo ô nhập liệu chỉ chứa giá trị là địa chỉ web.
Nếu trình duyệt hỗ trợ, địa chỉ sẽ tự động được kiểm tra khi nhấn submit.
Một số điện thoại thông minh có thể nhận dạng kiểu url và thêm nút “.com” trên bàn phím ảo.
Kiểu url không được hỗ trợ trong trình duyệt Internet Explorer 9 [cùng các phiên bản trước đó] và Safari.
Địachỉwebsitecủa bạn: Lưu ý: type="url"khôngđượchỗtrợtrong trình duyệtInternet Explorer9[cùng cácphiênbảntrướcđó]vàSafari.
|
Demo
Bài tập
Bài tập 1 Bài tập 2 Bài tập 3 Bài tập 4 Bài tập 5