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ả
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