Thứ hai, 28/09/2020 | 00:00 GMT+7

Cách sử dụng các kiểu nhập HTML5

<input> phần tử <input> là một trong những phần tử phức tạp và mạnh mẽ nhất trong tất cả các phần tử HTML5. Đổi lại, thuộc tính type xác định cách một phần tử <input> nhất định sẽ chấp nhận dữ liệu user . Điều này làm cho <input> và type hai khái niệm quan trọng trong phát triển web.

Hiện tại có 22 kiểu đầu vào cho HTML5 . Hướng dẫn này sẽ xem xét tất cả chúng.

Thuộc tính chuẩn

Trước khi thảo luận về từng loại đầu vào khác nhau, hãy lưu ý mọi loại đều chấp nhận các thuộc tính chung sau:

autocomplete - chuỗi để cho biết chức năng tự động hoàn thành nào sẽ áp dụng cho đầu vào, thường được đặt thành on để cho phép tự động hoàn thành
autofocus - boolean để cho biết liệu đầu vào có được autofocus tự động hay không (khi tải trang)
disabled - boolean để cho biết liệu đầu vào có nên bị vô hiệu hóa hay không
form - ID của <form> đầu vào là một thành viên, mặc định là biểu mẫu gần nhất có chứa đầu vào
list - ID của phần tử <datalist> cung cấp danh sách các giá trị được đề xuất, hiện chưa được hỗ trợ rộng rãi
name - tên của đầu vào, được sử dụng làm chỉ báo trên dữ liệu đã gửi
required - boolean để cho biết liệu giá trị có được yêu cầu trước khi <form> có thể được gửi hay không
tabindex - số để cho biết thứ tự đầu vào sẽ nhận được tiêu điểm khi user truy cập TAB
value - value hiện tại của đầu vào

Bất kỳ thuộc tính cụ thể của loại nào đều được ghi lại trong phần của loại đó.

Lưu ý: Mặc dù được hỗ trợ khá tốt trên các trình duyệt hiện đại, nhưng vẫn có những trình duyệt có thể không hỗ trợ các kiểu nhập nâng cao hơn trong HTML5. Trong những trường hợp đó, kiểu nhập không được hỗ trợ sẽ dự phòng một cách duyên dáng về text nhập text thuần túy.

Ngoài ra, trong khi nhiều loại bao gồm xác thực như loại email , bạn vẫn nên triển khai xác thực phía server .

Bản văn

<input type="text">

Loại đầu vào mặc định của ta , văn bản, là hình thức đầu vào cơ bản nhất . Đó là một trường chấp nhận văn bản dạng tự do.

Text chấp nhận các thuộc tính sau:

maxlength - ký tự tối đa được coi là hợp lệ
minlength - ký tự tối thiểu được coi là hợp lệ
pattern - biểu thức chính quy cần khớp để được coi là hợp lệ
placeholder - văn bản mẫu để hiển thị khi đầu vào trống
readonly - boolean liệu đầu vào có nên chỉ đọc không
size - chiều rộng bao nhiêu ký tự mà đầu vào sẽ hiển thị là
spellcheck - boolean để chuyển đổi kiểm tra chính tả

Mật khẩu

<input type="password">

Giống như text nhập text của ta , kiểu password là kiểu nhập văn bản tự do với phần thưởng bổ sung là che đầu vào của user để bảo mật.

password chấp nhận tất cả các thuộc tính bổ sung dưới type trừ spellcheck .

Ẩn

<input type="hidden">

Loại hidden là một trường văn bản dạng tự do khác, nhưng nó không hiển thị.

Loại ẩn không có bất kỳ thuộc tính bổ sung nào, nhưng nó có một tính năng khác:

Nếu bạn đặt thuộc tính name thành _charset_ , thì giá trị cho đầu vào sẽ trở thành giá trị của mã hóa ký tự của biểu mẫu đang được gửi.

Địa chỉ Email

<input type="email">

Loại email cung cấp xác thực định dạng địa chỉ email.

Ngoài các thuộc tính chung, cũng như các thuộc tính của loại văn bản, loại email chấp nhận một thuộc tính boolean có tên là multiple . Điều này cho phép đầu vào chấp nhận danh sách địa chỉ email được phân tách bằng dấu phẩy.

Con số

<input type="number">

Kiểu number giới hạn đầu vào cho một số (số thực hoặc số nguyên). Trong hầu hết các trình duyệt, nó cũng cung cấp các node để tăng hoặc giảm giá trị.

Để tiến thêm một bước nữa, hầu hết các trình duyệt trên điện thoại di động đều lấy gợi ý từ loại này và hiển thị bàn phím số thay vì bàn phím đầy đủ khi nhập dữ liệu.

Kiểu số chấp nhận tất cả các thuộc tính chung, chia sẻ placeholder và readonly với kiểu văn bản, đồng thời giới thiệu một số thuộc tính dành riêng cho số:

min - giá trị tối thiểu được coi là hợp lệ
max - giá trị lớn nhất được coi là hợp lệ
step - khoảng thời gian sử dụng khi nhấp vào mũi tên lên và xuống

Tìm kiếm

<input type="search">

Loại tìm kiếm thực sự là một loại văn bản với phần thưởng được thêm vào của một nút để xóa văn bản đã nhập. Nó chia sẻ các thuộc tính bổ sung giống như một kiểu nhập text thông thường.

Số điện thoại

<input type="tel">

Loại tel nhằm chấp nhận số điện thoại, nhưng loại tel không thực sự xử lý việc xác thực số điện thoại. Tuy nhiên, bởi vì loại này chấp nhận thuộc tính pattern , ta có thể thêm xác thực cho bất kỳ định dạng số điện thoại nào mà ta muốn:

<input type="tel" pattern="([0-9]{3}) [0-9]{3}-[0-9]{4}"> <br><small>Format: (800) 555-1212</small>

Loại số điện thoại chấp nhận tất cả các thuộc tính tiêu chuẩn mà loại văn bản thực hiện ngoại trừ spellcheck .

Bộ định vị tài nguyên chung (URL)

<input type="url">

Không giống như loại số điện thoại, loại URL chấp nhận và xác thực đầu vào của user , mong rằng nó trống hoặc là một URL tuyệt đối được định dạng đúng.

Loại này không đảm bảo URL thực sự hợp lệ (phân giải domain , tải trang web, v.v.) và hoàn toàn là kiểm tra tỉnh táo về mẫu dữ liệu được nhập: protocol://domainAndSlashesAndSuch

Giống như hầu hết các kiểu nhập văn bản khác của ta , kiểu URL cũng chấp nhận các thuộc tính giống như kiểu văn bản của ta mà không cần spellcheck .

Hộp kiểm

<input type="checkbox">

checkbox là một loại đầu vào đại diện cho lựa chọn một hoặc nhiều mục, thường được hiển thị dưới dạng danh sách các tùy chọn. Nếu bạn muốn sử dụng nhiều hộp kiểm, bạn cần tạo nhiều đầu vào loại hộp kiểm.

Bản thân đầu vào chỉ hiển thị hộp kiểm thực tế chứ không phải bất kỳ văn bản nào, vì vậy bạn sẽ phải tự xử lý phần đó.

checked - boolean để cho biết hộp kiểm đã được chọn hay chưa

Nút radio

<input type="radio">

đầu vào loại radio có thể được coi là version "chọn một" của hộp kiểm. Nhiều đầu vào loại vô tuyến được coi là một group và chỉ có thể chọn một nút radio trong group đã nói tại một thời điểm.

checked - boolean để cho biết đài đã được chọn hay chưa

loại radio cũng sử dụng boolean checked .

Phạm vi

<input type="range">

Đầu vào kiểu range giống như version trưởng thành của kiểu số. Nó đại diện cho một giá trị số, nhưng hiển thị cho user một thanh trượt để chọn giá trị của họ.

Cũng giống như kiểu số, đầu vào kiểu phạm vi chấp nhận cùng các thuộc tính min , max và step ngoài các thuộc tính đầu vào chung.

Màu sắc

<input type="color">

Bạn sẽ không bao giờ cần phải lùng sục trên Internet để tìm kiếm công cụ chọn màu tốt nhất cho khuôn khổ yêu thích của bạn .

Đầu vào loại color hiển thị cho user một nút hiển thị màu đang được chọn và khi được nhấp vào, sẽ hiển thị cho user một bảng màu có thể di chuyển, cho phép họ nhấp để chọn màu hoặc thậm chí nhập mã màu thập lục phân.

Loại đầu vào color bị hạn chế hơn đáng kể so với hầu hết các loại đầu vào khác của ta . Thuộc tính duy nhất mà nó hỗ trợ (ngoài type ) là value . Không có thuộc tính đầu vào chung nào khác là hợp lệ.

File

<input type="file">

Một trong những kiểu đầu vào ngoạn mục hơn là kiểu đầu vào file . Loại đầu vào này giúp user dễ dàng chọn file hoặc các file từ máy tính của họ, thường là tải lên server từ xa.

Gần đây hơn, đầu vào loại file đã được mở rộng để chấp nhận dữ liệu từ máy ảnh của user mà sau đó có thể được truyền.

accept - các loại file hợp lệ (được phân tách bằng dấu phẩy, phần mở rộng và / hoặc loại MIME)
capture - nguồn để sử dụng cho đầu vào hình ảnh hoặc video. Bạn có thể chỉ định user cho camera quay mặt user / camera selfie và environment cho camera hướng ra ngoài
files - một <FileList> của file được chọn hoặc các file
multiple - boolean để cho biết user có thể chọn nhiều hơn một file hay không

nút

<input type="button">

Rất giống với phần tử nút, đầu vào kiểu button chỉ là một nút.

Một nút không có chức năng ngoài hộp. Nếu bạn muốn một nút thực hiện một việc gì đó, bạn cần phải đính kèm một trình xử lý sự kiện hoặc sử dụng submit hoặc reset để có một nút hoạt động.

Thuộc tính quan trọng nhất đối với đầu vào loại button là value , vì đó là value được hiển thị trên chính nút (tương tự với <button>value</button> ).

Hình ảnh

<input type="image">

Loại đầu vào image dành cho khi bạn muốn có một nút nhưng muốn sử dụng hình ảnh thay thế.

Không giống như loại nút, hình ảnh có nhiều khả năng hơn một chút tùy thuộc vào thuộc tính bạn cung cấp:

alt - chuỗi văn bản thay thế
height - chiều cao tính bằng pixel để hiển thị hình ảnh
src - URL nguồn của hình ảnh
width - chiều rộng tính bằng pixel để hiển thị hình ảnh

Và nếu bạn muốn sử dụng nó như một nút gửi biểu mẫu:

formaction - URL để gửi biểu mẫu tới
formenctype - loại mã hóa để sử dụng, xử lý khi bạn gửi file
formmethod - phương thức HTTP để sử dụng khi gửi
formnovalidate - boolean để cho biết có nên bỏ qua xác thực biểu mẫu hay không
formtarget - nơi tải kết quả gửi biểu mẫu

Nút Reset

<input type="reset">

Kiểu reset là phần mở rộng của đầu vào kiểu nút. Khi được nhấp vào, nó sẽ đặt lại biểu mẫu về trạng thái ban đầu.

Bởi vì nó là một phần mở rộng của loại nút, loại đặt lại chấp nhận một giá trị được sử dụng làm văn bản nút.

Nút gửi

<input type="submit">

Một chút ít phá hoại, các submit loại đầu vào sẽ gửi biểu mẫu hiện tại khi được nhấp vào.

