07/10/2022

Nhập các kiểu dữ liệu của các phần tử đầu vào trong HTML

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.

Tên:

Họ:


Dữ liệu mật khẩu

xác định trường mật khẩu.

Tên tài khoản:

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ên:

Họ:


Đặ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.

Tên:

Họ:



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.

Nam giới

Giống cái

Khác

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

Tôi có một chiếc xe đạp

tôi có một chiếc xe hơ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:

See also  Dropbox Paper là gì? Cách sử dụng Dropbox Paper

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.

Chọn màu sắc yêu thích của bạ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ị.

Ngày sinh:

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.

Nhập ngày trước 1980-01-01:

Nhập ngày sau 2000-01-01:

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ị.

Ngày sinh (ngày giờ):

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.

E-mail:

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.

Chọn tập tin:

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.

Sinh nhật (tháng và năm):

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.

See also  9 cách sửa máy tính Windows ngẫu nhiên thức dậy để kiểm tra các bản cập nhật
Số lượng (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.

Số lượng:

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).

Tìm kiếm trên Google:

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.

Số điện thoại:

Dữ liệu thời gian

See also  Tổng hợp cách lật ảnh trong Adobe Photoshop

đượ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.

chọn thời gian:

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.

Trang chủ:

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.

Chọn tuầ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