Thẻ HTML <input>

Định nghĩa và cách sử dụng thẻ <input>

Thẻ <input> trong HTML là một thẻ được sử dụng để tạo một ô nhập liệu trong một form HTML. Nó có thể được sử dụng để tạo các loại ô nhập khác nhau, như ô nhập văn bản, nút radio, nút checkbox, v.v.

Cú pháp của thẻ <input>:

<input type="type" name="name" value="value">

Trong đó:

• type là loại ô nhập, có thể là text, password, radio, checkbox, submit, reset...
• name là tên của ô nhập, sẽ được sử dụng để xác định dữ liệu được nhập vào ô nhập này khi form được gửi đi.
• value là giá trị mặc định của ô nhập, sẽ được hiển thị trong ô nhập khi trang web được tải lên.

Ví dụ:

<form>
  <label for="name">Tên:</label><br>
  <input type="text" id="name" name="name" value="Nhập tên của bạn"><br>
  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email" value="Nhập email của bạn"><br>
  <input type="submit" value="Gửi">
</form> 

Phần tử <input> là phần tử biểu mẫu quan trọng nhất.

Phần tử <input> có thể được hiển thị theo nhiều cách, tùy thuộc vào thuộc tính type.

Các loại đầu vào khác nhau của input

• <input type="button">
• <input type="checkbox">
• <input type="color">
• <input type="date">
• <input type="datetime-local">
• <input type="email">
• <input type="file">
• <input type="hidden">
• <input type="image">
• <input type="month">
• <input type="number">
• <input type="password">
• <input type="radio">
• <input type="range">
• <input type="reset">
• <input type="search">
• <input type="submit">
• <input type="tel">
• <input type="text"> (giá trị mặc định)
• <input type="time">
• <input type="url">
• <input type="week">

Xem thuộc tính type để biết các ví dụ cho từng loại đầu vào!

Mẹo: Luôn sử dụng thẻ <label> để xác định nhãn cho <input type="text">, <input type="checkbox">, <input type="radio">, <input type="file">, and <input type="password">.

Hỗ trợ trình duyệt

Thuộc tính

Thuộc tính Global

Thẻ <input> cũng hỗ trợ các thuộc tính Global trong HTML.

Thuộc tính sự kiện

Thẻ <input> cũng hỗ trợ thuộc tính sự kiện trong HTML.

Ví dụ thêm về input

Để tạo một hộp kiểm để chọn nhiều lựa chọn, bạn có thể sử dụng thẻ input như sau:

<input type="checkbox" name="interests[]" value="books"> Sách
<input type="checkbox" name="interests[]" value="movies"> Phim
<input type="checkbox" name="interests[]" value="music"> Âm nhạc

Trong ví dụ trên, người dùng có thể chọn nhiều lựa chọn cho mục sở thích của họ bằng cách đánh dấu hộp kiểm tương ứng. Khi biểu mẫu được gửi, dữ liệu sẽ được gửi lên máy chủ dưới dạng một danh sách các lựa chọn đã chọn.

Bạn cũng có thể sử dụng thẻ input để tạo một nút radio để chọn một lựa chọn duy nhất trong một nhóm lựa chọn. Ví dụ, để tạo một nhóm nút radio cho giới tính, bạn có thể sử dụng thẻ input như sau:

<input type="radio" name="gender" value="male"> Nam
<input type="radio" name="gender" value="female"> Nữ
<input type="radio" name="gender" value="other"> Khác

Trong ví dụ trên, người dùng chỉ có thể chọn một lựa chọn cho giới tính của họ bằng cách đánh dấu nút radio tương ứng. Khi biểu mẫu được gửi, dữ liệu sẽ gửi lên máy chủ dưới dạng giá trị của nút radio được chọn.

Thẻ input còn có nhiều thuộc tính khác mà bạn có thể sử dụng để tùy chỉnh trường nhập của bạn. Ví dụ, bạn có thể sử dụng thuộc tính size để điều chỉnh kích thước của trường nhập, hoặc thuộc tính maxlength để giới hạn số lượng ký tự người dùng có thể nhập vào trường nhập.

Ví dụ, để tạo một trường nhập văn bản có kích thước là 30 ký tự và giới hạn số lượng ký tự người dùng có thể nhập là 100, bạn có thể sử dụng thẻ input như sau:

<input type="text" name="username" size="30" maxlength="100">

Thẻ input là một phần không thể thiếu trong các biểu mẫu HTML, và nó cung cấp nhiều tùy chọn để tùy chỉnh trường nhập theo nhu cầu của bạn. Tôi hy vọng rằng bạn đã hiểu được cách sử dụng thẻ input trong HTML và cách tùy chỉnh nó theo nhu cầu của bạn. Nếu có bất kỳ câu hỏi, vui lòng để lại trong comment dưới đây!