Bài báo giới thiệu các kiểu dữ liệu đầu vào cho phần tử trong HTML.
Dữ liệu văn bản
xác định dữ liệu đầu vào dưới dạng trường văn bản một dòng.
Dữ liệu mật khẩu
xác định trường mật khẩu.
Lưu ý: Ký tự trong trường mật khẩu sẽ được che đi (có dấu sao hoặc dấu chấm).
Gửi biểu mẫu
xác định nút để gửi biểu mẫu tới trình xử lý biểu mẫu, thường là trang chủ có tập lệnh xử lý đầu vào và được chỉ định bằng thuộc tính action. Nếu thuộc tính này bị bỏ qua, nút gửi sẽ hiển thị văn bản mặc định.
Đặt lại dữ liệu đầu vào
xác định một nút làm mới tất cả các giá trị trong biểu mẫu thành các giá trị mặc định.
Dữ liệu nút tròn
xác định một nút tròn để chỉ chọn một câu trả lời trong số các câu trả lời đã cho.
Dữ liệu hộp kiểm
xác định một hộp kiểm, cho phép người dùng bỏ chọn hoặc chọn nhiều câu trả lời
Dữ liệu .Button
xác định nút để nhấp.
Dữ liệu đầu vào HTML5
HTML5 cũng bao gồm một số kiểu dữ liệu đầu vào khác (các trình duyệt cũ hơn không hỗ trợ chúng, chúng sẽ hoạt động như ) bao gồm:
colordatedatetime-localemailmonthnumberrangesearchteltimeurlweek
Màu dữ liệu đầu vào
được sử dụng để tô màu trường đầu vào. Tùy thuộc vào trình duyệt, bảng màu sẽ xuất hiện.
Dữ liệu ngày tháng
xác định một trường dữ liệu ngày. Tùy thuộc vào trình duyệt, bộ chọn ngày sẽ được hiển thị.
Các thuộc tính tối thiểu và tối đa có thể được sử dụng để giới hạn ngày.
Dữ liệu ngày và giờ địa phương
xác định ngày và giờ trong trường dữ liệu, bất kể múi giờ. Tùy thuộc vào trình duyệt, bộ chọn ngày và giờ sẽ được hiển thị.
Dữ liệu email
xác định dữ liệu đầu vào là một địa chỉ email. Tùy thuộc vào việc trình duyệt có hỗ trợ hay không, địa chỉ sẽ được tự động xác minh. Một số điện thoại thông minh nhận dạng email và thêm “.com” vào bàn phím.
Dữ liệu là tệp
xác định vùng chọn tệp và nút “Duyệt qua” để chọn tệp và tải tệp lên.
Dữ liệu hàng tháng
cho phép người dùng chọn tháng và năm. Tùy thuộc vào việc trình duyệt có hỗ trợ hay không, bộ chọn ngày sẽ xuất hiện.
Dữ liệu số
xác định trường dữ liệu số, trường này có thể giới hạn số lượng được chấp nhận. Ví dụ dưới đây cho thấy một trường nhập số, có giá trị từ 1 đến 5.
Giới hạn dữ liệu đầu vào
Dưới đây là danh sách một số thuộc tính giới hạn đầu vào, được đánh dấu * là mới trong HTML5.
Thuộc tính Descriptiondisableddisables fieldmax * giá trị tối đa của datafield maxlengthmaximum character of datafieldmin * giá trị nhỏ nhất của datapattern * biểu thức kiểm tra giá trị đầu vào chỉ đọc chỉ định một trường dữ liệu chỉ có thể đọc được (không thể thay đổi) bắt buộc * trường bắt buộc (phải được điền) kích thước chiều rộng (tính bằng ký tự) của trường dữ liệu bước * khoảng cách hợp lệ giữa các giá trị của trường dữ liệu đánh giá giá trị mặc định của dữ liệu trường
Ví dụ dưới đây cho thấy một trường dữ liệu số có thể nhập từ 0 đến 100, các giá trị cách nhau 10 đơn vị, giá trị mặc định là 30.
Dữ liệu trong một phạm vi
xác định thời điểm giá trị chính xác không quan trọng, chẳng hạn như sử dụng thanh trượt. Giá trị mặc định nằm trong khoảng từ 0 đến 100. Bạn có thể tự chọn phạm vi bằng cách sử dụng thuộc tính min, max và step.
Tìm kiếm dữ liệu trường
được sử dụng để xác định trường tìm kiếm (như trường nhập văn bản).
Dữ liệu số điện thoại
được sử dụng để nhập số điện thoại và được hỗ trợ trên Safari 8.
Dữ liệu thời gian
được sử dụng để chọn thời gian (không theo múi giờ). Tùy thuộc vào việc trình duyệt có hỗ trợ hay không, bộ chọn thời gian sẽ xuất hiện.
Dữ liệu kiểu URL
dành cho trường dữ liệu có URL. Tùy thuộc vào việc trình duyệt có hỗ trợ hay không, địa chỉ sẽ tự động được xác nhận. Một số thiết bị điện thoại thông minh nhận ra URL và thêm “.com” vào bàn phím.
Dữ liệu hàng tuần
được sử dụng để cho phép người dùng chọn tuần và năm. Tùy thuộc vào việc trình duyệt có hỗ trợ hay không, một công cụ lựa chọn sẽ xuất hiện.
Bài trước: Các phần tử của biểu mẫu trong HTML
Bài tiếp theo: Các thuộc tính của phần tử đầu vào trong HTML
More Stories
Cách tạo cover Facebook, Twitter, YouTube, … nhanh chóng
Cách sử dụng AnyDesk Remote để điều khiển máy tính từ xa bằng điện thoại
Cách thêm nhiều ảnh vào Facebook và Messenger Story