Hộp văn bản ở dạng HTML là gì?

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ọa

---

HTML5 đã 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ại

---

Sau đâ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

Cricket
Tennis
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ạn

nhấ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úc

ngà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

Mẫu hộp văn bản là gì?

hộp văn bản với ví dụ là gì?

Làm cách nào để tạo một hộp văn bản trong HTML?

Các loại hộp văn bản là gì?