ngày

<input type="date">

Đầu vào kiểu date không chỉ mong đợi đầu vào từ user ở định dạng ngày tháng mà còn cung cấp các node lên và xuống để cập nhật ngày tháng và một công cụ chọn ngày nhỏ đáng yêu mà user có thể hiển thị và sử dụng.

Lưu ý: Giá trị được hiển thị sẽ luôn được hiển thị ở định dạng dựa trên ngôn ngữ của user , nhưng bản thân giá trị luôn ở định dạng CCYY-MM-DD .

Thông số:

min - ngày sớm nhất được coi là hợp lệ
max - ngày gần nhất được coi là hợp lệ
readonly - boolean liệu đầu vào có nên chỉ đọc không
step - khoảng thời gian sử dụng khi nhấp vào mũi tên lên và xuống

Thời gian

<input type="time">

Tương tự như kiểu nhập ngày, kiểu nhập time cầu user nhập ở định dạng chuỗi thời gian và cung cấp cho user các node lên và xuống để tăng và giảm giá trị giờ và phút cũng như chuyển đổi kinh tuyến (AM / BUỔI CHIỀU).

Trên một số trình duyệt, trải nghiệm hiện đại hơn được trình bày dưới dạng công cụ chọn thời gian có thanh trượt giờ và phút để giúp mọi thứ trở nên dễ dàng hơn.

min - thời gian sớm nhất được coi là hợp lệ
max - thời gian gần nhất được coi là hợp lệ
readonly - boolean liệu đầu vào có nên chỉ đọc không
step - khoảng thời gian sử dụng khi nhấp vào mũi tên lên và xuống

Ngày và giờ local

<input type="datetime-local">

Lấy ngày và giờ đầu vào và kết hợp chúng thành một đầu vào duy nhất là bước hợp lý tiếp theo, nhưng tiếc là kiểu nhập datetime-local gần như không được hỗ trợ như đã nói ở trên.

min - ngày và giờ sớm nhất được coi là hợp lệ
max - ngày và giờ mới nhất được coi là hợp lệ
readonly - boolean liệu đầu vào có nên chỉ đọc không
step - khoảng thời gian sử dụng khi nhấp vào mũi tên lên và xuống

tháng

<input type="month">

Đầu vào loại month cung cấp giao diện tương tự với loại ngày và phần ngày của loại ngày giờ-cục bộ giới hạn lựa chọn trong tháng và năm.

Khi có sự hỗ trợ, điều này sẽ trở thành một loại đầu vào tuyệt vời để chấp nhận ngày hết hạn của thẻ tín dụng cũng như ngày sinh nhật.

min - tháng sớm nhất được coi là hợp lệ
max - tháng gần nhất được coi là hợp lệ
readonly - boolean liệu đầu vào có nên chỉ đọc không
step - khoảng thời gian sử dụng khi nhấp vào mũi tên lên và xuống

Tuần

<input type="week">

Đầu vào loại week như loại tháng, hiển thị cho user cùng một bộ chọn lịch quen thuộc, nhưng giới hạn lựa chọn trong một tuần cụ thể.

min - tuần sớm nhất trong năm được coi là hợp lệ
max - tuần gần nhất trong năm được coi là hợp lệ
readonly - boolean liệu đầu vào có nên chỉ đọc không
step - khoảng thời gian sử dụng khi nhấp vào mũi tên lên và xuống

Kết luận

Phần tử <input> đã trải qua một chặng đường dài, mở rộng thành một bộ đầy đủ (mặc dù chưa được hỗ trợ đầy đủ) các loại đầu vào của user . Hỗ trợ cho các kiểu mới này đang được cải thiện nhanh chóng và đối với hầu hết các kiểu mới, việc quay trở lại kiểu nhập văn bản thuần túy có thể không phải là lý tưởng, nhưng ít nhất nó cũng khá duyên dáng.

Tags:

Các tin liên quan