Có rất nhiều loại thẻ trong HTML như thẻ div, thẻ form, thẻ table,…Trong bài viết này, Blogchiase.vn sẽ giới thiệu đến bạn một loại thẻ thông dụng đó là thẻ Input. Vậy thẻ input là gì? Thẻ này được sử dụng với mục đích gì? Thẻ input có những loại và thuộc tính nào. Cùng tìm hiểu nhé và xem các ví dụ cụ thể dưới đây nhé!
Thẻ input là gì?
Thẻ input trong HTML được sử dụng để biễu diễn một trường input nơi mà người dùng có thể nhập dữ liệu. Các phần tử <input> được sử dụng bên trong 1 phần tử <form> để khai báo các điểu khiển đầu vào mà cho phép người dùng nhập dữ liệu.
Bài viết liên quan:
Trường input có thể thay đổi theo nhiều cách, tùy thuộc vào giá trị của thuộc tính type.
Ví dụ về thẻ input trong HTML.
Mục Lục
<form action=”#”>
First name: <input type=”text” name=”firstName” placeholder=”enter firstname…”><br>
Last name: <input type=”text” name=”lastName” placeholder=”enter lastname…”><br>
<input type=”submit” value=”Submit”>
</form>
Kết quả:
Một số thuộc tính của thẻ input.
Thuộc tính type
Type là thuộc tính quan trọng nhất của thẻ input, nó sẽ quy định tính năng của thẻ input đó.
Một số giá trị của type:
text: trường nhập văn bản.password: trường nhập mật khẩu, các kí tự nhập sẽ bị che đi bằng các kí tự *.checkbox: ô checkbox.radio: Ô radio buttonsubmit: nút nhấn để submit form.
Một số giá trị trong HTML5:
number: Kiểu numberurl: Kiểu đường dẫn trang webemail: Kiểu email
Còn nhiều giá trị nữa nhưng ở đây mình chỉ liệt kê một số giá trị hay sử dụng nhất.
Thuộc tính value.
Value cũng là một thuộc tính rất quan trọng của thẻ input, nó quy định giá trị của thẻ input.
Ví dụ: thuộc tính value của thẻ input
<h1> Login </h1>
Username: <input type=”text” name=”username” value=”Nhập username” >
<br />
Password: <input type=”passwword” name=”passwword” value=”Nhập password”>
<br />
<input type=”submit” name=”submit” value=”Đăng Nhập”>
</form>
Thuộc tính pattern:
Đây là thuộc tính rất hay, được thêm vào kể từ phiên bản HTML5.
Thuộc tính này giúp ta tạo ra các chuỗi pattern dùng để validate dữ liệu khi submit form. Xem thêm trong bài viết validate form bằng HTML5 để hiểu rõ hơn.
Những điểm cần nhớ.
– Sử dụng phần tử input bên trong phần tử form để khai báo các điểu khiển đầu vào cho phép người dùng nhập dữ liệu.
– Phần tử input là trống. Nó chỉ chứa các thuộc tính. Không cần thẻ kết thúc trong HTML.
– Nếu bạn muốn định nghĩa nhãn cho phần tử input, sử dụng phần tử label với mỗi thẻ input.
Sự khác nhau giữa HTML4.01 và HTML5.
HTML 5 không hỗ trợ thuộc tính “align”. Có một và thuộc tính mới cho thẻ <input> trong HMTL 5, và thuộc tính type có nhiều giá trị khác nhau.
Sự khác nhau giữa HTML và XHTML.
Trong HTML, thẻ <input> được sử dụng không cần phải có thẻ đóng. Trong XHTML, thẻ <input> phải có thẻ đóng.
Các thuộc tính của thẻ input trong HTML5 và HTML.
| Thuộc tính | Giá trị | Mô tả |
|---|---|---|
| accept | file_extension audio/* video/* image/* media_type |
Dùng để chỉ định kiểu của file mà server chấp nhận (chỉ khi type=”file”) |
| align | left right top middle bottom |
Thuộc tính align là một trong các thuộc tính không được hỗ trợ trong HTML5.Được dùng để chỉ định sự sắp hàng của image input (chỉ khi type=”image”) |
| alt | text | Được dùng để chỉ định một văn bản thay thế cho hình ảnh (chỉ khi type=”image”) |
| autocomplete | on off |
Được dùng để chỉ định một phần tử <input> có cần phải bật tính năng tự động hoàn tất |
| autofocus | auto focus |
Được dùng để chỉ định rằng một phần tử <input> được focus tự động khi trang tải trang web |
| checked | checked | Được dùng để chỉ định rằng một phần tử <input> có được chọn trước (pre-selected) khi tải trang web (đối với type=”checkbox” hoặc type=”radio”) |
| dirname | inputname.dir | Được dùng để chỉ định rằng hướng văn bản sẽ được gửi |
| disabled | disabled | Được dùng để chỉ định rằng một phần tử <input> bị vô hiệu hóa |
| form | form_id | Được dùng để chỉ định một hoặc nhiều form mà có phần tử <input> thuộc về nó |
| formaction | URL | Được dùng để chỉ định URL của file sẽ xử lý các thông tin của form được gửi(đối với type=”submit” và type=”image”) |
| formenctype | application/x-www-form-urlencoded multipart/form-datatext/plain |
Được dùng để chỉ định cách dữ liệu của form phải được mã hoá khi gửi nó lên máy chủ (đối với type=”submit” và type=”image”) |
| formmethod | get post |
Được dùng để chỉ định nghĩa phương thức HTTP cho việc gửi dữ liệu của form tới action URL (đối với type=”submit” và type=”image”) |
| formnovalidate | formnovalidate | Được dùng để chỉ định nghĩa các phần tử của form không cần phải kiểm tra hợp lệ khi gửi |
| formtarget | _blank _self _parent _topframename |
Được dùng để chỉ định nơi hiển thị những gì nhận được sau khi gửi form (đối với type=”submit” và type=”image”) |
| height | pixels | Được dùng để chỉ định chiều cao của một phần tử <input> (chỉ đối với type=”image”) |
| list | datalist_id | Được dùng để tham chiếu đến một phần tử <datalist> chứa các tùy chọn được định nghĩa trước |
| max | number date |
Được dùng để chỉ định giá trị maximum cho một phần tử <input> |
| maxlength | number | Được dùng để chỉ định số ký tự lớn nhất được nhập vào phần tử <input> |
| min | number date |
Được dùng để chỉ định một giá trị nhỏ nhất cho phần tử <input> |
| multiple | multiple | Được dùng để chỉ định rằng người dùng có thể nhập nhiều hơn một giá trị cho phần tử <input> |
| name | text | Được dùng để chỉ định tên của một phần tử <input> |
| pattern | regexp | Được dùng để chỉ định một biểu thức chính quy được sử dụng để kiểm tra giá trị của phần tử <input> |
| placeholder | text | Được dùng để chỉ định một gợi ý gắn mà mô tả giá trị mong đợi của một phần tử <input> |
| readonly | readonly | Được dùng để chỉ định rằng một trường input là read-only |
| required | required | Được dùng để chỉ định rằng một trường input phải được nhập trước khi gửi form |
| size | number | Được dùng để chỉ định chiều rộng theo ký tự của một phần tử <input> |
| src | URL | Được dùng để chỉ định URL để sử dụng như 1 nút gửi (chỉ đối với type=”image”) |
| step | number | Được dùng để chỉ định các khoảng cách số hợp lệ cho một trường nhập |
| type | button checkbox color date datetimelocal file hidden image month number password radio range reset search submit tel text time url week |
Được dùng để chỉ định kiểu của phần tử <input> để hiển thị |
| value | text | Được dùng để chỉ định giá trị của một phần tử <input> |
| width | pixels | Được dùng để chỉ định chiều rộng của một phần tử <input> (chỉ đối với type=”image”) |
Bài viết liên quan:
Lời kết:
Bài viết trên đã đem đến cho bạn những thông tin hữu ích về thẻ input trong HTML. Hy vọng qua bài viết này bạn sẽ hiểu rõ về thẻ input và sử dụng thẻ này một cách hiệu quả hơn.
Nguồn: tổng hợp google.com
