Dưới đây là các kiểu giá trị đầu vào khác nhau mà bạn có thể sử dụng trong HTML:

<input type=”button”>

<input type=”checkbox”>

<input type=”color”>

<input type=”date”>

<input type=”datetime-local”>

<input type=”email”>

<input type=”file”>

<input type=”hidden”>

<input type=”image”>

<input type=”month”>

<input type=”number”>

<input type=”password”>

<input type=”radio”>

<input type=”range”>

<input type=”reset”>

<input type=”search”>

<input type=”submit”>

<input type=”tel”>

<input type=”text”>

<input type=”time”>

<input type=”url”>

<input type=”week”>

Lưu ý: Giá trị mặc định của thuộc tính type là “text”

1. Nhập văn bản trong HTML

<input type=”text”> xác định trường nhập một dòng văn bản trong HTML

Ví dụ:

2. Nhập mật khẩu trong HTML

<input type=”password”> xác định một trường mật khẩu trong HTML

Ví dụ:

 Các ký tự trong trường mật khẩu được che đi (được hiển thị dưới dạng dấu hoa thị hoặc vòng tròn)

3. Loại đầu vào Gửi trong HTML

<input type=”submit”> xác định một nút để gửi dữ liệu biểu mẫu đến trình xử lý biểu mẫu

Trình xử lý biểu mẫu thường là một trang máy chủ có tập lệnh để xử lý dữ liệu đầu vào

Trình xử lý biểu mẫu được chỉ định trong thuộc tính action của biểu mẫu

Ví dụ:

Nếu bạn bỏ qua thuộc tính giá trị của nút gửi, nút sẽ nhận được văn bản mặc định

Ví dụ:

4.Đặt lại giá trị đầu vào trong HTML

<input type=”reset”> xác định nút đặt lại sẽ đặt lại tất cả các giá trị biểu mẫu về giá trị mặc định của chúng

Ví dụ:

Ở đây, nếu bạn thay đổi các giá trị đầu vào và sau đó nhấp vào nút “Đặt Lại”, dữ liệu biểu mẫu sẽ được đặt lại về giá trị mặc định

5. Loại đầu vào nút Radio trong HTML

<input type=”radio”> xác định một nút radio trong HTML

Các nút radio cho phép người dùng CHỈ chọn MỘT trong số các lựa chọn giới hạn

Ví dụ:

6. Loại đầu vào hộp Checkbox trong HTML

<input type=”checkbox”> xác định một hộp checkbox trong HTML

Hộp checkbox cho phép người dùng chọn tùy chọn KHÔNG hoặc NHIỀU tùy chọn trong một số lựa chọn giới hạn

Ví dụ:

7. Loại đầu vào nút trong HTML

<input type=”button”> xác định một nút trong HTML

Ví dụ:

8. Loại đầu vào màu sắc trong HTML

<input type=”color”>được sử dụng cho các lĩnh vực đầu vào mà nên chứa một màu

Tùy thuộc vào sự hỗ trợ của trình duyệt, bộ chọn màu có thể hiển thị trong trường trường nhập dữ liệu

Ví dụ:

9.Loại đầu vào Ngày trong HTML

<input type=”date”>đ ược sử dụng cho các lĩnh vực đầu vào mà nên chứa một ngày

Tùy thuộc vào sự hỗ trợ của trình duyệt, bộ chọn ngày có thể hiển thị trong trường nhập dữ liệu

Ví dụ:

Bạn cũng có thể sử dụng các thuộc tính min và max để thêm các hạn chế cho ngày tháng

Ví dụ:

10. Loại đầu vào Ngày giờ-cục bộ trong HTML

<input type=”datetime-local”> chỉ định ngày và giờ, không có múi giờ

Tùy thuộc vào sự hỗ trợ của trình duyệt, bộ chọn ngày có thể hiển thị trong trường nhập dữ liệu

Ví dụ:

11. Loại đầu vào Email trong HTML

<input type=”email”> được sử dụng cho các lĩnh vực đầu vào chứa một địa chỉ e-mail

Tùy thuộc vào sự hỗ trợ của trình duyệt, địa chỉ e-mail có thể được tự động xác nhận khi được gửi

Một số điện thoại thông minh nhận dạng được loại email và thêm “.com” vào bàn phím để khớp với kiểu nhập email

Ví dụ:

12. Loại đầu vào Tệp trong HTML

<input type=”file”> xác định trường chọn tệp và nút “Duyệt qua” để tải tệp lên

