Trong bài viết này Hãy cùng webaffiliatevn.com tìm hiểu Thẻ input trong HTML nhé
1. Mô tả Thẻ input trong HTML:
Thẻ <input> HTML được sử dụng trong một biểu mẫu để khai báo một phần tử đầu vào – một điều khiển cho phép người dùng nhập dữ liệu.
2. Ví dụ Thẻ input trong HTML:
<!DOCTYPE html>
<html>
<head>
<title>Ví dụ về thẻ input trong HTML</title>
</head>
<body>
<form action = "" method = "get">
Họ:
<input type = "text" name = "ho" value = "" maxlength = "100" />
<br />
Tên:
<input type = "text" name = "ten" value = "" maxlength = "100" />
<input type = "submit" value = "Gửi" />
</form>
</body>
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”ZEWEZLz” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/ZEWEZLz’>ZEWEZLz</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
3. Thuộc tính Thẻ input trong HTML:
Thẻ <input> HTML cũng hỗ trợ các thuộc tính bổ sung sau:
| Thuộc tính | Giá trị | Sự miêu tả |
|---|---|---|
| accept
(chấp nhận) |
content types | Chỉ định danh sách các loại nội dung được phân tách bằng dấu phẩy mà máy chủ chấp nhận. |
| align
(căn chỉnh) |
left right top middle bottom |
Xác định sự căn chỉnh của nội dung |
| alt | text | Điều này chỉ định văn bản sẽ được sử dụng trong trường hợp trình duyệt / tác nhân người dùng không thể hiển thị điều khiển đầu vào. |
| autocomplete (tự động hoàn thành) | on off |
Chỉ định để bật hoặc tắt tính năng tự động hoàn thành trong phần tử <input> |
| autofocus
(tự động lấy nét) |
autofocus (tự động lấy nét) | chỉ định rằng phần tử <input> sẽ tự động lấy tiêu điểm khi trang tải |
| checked
(đã kiểm tra) |
checked (đã kiểm tra) | Nếu type = “radio” hoặc type = “checkbox” thì nó sẽ được chọn khi tải trang. |
| disabled (không hiển thị) | disabled | Tắt kiểm soát đầu vào. Nút này sẽ không chấp nhận các thay đổi từ người dùng. Nó cũng không thể nhận tiêu điểm và sẽ bị bỏ qua khi tab. |
| form | form_id | Chỉ định một hoặc nhiều hình thức |
| formaction (hình thành) | URL | Chỉ định URL của tệp sẽ xử lý kiểm soát đầu vào khi biểu mẫu được gửi |
| formenctype | application/x-www-form-urlencoded
multipart/form-data text/plain |
Chỉ định cách dữ liệu biểu mẫu nên được mã hóa khi gửi nó đến phục vụ |
| formmethod (hình thức) | post get |
Xác định phương thức HTTP để gửi dữ liệu đến URL hành động |
| formnovalidate | formnovalidate | Xác định rằng các phần tử biểu mẫu sẽ không được xác thực khi gửi |
| formtarget | _blank _self _parent _top |
Chỉ định mục tiêu nơi phản hồi sẽ được hiển thị nhận được sau khi gửi biểu mẫu |
| height
(chiều cao) |
pixels | Chỉ định chiều cao |
| list
(danh sách) |
datalist_id | Chỉ định phần tử <datalist> chứa các tùy chọn được xác định trước cho phần tử <input> |
| max
(tối đa) |
autofocus (tự động) | Chỉ định giá trị tối đa. |
| maxlength | number | Xác định số lượng ký tự tối đa được phép trong trường văn bản |
| min
(tối thiểu) |
number | Chỉ định giá trị tối thiểu. |
| multiple (nhiều) | multiple | Chỉ định rằng người dùng có thể nhập nhiều giá trị |
| name | text | Gán tên cho điều khiển đầu vào. |
| pattern
(mẫu) |
regexp | Chỉ định một biểu thức chính quy mà giá trị của phần tử <input> được kiểm tra |
| placeholder | text | Chỉ định một gợi ý ngắn mô tả giá trị mong đợi. |
| readonly
(chỉ đọc) |
chỉ đọc | Đặt điều khiển đầu vào thành chỉ đọc. Nó sẽ không cho phép người dùng thay đổi giá trị. Tuy nhiên, điều khiển có thể nhận được tiêu điểm và được bao gồm khi lập bảng thông qua các điều khiển biểu mẫu. |
| required
(yêu cầu) |
required | Chỉ định rằng một trường đầu vào phải được điền trước khi gửi biểu mẫu |
| size
(kích thước) |
number | Chỉ định chiều rộng của điều khiển. Nếu type = “text” hoặc type = “password” thì điều này đề cập đến chiều rộng tính bằng ký tự. Mặt khác, nó được tính bằng pixel. |
| src | URL | Xác định URL của hình ảnh để hiển thị. Chỉ được sử dụng cho loại = “hình ảnh”. |
| step
(bước) |
number | Chỉ định các khoảng số hợp pháp cho trường đầu vào |
| type
(kiểu) |
button checkboxcolor date datetime datetime-local file hidden image month number password radio range reset search submit tel text time url week |
Chỉ định loại điều khiển. |
| value
(giá trị) |
text | Chỉ định giá trị nguyên cho điều khiển. Nếu type = “checkbox” hoặc type = “radio” thì thuộc tính này là bắt buộc. |
| width
(chiều rộng) |
pixels | Chỉ định chiều rộng |
>>> Xem thêm:
