Thẻ input
Thẻ input tạo ra các phần tử khác nhau
của biểu mẫu HTML: trường nhập liệu thông thường, trường cho
mật khẩu, hộp kiểm checkbox,
nút radio,
nút bấm.
Thẻ input phải nằm bên trong thẻ
form.
Điều này không bắt buộc về mặt kỹ thuật HTML, nhưng cần thiết để gửi
dữ liệu lên máy chủ và xử lý chúng sau đó
qua PHP.
Không yêu cầu thẻ đóng.
Thuộc tính
| Thuộc tính | Mô tả |
|---|---|
type |
Chỉ định loại trường nhập liệu. Xem các tùy chọn bên dưới. |
value |
Giá trị mặc định trong trường nhập liệu. Trong trường hợp nút bấm, nó xác định văn bản của nút.
Xem chi tiết thuộc tính value.
|
placeholder |
Gợi ý trong trường nhập liệu, xem chi tiết
thuộc tính placeholder.
|
name |
Tên của trường nhập liệu. Cần thiết để lấy dữ liệu của trường nhập liệu trong PHP. Để biểu mẫu hoạt động chính xác, tên của các trường nhập liệu không được trùng nhau (trong cùng một biểu mẫu). Nếu chúng trùng nhau - trong PHP sẽ nhận được dữ liệu của trường nhập liệu nằm phía dưới trong mã HTML. |
disabled |
Khóa phần tử biểu mẫu (không chỉ input, mà hầu hết mọi phần tử),
xem chi tiết thuộc tính disabled.
|
Giá trị của thuộc tính type
| Giá trị | Mô tả |
|---|---|
text |
Tạo trường nhập liệu văn bản thông thường. |
password |
Tạo trường nhập liệu văn bản cho mật khẩu. Hãy thử nhập văn bản vào - nó sẽ hiển thị dưới dạng dấu sao. |
checkbox |
Tạo hộp kiểm checkbox.
Xem chi tiết checkbox.
|
radio |
Tạo nút chuyển đổi radio.
Xem chi tiết radio.
|
hidden |
Tạo một input ẩn, sẽ không hiển thị trên màn hình, nhưng sẽ gửi dữ liệu chứa
trong thuộc tính value lên máy chủ.
|
button |
Tạo một nút bấm. Nhấn vào nút này
sẽ không gửi biểu mẫu lên máy chủ. Nó có thể được sử dụng bên trong
liên kết hoặc qua JavaScript.
Theo mặc định, nút không có văn bản (ví dụ nút không văn bản: ),
văn bản được đặt bằng cách sử dụng value.
Xem thêm thẻ button,
cũng tạo ra nút bấm.
|
submit |
Tạo một nút bấm sẽ gửi dữ liệu lên máy chủ.
Văn bản trên nút phụ thuộc vào trình duyệt, có thể thay đổi nó
bằng cách sử dụng value.
Xem thêm thẻ button,
cũng tạo ra nút bấm.
|
reset |
Tạo một nút bấm để xóa biểu mẫu đã điền.
Văn bản trên nút phụ thuộc vào trình duyệt, có thể thay đổi nó
bằng cách sử dụng value.
|
file |
Tạo nút chọn tệp. Thiết kế của nút này bị cấm thay đổi
qua CSS (tuy nhiên có những cách thức phức tạp). Nếu bạn cần một trường như vậy trong biểu mẫu, thì
thẻ form phải có thuộc tính
enctype với giá trị multipart/form-data.
|
Các giá trị mới của thuộc tính type trong HTML5
Các giá trị thuộc tính này là mới, xuất hiện chỉ trong HTML5, do đó trong một số trình duyệt chúng có thể không hoạt động hoặc hoạt động khác nhau trong các trình duyệt khác nhau.
Trong trường hợp trình duyệt không thể hiểu nội dung
của thuộc tính type (ví dụ, nếu nó
không được hỗ trợ hoặc nhập sai),
nó sẽ coi phần tử đó là một input văn bản thông thường,
như thể trong type có giá trị
text.
Hãy xem các ví dụ dưới đây trong
các trình duyệt khác nhau. Hãy thử nhập
vào các input văn bản và nhấn nút gửi.
Nếu văn bản không hợp lệ hoặc trường để trống -
trình duyệt sẽ hiển thị lỗi. Ví dụ, nếu trong
trường với loại email nhập email không hợp lệ -
trình duyệt sẽ không cho phép gửi biểu mẫu và
hiển thị thông báo lỗi (văn bản lỗi
và giao diện của nó không thể thay đổi bằng html css).
Nếu trường để trống - trình duyệt cũng sẽ hiển thị lỗi,
điều này đạt được nhờ thuộc tính required:
| Giá trị | Mô tả |
|---|---|
email |
|
number |
|
url |
|
tel |
|
search |
|
color |
|
date |
|
month |
|
week |
|
datetime |
|
datetime-local |
|
range |