Ví dụ:

13. Loại đầu vào bị ẩn trong HTML

<input type=”hidden”> nghĩa một trường nhập ẩn (không hiển thị cho người dùng)

Trường ẩn cho phép các nhà phát triển web bao gồm dữ liệu mà người dùng không thể nhìn thấy hoặc sửa đổi khi gửi biểu mẫu

Trường ẩn thường lưu trữ bản ghi cơ sở dữ liệu nào cần được cập nhật khi biểu mẫu được gửi

Lưu ý: Mặc dù giá trị không được hiển thị cho người dùng trong nội dung của trang, nhưng nó được hiển thị (và có thể được chỉnh sửa) bằng cách sử dụng bất kỳ công cụ dành cho nhà phát triển nào của trình duyệt hoặc chức năng “Xem nguồn”. Không sử dụng đầu vào ẩn như một hình thức bảo mật!

Ví dụ:

14. Loại đầu vào Tháng trong HTML

<input type=”month”> cho phép người dùng lựa chọn một tháng và năm

Tùy thuộc vào sự hỗ trợ của trình duyệt, bộ chọn ngày có thể hiển thị trong trường nhập dữ liệu

Ví dụ:

15. Loại đầu vào số trong HTML

<input type=”number”> Địnhnghĩa một trường nhập số . Bạn cũng có thể đặt hạn chế về những số được chấp nhận

Ví dụ:

16. Hạn chế đầu vào trong HTML

Dưới đây là danh sách một số hạn chế đầu vào phổ biến:

checked – Chỉ định rằng một trường đầu vào sẽ được chọn trước khi tải trang (đối với type=”checkbox” hoặc type=”radio”)

disabled – Chỉ định rằng một trường đầu vào sẽ bị vô hiệu hóa

max – Chỉ định giá trị lớn nhất cho một trường đầu vào

maxlength – Chỉ định số ký tự tối đa cho một trường đầu vào

min – Chỉ định giá trị nhỏ nhất cho một trường đầu vào

pattern – Chỉ định một biểu thức chính quy để kiểm tra giá trị đầu vào

readonly – Chỉ định rằng một trường đầu vào là chỉ đọc (không thể thay đổi)

required – Chỉ định rằng một trường đầu vào là bắt buộc (phải được điền)

size – Chỉ định chiều rộng (tính bằng ký tự) của một trường đầu vào

step – Chỉ định khoảng số hợp lệ cho một trường đầu vào

value – Chỉ định giá trị mặc định cho một trường đầu vào

Ví dụ:

Ở đây, ví dụ sẽ hiển thị trường nhập số, bạn có thể nhập giá trị từ 0 đến 100, bước nhảy là 10. Giá trị mặc định là 30

17. Phạm vi đầu vào trong HTML

<input type=”range”> xác định một điều khiển để nhập một số có giá trị chính xác (điều khiển thanh trượt)

Phạm vi mặc định là 0 đến 100. Tuy nhiên, bạn có thể thiết lập các hạn chế về những gì con số được chấp nhận với các thuộc tính min, max và step

Ví dụ:

18. Kiểu nhập liệu tìm kiếm trong HTML

<input type=”search”>được sử dụng cho các lĩnh vực tìm kiếm (một cư xử lĩnh vực tìm kiếm như một trường văn bản thường)

Ví dụ:

19. Loại đầu vào Tel trong HTML

<input type=”tel”>được sử dụng cho các lĩnh vực đầu vào mà chứa một số điện thoại

Ví dụ:

20.Loại đầu vào Thời gian trong HTML

<input type=”time”>phép người dùng lựa chọn một thời gian (không múi giờ)

Tùy thuộc vào sự hỗ trợ của trình duyệt, bộ chọn thời gian có thể hiển thị trong trường nhập liệu

Ví dụ:

21.Loại đầu vào url trong HTML

<input type=”url”> được sử dụng cho các lĩnh vực đầu vào mà nên chứa một địa chỉ URL

Tùy thuộc vào sự hỗ trợ của trình duyệt, trường url có thể được tự động xác thực khi được gửi

Một số điện thoại thông minh nhận ra loại url và thêm “.com” vào bàn phím để khớp với đầu vào url

Ví dụ:

22.Loại đầu vào tuần trong HTML

<input type=”week”>phép người dùng lựa chọn một tuần và năm

Tùy thuộc vào sự hỗ trợ của trình duyệt, bộ chọn ngày có thể hiển thị trong trường nhập liệu

Ví dụ: