HTML - Phần 6: Các Thẻ Input trong HTML

Cấu trúc thẻ <input>

Thẻ input được HTML hỗ trợ với cấu trúc như sau:

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

Các thuộc tính của thẻ <input>

• input: là thẻ được định nghĩa trong HTML.
• type: là kiểu của input.
  • text: văn bản, ví dụ tên, email, số điện thoại.
  • password: mật khẩu.
  • ...
• name: thuộc tính này sử dụng để trang web có thể lấy được giá trị của input và xử lý ở phía server-side.
• Ngoài ra các loại thẻ <input> với type khác nhau có thể có thêm các thuộc tính khác nhau.

Các loại thẻ <input> thông dụng

<input> với các type khác nhau có chức năng khác nhau:

• text: nhập văn bản.
• password: nhập mật khẩu.
• radio: 1 lựa chọn.
• checkbox: nhiều lựa chọn. 
• button: nút bấm.
• file: lựa chọn file.
• number: nhập số.
• color: nhập màu sắc.
• email: nhập email.

text

Dùng để nhập dữ liệu dưới dạng văn bản trên một dòng:

FIRST NAME:<br />
<input type="text" name="firstName" /><br />
LAST NAME:<br />
<input type="text" name="lastName" />

Kết quả

FIRST NAME:

LAST NAME:

password

Dùng để nhập văn bản và văn bản nhập vào sẽ hiện thị dấu * để tránh bị nhìn trộm:

PASSWORD:<br/>
<input type="password" />

Kết quả

PASSWORD:

radio

Dùng chọn một trong nhiều sự lựa chọn ví dụ như trắc nghiệm.

BẠN BIẾT BÀI VIẾT NÀY THÔNG QUA?<br />
<input type="radio" name="survey" value="lua-chon-1" checked /> Trực tiếp vào đường dẫn.<br />
<input type="radio" name="survey" value="lua-chon-2" /> Từ link Facebook.<br />
<input type="radio" name="survey" value="lua-chon-3" /> Tìm kiếm trên Google.<br />
<input type="radio" name="survey" value="lua-chon-4" /> Bạn bè chia sẻ.<br />
<input type="radio" name="survey" value="lua-chon-5" /> Từ bài viết khác trong trang.

Kết quả

BẠN BIẾT BÀI VIẾT NÀY THÔNG QUA?
Trực tiếp vào đường dẫn.
Từ link Facebook.
Tìm kiếm trên Google.
Bạn bè chia sẻ.
Từ bài viết khác trong trang.

checkbox

Dùng chọn nhiều trong nhiều sự lựa chọn ví dụ như trắc nghiệm.

BẠN THÍCH SẢN PHẨM NÀO?<br />
<input type="checkbox" name="iphone-x" value="iphone-6"  /> iPhone X<br />
<input type="checkbox" name="google-pixel" value="google-pixel"  /> Google Pixel<br />
<input type="checkbox" name="samsung-gallaxy" value="samsung-gallaxy" /> Samsung Gallaxy

Kết quả

BẠN THÍCH SẢN PHẨM NÀO?
iPhone X
Google Pixel
Samsung Gallaxy

button

Dùng để tạo 1 nút bấm.

<input type="button" value="Nhấn vào đây!" />

Kết quả

file

Dùng để lựa chọn file, thường dùng cho việc tải file lên server.

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

Kết quả

number

Dùng chọn lựa những giá trị số trong khoảng xác định.

<input type="number" name="quality" min="0" max="10"  />

• min: giới hạn dưới.
• max: giới hạn trên.

Kết quả

color

Dùng để lấy mã màu thông qua công cụ trực quan.

<input type="color" name="color" />

Kết quả

email

Dùng cho việc nhập email.

<input type="email" name="email" />

Kết quả

Ngoài những <input> này thì HTML còn có hỗ trợ rất nhiều thẻ <input> khác:

• data
• datetime
• time
• search
• month
• week.
• ...

Bài chung series

• HTML - Phần 0: Trang Web Đầu Tiên
• HTML - Phần 1: Cơ Bản về HTML
• HTML - Phần 2: Các Thẻ Định Dạng Văn Bản
• HTML - Phần 3: Thẻ Liên Kết trong HTML
• HTML - Phần 4: Các Thẻ Định Dạng Danh Sách
• HTML - Phần 5: Các Thẻ Hình Ảnh, Video, Audio
• HTML - Phần 6: Các Thẻ Input trong HTML
• HTML - Phần 7: Thẻ Table trong HTML
• HTML - Phần 8: Thẻ Form trong HTML