Trong HTML là một thành phần quan trọng của biểu mẫu HTML. Thuộc tính "loại" của phần tử đầu vào có thể là nhiều loại khác nhau, xác định trường thông tin. Chẳng hạn như đưa ra một hộp văn bản
Sau đây là danh sách tất cả các loại phần tử của HTML
type=" "DescriptiontextXác định trường nhập văn bản một dòngpasswordXác định trường nhập mật khẩu một dòngsubmitXác định nút gửi để gửi biểu mẫu tới máy chủresetXác định nút đặt lại để đặt lại tất cả các giá trị trong biểu mẫu. radioXác định một nút radio cho phép chọn một tùy chọn. hộp kiểmXác định các hộp kiểm cho phép chọn biểu mẫu nhiều tùy chọn. buttonXác định một nút ấn đơn giản, có thể được lập trình để thực hiện một tác vụ trong một sự kiện. fileXác định để chọn tệp từ bộ nhớ thiết bị. imageXác định nút gửi đồ họaHTML5 đã thêm các loại mới trên phần tử. Sau đây là danh sách các loại phần tử của HTML5
type=" "DescriptioncolorXác định trường nhập liệu với một màu cụ thể. dateXác định trường đầu vào để chọn ngày. datetime-localXác định trường nhập để nhập ngày không có múi giờ. emailXác định trường đầu vào để nhập địa chỉ email. monthXác định điều khiển theo tháng và năm, không có múi giờ. numberXác định một trường đầu vào để nhập một số. url Xác định trường để nhập URL tuần Xác định trường để nhập ngày theo tuần-năm, không có múi giờ. searchXác định trường văn bản một dòng để nhập chuỗi tìm kiếm. telXác định trường đầu vào để nhập số điện thoạiSau đây là mô tả về các loại phần tử với các ví dụ
1.
phần tử loại "văn bản" được sử dụng để xác định trường văn bản đầu vào một dòng
Ví dụ
Kiểm tra nó ngay bây giờđầu ra
Loại "văn bản" đầu vào
Trường "văn bản" xác định trường văn bản đầu vào một dòng
Ghi chú. Độ dài ký tự tối đa mặc định là 20
2.
Phần tử kiểu "mật khẩu" cho phép người dùng nhập mật khẩu an toàn vào trang web. Văn bản đã nhập trong trường mật khẩu được chuyển đổi thành "*" hoặc ". ", để người dùng khác không thể đọc được
Ví dụ
Kiểm tra nó ngay bây giờđầu ra
Nhập loại "mật khẩu"
Trường "mật khẩu" xác định trường mật khẩu đầu vào một dòng để nhập mật khẩu an toàn
3.
Phần tử loại "gửi" xác định nút gửi để gửi biểu mẫu tới máy chủ khi xảy ra sự kiện "nhấp chuột"
Ví dụ
Kiểm tra nó ngay bây giờđầu ra
Nhập loại "gửi"
Sau khi nhấp vào nút gửi, thao tác này sẽ gửi biểu mẫu tới máy chủ và sẽ chuyển hướng trang đến giá trị hành động. Chúng ta sẽ tìm hiểu về thuộc tính "action" trong các chương sau
4.
Loại "đặt lại" cũng được định nghĩa là một nút nhưng khi người dùng thực hiện một sự kiện nhấp chuột, theo mặc định, nó sẽ đặt lại tất cả các giá trị đã nhập
Ví dụ
Kiểm tra nó ngay bây giờđầu ra
Nhập loại "đặt lại"
Cố gắng thay đổi các giá trị đầu vào của id người dùng và mật khẩu, sau đó khi bạn nhấp vào đặt lại, nó sẽ đặt lại các trường nhập về giá trị mặc định
5.
Loại "radio" xác định các nút radio, cho phép chọn một tùy chọn giữa một tập hợp các tùy chọn liên quan. Tại một thời điểm chỉ có thể chọn một tùy chọn nút radio tại một thời điểm
Ví dụ
Kiểm tra nó ngay bây giờđầu ra
Loại đầu vào "radio"
Vui lòng chọn màu sắc yêu thích của bạn
Đỏlam
lục
hồng
6.
Loại "hộp kiểm" được hiển thị dưới dạng hộp vuông có thể được chọn hoặc bỏ chọn để chọn các lựa chọn từ các tùy chọn đã cho
Ghi chú. Các nút "radio" tương tự như các hộp kiểm, nhưng có một sự khác biệt quan trọng giữa cả hai loại. các nút radio cho phép người dùng chỉ chọn một tùy chọn tại một thời điểm, trong khi hộp kiểm cho phép người dùng chọn từ 0 đến nhiều tùy chọn cùng một lúc
Ví dụ
Kiểm tra nó ngay bây giờđầu ra
Loại "hộp kiểm" đầu vào
Mẫu đăng ký
Vui lòng chọn môn thể thao yêu thích của bạn
CricketTennis
Football
Baseball
Badminton
7.
Loại "nút" xác định một nút ấn đơn giản, có thể được lập trình để điều khiển chức năng trên bất kỳ sự kiện nào, chẳng hạn như sự kiện nhấp chuột
Ghi chú. Nó chủ yếu hoạt động với JavaScript
Ví dụ
Kiểm tra nó ngay bây giờđầu ra
Loại "nút" đầu vào
Nhấn vào nút để xem kết quả
Ghi chú. Trong ví dụ trên, chúng tôi đã sử dụng "cảnh báo" của JS, bạn sẽ tìm hiểu điều này trong hướng dẫn về JS của chúng tôi. Nó được sử dụng để hiển thị một cửa sổ bật lên
8.
Phần tử có loại "tệp" được sử dụng để chọn một hoặc nhiều tệp từ bộ nhớ thiết bị của người dùng. Sau khi bạn chọn tệp và sau khi gửi, tệp này có thể được tải lên máy chủ với sự trợ giúp của mã JS và API tệp
Ví dụ
Kiểm tra nó ngay bây giờđầu ra
Loại "tệp" đầu vào
Chúng tôi có thể chọn bất kỳ loại tệp nào cho đến khi chúng tôi không chỉ định nó. Tệp đã chọn sẽ xuất hiện bên cạnh tùy chọn "chọn tệp"
9.
Loại "hình ảnh" được sử dụng để đại diện cho nút gửi ở dạng hình ảnh
Ví dụ
Phần tử loại mới được thêm vào HTML5
1.
Loại "màu" được sử dụng để xác định trường nhập có chứa màu. Nó cho phép người dùng chỉ định màu bằng giao diện màu trực quan trên trình duyệt
Ghi chú. Loại "màu" chỉ hỗ trợ giá trị màu ở định dạng thập lục phân và giá trị mặc định là #000000 [màu đen]
Ví dụ
Kiểm tra nó ngay bây giờđầu ra
Nhập các loại "màu"
Chọn màu yêu thích của bạnnhấp chuột lên
nhấp chuột xuống
Ghi chú. Giá trị mặc định của loại "màu" là #000000 [đen]. Nó chỉ hỗ trợ giá trị màu ở định dạng thập lục phân
2.
Phần tử kiểu "ngày" tạo trường nhập, cho phép người dùng nhập ngày theo định dạng nhất định. Người dùng có thể nhập ngày theo trường văn bản hoặc theo giao diện chọn ngày
Ví dụ
Kiểm tra nó ngay bây giờđầu ra
Loại "ngày" đầu vào
Chọn ngày bắt đầu và ngày kết thúcngày bắt đầu
Ngày cuối
3.
Phần tử kiểu "datetime-local" tạo trường nhập liệu cho phép người dùng chọn ngày cũng như giờ địa phương theo giờ và phút mà không cần thông tin múi giờ
Ví dụ
Kiểm tra nó ngay bây giờđầu ra
Nhập loại "datetime-local"
4.
Loại "email" tạo trường nhập liệu cho phép người dùng nhập địa chỉ email có xác thực mẫu. Nhiều thuộc tính cho phép người dùng nhập nhiều địa chỉ email
Ví dụ
Kiểm tra nó ngay bây giờđầu ra
Nhập loại "email"
Ghi chú. Người dùng cũng có thể nhập nhiều địa chỉ email được phân tách bằng dấu phẩy hoặc khoảng trắng như sau
5.
Loại "tháng" tạo trường nhập liệu cho phép người dùng dễ dàng nhập tháng và năm theo định dạng "MM, YYYY" trong đó MM xác định giá trị tháng và YYYY xác định giá trị năm. Mới mẻ
Ví dụ
Kiểm tra nó ngay bây giờđầu ra
6.
Số loại phần tử tạo trường đầu vào cho phép người dùng nhập giá trị số. Bạn cũng có thể hạn chế nhập giá trị tối thiểu và tối đa bằng thuộc tính tối thiểu và tối đa
Ví dụ
Kiểm tra nó ngay bây giờđầu ra
Loại "số" đầu vào
Ghi chú. Nó sẽ cho phép nhập số trong phạm vi 50-80. Nếu bạn muốn nhập số khác với phạm vi, nó sẽ hiển thị lỗi
7.
Phần tử kiểu "url" tạo trường nhập cho phép người dùng nhập URL
Ví dụ
Kiểm tra nó ngay bây giờđầu ra
8.
Loại tuần tạo trường nhập liệu cho phép người dùng chọn tuần và năm từ lịch thả xuống mà không có múi giờ
Ví dụ
Kiểm tra nó ngay bây giờđầu ra
9.
Loại "tìm kiếm" tạo trường nhập liệu cho phép người dùng nhập chuỗi tìm kiếm. Đây là những chức năng đối xứng với kiểu nhập văn bản, nhưng có thể được tạo kiểu khác
Ví dụ
Kiểm tra nó ngay bây giờđầu ra
10.
Phần tử của loại ?tel? . Loại "tel" không có xác thực mặc định như email, vì mẫu số điện thoại có thể khác nhau trên toàn thế giới
Ví dụ
Kiểm tra nó ngay bây giờđầu ra
Loại "tel" đầu vào
Ghi chú. Ở đây chúng tôi đang sử dụng hai thuộc tính là "mẫu" và "bắt buộc" sẽ cho phép người dùng nhập số ở định dạng nhất định và bắt buộc phải nhập số vào trường nhập