Thẻ Input trong HTML là gì? Tổng hợp các ví dụ về thẻ Input trong HTML

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.

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>

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>

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

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

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 HTML5 và HTML

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:

Trình duyệt hỗ trợ thẻ input

Bảng dưới đây thể hiện các trình duyệt có hỗ trợ thẻ input.

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.