Chắc hẳn bạn đã từng lướt web và bắt gặp các ô điền thông tin, khung tìm kiếm hay nút bấm. Tất cả những yếu tố tương tác đó đều được tạo ra nhờ vào một thẻ HTML quan trọng: thẻ <input>
. Trong bài viết này, mình sẽ giúp bạn khám phá chi tiết về thẻ <input>
, từ khái niệm cơ bản, các loại input đa dạng giúp bạn ứng dụng ngay vào trang web của mình.
Những điểm chính
- Thẻ Input trong HTML: Là thành phần cốt lõi giúp xây dựng form, cho phép người dùng nhập dữ liệu và tương tác trực tiếp với website.
- Các loại Input HTML: Tìm hiểu các loại input khác nhau như text, password, file, button, radio, checkbox để xây dựng form đa dạng.
- Các loại Input và ví dụ: Hiểu các thuộc tính và cách dùng của từng loại input để xây dựng form web hoàn chỉnh.
- Cách lấy dữ liệu Input: Học cách lấy dữ liệu từ thẻ input bằng thuộc tính value và sự kiện onchange để xử lý thông tin người dùng.
- Lưu ý về thẻ Input: Nắm vững cách dùng thẻ input trong form, hiểu nó là void element và kết hợp với thẻ label để tối ưu.
- Thuộc tính thẻ Input: Tìm hiểu các thuộc tính quan trọng như type, name, value, placeholder và required để tùy biến form.
- Hỗ trợ trình duyệt: Thẻ input được hỗ trợ trên hầu hết các trình duyệt phổ biến hiện nay như Chrome, Firefox, Edge, Opera và Safari.
- Dịch vụ Hosting Vietnix: Cung cấp nền tảng hosting chuyên nghiệp với tốc độ cao, độ tin cậy và bảo mật vượt trội, được hỗ trợ bởi đội ngũ chuyên gia.
- FAQ: Giải đáp các vấn đề và thắc mắc liên quan đến thẻ Input trong HTML.

Thẻ Input trong HTML là gì?
Thẻ HTML <input>
là một yếu tố cốt lõi trong việc xây dựng biểu mẫu trên các trang web. Thẻ <input>
cho phép người dùng tương tác trực tiếp bằng cách nhập dữ liệu, lựa chọn các tùy chọn hoặc thực hiện các hành động khác.

Để sử dụng thẻ <input>
, bạn cần đặt nó bên trong một phần tử <form>
. Dưới đây là một ví dụ đơn giản:
<form>
<label for="name">Tên của bạn:</label>
<input type="text" id="name" name="name"><br><br>
<input type="submit" value="Gửi">
</form>
Sau khi thành thạo thẻ Input trong HTML để xây dựng form, bạn cần một nền tảng vững chắc để website hoạt động tối ưu. Đó là lý do bạn nên chọn Hosting tốc độ cao của Vietnix.
Vietnix cung cấp môi trường lý tưởng để mã HTML, CSS và các form tương tác của bạn hoạt động mượt mà, ổn định. Với dịch vụ NVMe Hosting hiệu suất cao, mọi tương tác của người dùng trên website đều diễn ra tức thì, mang lại trải nghiệm tốt nhất.

NVME HOSTING Vietnix – hiệu năng vượt trội
Vận hành website tốc độ cao trên nền tảng Intel Xeon Platinum và ổ cứng NVMe – An tầm tuyệt đối với cơ chế bảo vệ dữ liệu hàng đầu.
Các loại (type) <input />
trong HTML
Các thẻ input trong html đều giống nhau về cấu trúc và chỉ khác nhau về type. Chính type này sẽ quyết định kiểu của input. Có đến hơn 20 type khác nhau. Có một số type input chỉ được hỗ trợ trong HTML5 mà thôi. Các type dưới đây là type được tất cả các trình duyệt thông dụng hỗ trợ.
- Nhập text
Code mẫu: <input name="hoten" type="text" />
- Nhập password
Code mẫu: <input name="psw" type="password" />
- File đính kèm
Code mẫu: <input type="file" name="anh">
- Button reset
Code mẫu:
<form action="#">
Thành phố: <input type="text" name="thành phố"><br />
Nơi cư trú: <input type="text" name="nơi cư trú"><br />
<input type="reset" value="Reset">
</form>
- Button submit
Code mẫu:
<form action="#">
Tên trường học: <input name="tentruonghoc" type="text" /><br />
Giáo viên chủ nhiệm: <input name="giaovienchunhiem" type="text" /><br />
<input type="send" value="Send" />
</form>
- Ẩn input
Code mẫu:
<form action="#">
Họ tên đầy đủ: <input type="text" name="hotendaydu"><br>
<input type="hidden" name="quocgia" value="Hàn Quốc">
<input type="submit" value="Submit">
</form>
- Radio button
Code mẫu:
<form action="#">
<input name="quequan" type="radio" value="Bình Định" />Bình Định<br />
<input name="quequan" type="radio" value="Gia Lai" />Gia Lai<br />
<input name="gioitinh" type="radio" value="Phú Yên" />Phú Yên<br />
</form>
- Checkbox
Code mẫu:
<form action="#">
<input name="thethao" type="checkbox" value="Tennis" />Tennis<br />
<input name="thethao" type="checkbox" value="Quần vợt" />Quần vợt<br />
<input name="thethao" type="checkbox" value="Bóng rổ" />Bóng rổ<br />
<input name="thethao" type="checkbox" value="Bóng bàn" />Bóng bàn<br />
<input name="thethao" type="checkbox" value="Karate" />Karate
</form>
Xem thêm: Thẻ embed (liên kết nhúng) trong HTML
Tổng hợp những ví dụ cụ thể về thẻ input trong HTML
- Input dạng text (maxlength)
<input type="text" name="" value="" size="25" maxlength="15" />
Để xác định chiều dài lớn nhất (trong ký tự) của một trường text hay password.
- Input dạng password
<input type="password" name="" value="" size="25" />
Text hiển thị bên trong dưới dạng là password.

- Input dạng hidden
<input type="hidden" name="" value="" size="25" />
Dạng này sẽ không được hiển thị ra trình duyệt. Và thường được sử dụng khi không muốn dữ liệu bị thay đổi.

- Input dạng checkbox (checked)
<input type="checkbox" name="" value="" checked="checked" />
<input type="checkbox" name="" value="" />
Dạng này thường được sử dụng cho nhiều lựa chọn khác nhau.

- Input dạng radio (checked)
<input type="checkbox" name="" value="" checked="checked" />
<input type="checkbox" name="" value="" />
Dạng này thường được sử dụng cho một chọn lựa mặc định.

- Input dạng file upload:
<input type="file" name="" />
Dạng này được sử dụng để upload file.

- Input dạng button image
<input type="image" src="images/btn_submit.jpeg" alt="SUBMIT" name="" />
Sử dụng như một nút nhấn nhưng bằng hình ảnh.

- Input dạng button submit
<input type="submit" name="" value="Submit" />
Được dùng để gửi dữ liệu lên server, dữ liệu được gửi thông qua thuộc tính action trong <form>.

Input dạng button reset
<input type="reset" name="" value="Reset" />
Được dùng để reset lại giá trị trong <form>.

- Input dạng button
<input type="button" name="" value="Click" />
Sử dụng như một nút nhấn.

Cách lấy dữ liệu từ <input>
trong HTML
- 1. Sử dụng Thuộc tính value:
- 2. Sử dụng Sự kiện onchange:
Trong lập trình web, việc lấy giá trị input từ người dùng là một yếu tố quan trọng để tạo ra các ứng dụng web tương tác và xử lý form hiệu quả. Dữ liệu này thường được nhập vào thông qua các thẻ input trong HTML.
Phần này, mình sẽ hướng dẫn bạn chi tiết hai phương pháp chính để truy xuất dữ liệu từ thẻ <input>
, kèm theo ví dụ thực tế và giải thích rõ ràng.
1. Sử dụng Thuộc tính value:
Mỗi thẻ input trong HTML đều có một thuộc tính value, chứa giá trị hiện tại của input đó. Bạn có thể truy cập giá trị này thông qua DOM (Document Object Model) bằng JavaScript.
const hoTenInput = document.getElementById('hoTen');
const hoTen = hoTenInput.value;
console.log(hoTen); // In ra giá trị hiện tại của input
2. Sử dụng Sự kiện onchange:
Sự kiện onchange được kích hoạt mỗi khi giá trị của input thay đổi. Đây là cách hữu ích để theo dõi và xử lý dữ liệu người dùng nhập vào theo thời gian thực.
const emailInput = document.getElementById('email');
emailInput.onchange = function() {
const email = emailInput.value;
console.log(email); // In ra giá trị mới mỗi khi email thay đổi
};
Ví dụ thực tế:
<label for="hoTen">Họ và tên:</label>
<input type="text" id="hoTen" name="hoTen">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
Với kinh nghiệm của bản thân, mình khuyến khích bạn kết hợp cả hai phương pháp trên để có thể xử lý dữ liệu một cách linh hoạt và hiệu quả nhất. Việc nắm vững cách tương tác với DOM và các sự kiện trong JavaScript sẽ giúp bạn xây dựng những ứng dụng web chất lượng và thân thiện với người dùng.
Những điểm cần lưu ý đối với thẻ input web
Có 3 điểm cần lưu ý đối với thẻ input trong HTML sau đây:
- Đặt thẻ
<input>
trong phần tử<form>
: Điều này giúp trình duyệt hiểu rằng các trường nhập liệu này thuộc về một biểu mẫu và dữ liệu sẽ được gửi đi khi người dùng nhấn nút submit. - Thẻ
<input>
là phần tử trống (void element): Điều này có nghĩa là nó không có nội dung bên trong và không cần thẻ đóng. Bạn chỉ cần khai báo các thuộc tính để xác định loại input (text, password, email,…) và các đặc điểm khác. - Sử dụng thẻ
<label>
để tạo nhãn: Nhãn không chỉ giúp người dùng hiểu rõ mục đích của từng trường nhập liệu mà còn hỗ trợ người dùng thiết bị hỗ trợ (như trình đọc màn hình) và cải thiện SEO cho website của bạn.
<form>
<label for="name">Họ và tên:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</form>
Các thuộc tính của thẻ input trong HTML và HTML5
Bảng dưới đây giới thiệu chi tiết các thuộc tính của thẻ input trong HTML và HTML5:
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”) |
Trình duyệt hỗ trợ thẻ input HTML
Bảng dưới đây thể hiện các trình duyệt có hỗ trợ thẻ input.
Chrome | Firefox | Microsoft Edge | Opera | Safari | Android |

Dịch vụ Hosting Vietnix: Nền tảng tốc độ cao, ổn định và bảo mật cho website
Với vị thế là nhà cung cấp dịch vụ lâu đời và giàu kinh nghiệm, Vietnix mang đến giải pháp dịch vụ thuê hosting chuyên nghiệp, được xây dựng trên nền tảng vững chắc. Vietnix sở hữu đội ngũ chuyên gia công nghệ mạnh mẽ, luôn sẵn sàng hỗ trợ bạn 24/7.
Dịch vụ hosting của Vietnix ứng dụng công nghệ độc quyền Vietnix Speed Optimizer giúp tối ưu tốc độ vượt trội. Nền tảng này sử dụng phần cứng hiện đại và hệ thống máy chủ đặt tại Datacenter chuẩn Tier 3, đảm bảo website của bạn luôn hoạt động nhanh chóng, ổn định và bảo mật.
Các điểm mạnh nổi bật
- Tốc độ đột phá: Công nghệ độc quyền Vietnix Speed Optimizer tối ưu toàn diện từ phần cứng đến phần mềm.
- Độ tin cậy cao: Hạ tầng máy chủ Datacenter chuẩn Tier 3 đảm bảo uptime gần như tuyệt đối.
- Bảo mật toàn diện: Hệ thống bảo mật đa lớp và sao lưu dữ liệu tự động miễn phí hàng tuần.
- Đội ngũ chuyên gia: Hỗ trợ kỹ thuật 24/7 từ đội ngũ giàu kinh nghiệm.
Hãy để tốc độ dẫn lối thành công cho website của bạn. Đăng ký ngay dịch vụ thuê hosting tại Vietnix để trải nghiệm sự khác biệt!
Thông tin liên hệ:
- Website: https://vietnix.vn/
- Hotline: 1800 1093
- Email: sales@vietnix.com.vn
- Địa chỉ: 265 Hồng Lạc, Phường Bảy Hiền, Thành Phố Hồ Chí Minh
Câu hỏi thường gặp
Có những thư viện hoặc framework JavaScript nào hỗ trợ tốt việc làm việc với thẻ input và form trong HTML?
Dựa trên kinh nghiệm lập trình web của mình, thì đây là các thư viện và framework JavaScript tốt nhất để làm việc hiệu quả với input và form trong HTML:
1. React: Được biết đến với khả năng xây dựng giao diện người dùng linh hoạt và component-based, React cung cấp các công cụ mạnh mẽ để quản lý trạng thái của form và input.
2. Angular: Với kiến trúc Model-View-Controller (MVC) rõ ràng, Angular cung cấp một hệ thống toàn diện để xây dựng các ứng dụng web phức tạp, bao gồm cả xử lý form và input.
3. Vue.js: Dễ dàng học và sử dụng, Vue.js cung cấp một cách tiếp cận linh hoạt để xây dựng giao diện người dùng và xử lý tương tác với form.
4. jQuery: Mặc dù không phải là một framework đầy đủ, jQuery vẫn là một lựa chọn phổ biến để xử lý DOM và các sự kiện trong JavaScript, bao gồm cả tương tác với form.
Các thuộc tính “required” và “pattern” dùng để làm gì trong thẻ input?
Khi bạn muốn một trường dữ liệu là bắt buộc, hãy thêm thuộc tính required. Nếu người dùng cố gắng gửi form mà không điền vào trường này, trình duyệt sẽ ngăn chặn hành động đó và hiển thị thông báo yêu cầu họ nhập dữ liệu.
Còn với pattern thuộc tính này cho phép bạn xác định một biểu thức chính quy (regex) mà giá trị nhập vào phải khớp. Regex là một công cụ mạnh mẽ để kiểm tra định dạng của dữ liệu (ví dụ: email, số điện thoại, ngày tháng,…).
Có những kỹ thuật CSS hoặc JavaScript nào giúp tạo ra các hiệu ứng đặc biệt cho thẻ <input>?
Với CSS:
– Tận dụng sức mạnh của thuộc tính CSS như :focus
, :hover
, :active
để tạo ra các hiệu ứng chuyển đổi màu sắc, đường viền, bóng đổ, và nhiều hơn nữa.
– Thêm hoạt ảnh CSS (animation) và chuyển đổi (transition) để tạo sự mượt mà và sống động cho các hiệu ứng.
Với JavaScript:
– Sử dụng sự kiện JavaScript như focus
, blur
, input
để xử lý sự kiện và thao tác DOM, thay đổi nội dung hoặc kiểu dáng của thẻ <input>
.
Sau khi tìm hiểu sâu về cú pháp và các thuộc tính khác nhau, ta có thể thấy thẻ Input trong HTML là gì không chỉ đơn thuần là một phần tử form. Với sự đa dạng về các loại type
, thẻ input là công cụ linh hoạt và mạnh mẽ, cho phép thu thập thông tin người dùng một cách hiệu quả và chính xác, từ nhập liệu văn bản cơ bản đến lựa chọn ngày tháng, tệp tin và nhiều hơn nữa, từ đó xây dựng nên những form tương tác hoàn chỉnh.