9 thẻ input thường dùng trong HTML

Các thẻ input type chuyên dụng trong các form, dùng để nhập liệu, kiểu như: đăng ký, đăng nhập, liên hệ, gửi file…Hôm nay chúng ta sẽ xem xét các thẻ input phổ biến nhất nhé.

Các input đều giống nhau về cấu trúc, chỉ khác nhau về type. Chính type này quyết định kiểu của input. Có đến hơn 20 type khác nhau. Một số type input chỉ được hỗ trợ trong HTML5. Các type giới thiệu trong ngày hôm nay được tất cả các trình duyệt thông dụng hỗ trợ.

---

Nhập text

Ví dụ:

Họ và tên:

---

Code mẫu:

Họ tên: <input name="hoten" type="text" />

---

Nhập password

Ví dụ:

Pass:

---

Code mẫu:

<input name="psw" type="password" />

---

File đính kèm

Ví dụ

Chọn ảnh của bạn:

Code mẫu:

<input type="file" name="anh">

---

Button reset

Tác dụng của nút nhấn reset là xóa các dữ liệu mà bạn nhập không đúng, giả dụ nhập tên và quê quán vào 2 trường dưới đây, rối nhấn reset xem điều gì xảy ra:

Họ tên:
Quê quán:

---

Code mẫu:

<form action="#">
Họ tên: <input type="text" name="hoten"><br />
Quê quán: <input type="text" name="que"><br />
<input type="reset" value="Reset">
</form>

---

Button submit

Tác dụng của nút nhấn submit là gửi dữ liệu, khi bạn nhập đầy đủ các trường, và nhấn submit thì dữ liệu từ các trường bạn nhập sẽ được gửi đến đâu đó để xử lý tiếp. Có thể nó sẽ được Validate bằng JavaScript để chuẩn hóa, sau đó gửi lên Server để ghi thông tin vào cơ sở dữ liệu bằng PHP (hoặc ngôn ngữ lập trình web khác).

Ví dụ:

Tên đăng nhập:
Mật khẩu:

---

Code mẫu:

<form action="#">
Tên đăng nhập: <input name="user" type="text" /><br />
Mật khẩu: <input name="pass" type="text" /><br />
<input type="submit" value="Submit" />
</form>

---

Ẩn input

Họ tên:

---

Code mẫu:

<form action="#">
Họ tên: <input type="text" name="hoten"><br>
<input type="hidden" name="quocgia" value="Việt Nam">
<input type="submit" value="Submit">
</form>

Bạn có thể thấy input có name là quocgia bị ẩn không hiện trong form. Tuy bị ẩn nhưng nếu chúng ta Submit nó giá trị “Việt Nam” vẫn được gửi đi.

---

Radio button

Dùng để chọn chỉ 1 trong nhiều lựa chọn, ví dụ:

Nam
Nữ
Khác

---

Code mẫu:

<form action="#">
<input name="gioitinh" type="radio" value="Nam" />Nam<br />
<input name="gioitinh" type="radio" value="Nữ" />Nữ<br />
<input name="gioitinh" type="radio" value="Khác" />Khác
</form>

---

Checkbox

Dùng để chọn nhiều lựa chọn cùng lúc, có thể 1 hoặc nhiều, ví dụ:

Bóng đá
Bơi lội
Điền kinh
Cầu lông
Võ thuật

---

Code mẫu:

<form action="#">
<input name="thethao" type="checkbox" value="Bóng đá" />Bóng đá<br />
<input name="thethao" type="checkbox" value="Bơi lội" />Bơi lội<br />
<input name="thethao" type="checkbox" value="Điền kinh" />Điền kinh<br />
<input name="thethao" type="checkbox" value="Cầu lông" />Cầu lông<br />
<input name="thethao" type="checkbox" value="Võ thuật" />Võ thuật
</form>

Thông tin đầy đủ hơn về Checkbox và Radio button bạn có thể đọc để tham khảo thêm.

---

Email

Type cuối cùng tôi đề cập là email, sở dĩ như vậy vì type này chỉ được hỗ trợ trong HTML5 – tuy nhiên nói là vậy thôi, chứ chúng ta cũng không phải lo gì cả, vì input email đã được support tốt bới các trình duyệt.

Code mẫu:

<form action="#">
Email: <input name="email" type="email" />
<input type="submit">
</form>

Kết quả:

Email:

---

Email: Nó validate email cho chúng ta rồi, nên bạn không cần viết JavaScript – trừ khi bạn muốn chuẩn hóa dữ liệu nhập vào cao hơn nữa.