Thẻ Input trong HTML: Hướng dẫn A-Z các loại và thuộc tính

Khi bắt tay vào thiết kế web, việc thu thập thông tin người dùng là không thể thiếu, và trái tim của mọi biểu mẫu chính là thẻ input trong HTML. Đây là yếu-tố-then-chốt giúp bạn tạo ra các trường nhập liệu từ văn bản, mật khẩu cho đến các nút bấm tương tác. Bài viết này của WiWeb sẽ là cẩm nang A-Z, hướng dẫn bạn từ cú pháp cơ bản đến các loại và thuộc tính nâng cao, giúp bạn làm chủ hoàn toàn công cụ mạnh mẽ này.

Thẻ Input trong HTML là gì?

Nếu ví von website là một ngôi nhà, thì các biểu mẫu (form) chính là cánh cửa giao tiếp giữa bạn và khách truy cập. Và để xây nên cánh cửa đó, chúng ta không thể không nhắc đến thẻ <input> trong HTML – viên gạch nền tảng cho mọi sự tương tác.

Định nghĩa và vai trò chính của thẻ input

Thẻ <input> là một phần tử trong HTML được sử dụng để tạo ra các điều khiển tương tác trên web, cho phép người dùng nhập dữ liệu. Nó là thành phần cốt lõi và đa năng nhất bên trong một biểu mẫu. Bạn muốn người dùng nhập tên? Dùng <input>. Cần họ chọn một phương án? Dùng <input>. Muốn có một nút để gửi thông tin đi? Vẫn là <input>.

Vai trò của nó không chỉ dừng lại ở việc thu thập dữ liệu. Một thẻ input được thiết kế tốt sẽ cải thiện đáng kể trải nghiệm người dùng, giúp họ điền thông tin nhanh chóng và chính xác.

Cú pháp cơ bản để khai báo một thẻ input

Thẻ <input> là một thẻ tự đóng (self-closing), nghĩa là nó không có thẻ đóng </input>. Cú pháp của nó cực kỳ đơn giản:

<input type="value">

Trong đó, thuộc tính type là quan trọng nhất. Nó quyết định loại điều khiển sẽ hiển thị trên màn hình. Ví dụ, type="text" sẽ tạo ra một ô nhập văn bản thông thường.

Mối quan hệ không thể tách rời với thẻ

Một mình thẻ <input> có thể hiển thị, nhưng nó sẽ không có nhiều ý nghĩa nếu không được đặt bên trong một thẻ <form>. Thẻ <form> hoạt động như một chiếc hộp chứa, gom tất cả dữ liệu từ các thẻ input lại với nhau. Khi người dùng nhấn nút gửi (submit), toàn bộ dữ liệu trong chiếc hộp này sẽ được gửi đến máy chủ để xử lý.

<form action="/xu-ly-du-lieu.php" method="post">
  <label for="username">Tên đăng nhập:</label>
  <input type="text" id="username" name="username">
  <input type="submit" value="Gửi">
</form>

Trong ví dụ trên, thẻ <form> bao bọc thẻ <input>, sẵn sàng thu thập và gửi dữ liệu đi. Mối quan hệ này chính là nền tảng của mọi biểu mẫu tương tác trên web.

Các loại Input trong HTML phổ biến nhất

Sức mạnh thực sự của thẻ <input> nằm ở sự đa dạng của thuộc tính type. Thuộc tính này có thể biến một ô nhập liệu đơn giản thành một công cụ chọn ngày tháng, một thanh trượt hay một nút bấm. Hãy cùng WiWeb khám phá các loại input trong HTML phổ biến nhất, được phân loại theo từng nhóm chức năng nhé.

Nhóm nhập liệu văn bản

Đây là nhóm cơ bản nhất, dùng để thu thập các chuỗi ký tự từ người dùng.

• text: Ô nhập văn bản một dòng tiêu chuẩn. Đây là giá trị mặc định nếu bạn không khai báo type. Hoàn hảo cho tên, địa chỉ, v.v.

  <input type="text">
  

• password: Giống hệt text, nhưng các ký tự nhập vào sẽ được che đi bằng dấu chấm tròn hoặc hoa thị. Chuyên dùng cho ô mật khẩu.

  <input type="password">
  

• email: Dành riêng cho việc nhập địa chỉ email. Trên các thiết bị di động, bàn phím sẽ tự động tối ưu với ký tự @ và .. Trình duyệt cũng có thể tự động kiểm tra định dạng email cơ bản.

  <input type="email">
  

• search: Tạo ra một ô tìm kiếm. Về cơ bản nó giống text, nhưng một số trình duyệt có thể thêm một dấu X nhỏ để người dùng xóa nhanh nội dung đã nhập.

  <input type="search">
  

Nhóm lựa chọn

Nhóm này cho phép người dùng đưa ra lựa chọn từ một danh sách có sẵn.

• checkbox: Hiển thị một ô vuông cho phép người dùng chọn một hoặc nhiều tùy chọn. Rất quen thuộc trong các mục như “Đồng ý với điều khoản” hay chọn sở thích.

  <input type="checkbox" name="hobby" value="coding"> Lập trình
  <input type="checkbox" name="hobby" value="music"> Âm nhạc
  

• radio: Hiển thị một nút tròn. Trong một nhóm các nút radio (có cùng thuộc tính name), người dùng chỉ có thể chọn một tùy chọn duy nhất. Ví dụ như chọn giới tính hoặc phương thức thanh toán.

  <input type="radio" name="gender" value="male"> Nam
  <input type="radio" name="gender" value="female"> Nữ
  

Nhóm nút bấm và hành động

Nhóm này không dùng để nhập liệu mà để thực hiện một hành động cụ thể.

• submit: Tạo ra một nút bấm đặc biệt. Khi được nhấn, nó sẽ tự động gửi toàn bộ dữ liệu trong thẻ <form> đi.

  <input type="submit" value="Đăng ký">
  

• reset: Tạo ra một nút bấm giúp xóa toàn bộ dữ liệu người dùng đã nhập trong form, đưa các trường về giá trị mặc định ban đầu.

  <input type="reset" value="Nhập lại">
  

• button: Một nút bấm đa năng. Bản thân nó không có hành động mặc định, nhưng lại cực kỳ hữu ích khi kết hợp với JavaScript để thực thi một tác vụ tùy chỉnh.

  <input type="button" value="Nhấn vào tôi">
  

• file: Cho phép người dùng chọn một hoặc nhiều file từ thiết bị của họ để tải lên.

  <input type="file">
  

Nhóm nhập liệu chuyên dụng

Đây là các loại input hiện đại, cung cấp giao diện người dùng chuyên biệt để nhập liệu dễ dàng hơn.

• number: Chỉ cho phép nhập số. Trình duyệt thường hiển thị thêm các mũi tên lên/xuống để tăng/giảm giá trị.

  <input type="number" min="1" max="100">
  

• date: Hiển thị một công cụ chọn ngày tháng, giúp người dùng chọn ngày dễ dàng mà không cần gõ tay.

  <input type="date">
  

• color: Mở ra một bảng chọn màu sắc, cho phép người dùng chọn một màu và trả về mã hex của màu đó.

  <input type="color">
  

• range: Tạo ra một thanh trượt, cho phép người dùng chọn một giá trị trong một khoảng nhất định. Rất hữu ích cho các thanh điều chỉnh âm lượng, độ sáng…

  <input type="range" min="0" max="10">
  

Tổng hợp các thuộc tính của thẻ Input quan trọng bạn phải biết

Ngoài thuộc tính type quyết định hình dáng, các thuộc tính của thẻ input khác lại quyết định hành vi và cách dữ liệu được xử lý. Nắm vững những thuộc tính này là chìa khóa để xây dựng các biểu mẫu thông minh và thân thiện. Dưới đây là danh sách những thuộc tính quan trọng nhất bạn không thể bỏ qua.

name

Đây là thuộc tính cực kỳ quan trọng. Khi form được gửi đi, dữ liệu từ mỗi input sẽ được gửi dưới dạng cặp key/value. Thuộc tính name chính là key. Nếu không có name, dữ liệu từ input đó sẽ không được gửi đi.

<input type="text" name="ho_ten"> <!-- Dữ liệu gửi đi sẽ là ho_ten=GiaTriNguoiDungNhap -->

value

Thuộc tính value xác định giá trị ban đầu của một trường input. Với checkbox và radio, đây là giá trị sẽ được gửi đi nếu ô đó được chọn. Với submit hay button, value là văn bản hiển thị trên nút.

<input type="text" name="country" value="Việt Nam">
<input type="submit" value="Gửi ngay">

placeholder

placeholder hiển thị một đoạn văn bản gợi ý ngắn bên trong ô input khi nó còn trống. Văn bản này sẽ tự động biến mất khi người dùng bắt đầu gõ. Nó rất hữu ích để hướng dẫn người dùng nên nhập gì.

<input type="email" name="email" placeholder="nhapemail@example.com">

id

Thuộc tính id cung cấp một định danh duy nhất cho thẻ input trên toàn bộ trang. Bản thân nó không có tác dụng trực quan, nhưng lại trở nên mạnh mẽ khi kết hợp với thẻ <label>. Bằng cách dùng thuộc tính for của <label> trỏ đến id của <input>, bạn đã tạo ra một liên kết.

Lợi ích là gì? Khi người dùng nhấn vào văn bản của <label>, con trỏ chuột sẽ tự động nhảy vào ô input tương ứng. Điều này cực kỳ tốt cho trải nghiệm người dùng, đặc biệt trên di động.

<label for="ten">Họ và tên:</label>
<input type="text" id="ten" name="ten">

required, readonly, disabled

Đây là các thuộc tính boolean, chúng không cần giá trị. Sự có mặt của chúng đã kích hoạt chức năng.

• required: Bắt buộc người dùng phải điền vào trường này trước khi gửi form.
• readonly: Người dùng không thể sửa đổi giá trị của trường input, nhưng dữ liệu vẫn được gửi đi cùng form.
• disabled: Vô hiệu hóa hoàn toàn trường input. Người dùng không thể tương tác và dữ liệu cũng không được gửi đi.

<input type="text" name="username" required>
<input type="text" name="ma_khuyen_mai" value="KM2024" readonly>
<input type="text" name="id_user" value="123" disabled>

size, maxlength

• size: Quy định độ rộng của ô input, tính bằng số ký tự có thể nhìn thấy. Ví dụ size="50" sẽ tạo ra một ô input rộng bằng 50 ký tự.
• maxlength: Giới hạn số ký tự tối đa mà người dùng có thể nhập vào ô input. Rất hữu ích cho các trường như số điện thoại, mã bưu điện.

<input type="text" name="sdt" maxlength="10">

Ví dụ xây dựng Form đăng ký hoàn chỉnh với thẻ Input

Lý thuyết sẽ trở nên dễ hiểu hơn rất nhiều khi được áp dụng vào thực tế. Bây giờ, chúng ta sẽ cùng nhau vận dụng tất cả kiến thức về thẻ input trong HTML để xây dựng một form đăng ký thành viên hoàn chỉnh. Đây là một ví dụ về thẻ input trong HTML điển hình mà bạn sẽ gặp ở hầu hết các website.

Code HTML cho một form đăng ký đầy đủ

Dưới đây là đoạn mã cho một biểu mẫu đăng ký cơ bản, bao gồm nhiều loại input và thuộc tính khác nhau.

<form action="/dang-ky" method="post">
  <h2>Đăng Ký Tài Khoản</h2>

  <p>
    <label for="fullname">Họ và tên:</label><br>
    <input type="text" id="fullname" name="fullname" placeholder="Ví dụ: Nguyễn Văn A" required>
  </p>

  <p>
    <label for="email">Email:</label><br>
    <input type="email" id="email" name="email" required>
  </p>

  <p>
    <label for="password">Mật khẩu:</label><br>
    <input type="password" id="password" name="password" minlength="8" required>
  </p>

  <p>
    <label>Giới tính:</label><br>
    <input type="radio" id="male" name="gender" value="male"> <label for="male">Nam</label>
    <input type="radio" id="female" name="gender" value="female"> <label for="female">Nữ</label>
  </p>

  <p>
    <input type="checkbox" id="terms" name="terms" required>
    <label for="terms">Tôi đồng ý với các điều khoản dịch vụ.</label>
  </p>

  <p>
    <input type="submit" value="Tạo tài khoản">
  </p>

</form>

Phân tích và giải thích từng thẻ input được sử dụng

Bạn thấy form trên quen thuộc chứ? Hãy cùng mổ xẻ từng phần nhé:

• Họ và tên: Chúng ta dùng type="text" cơ bản. placeholder được thêm vào để gợi ý định dạng tên. Quan trọng nhất là thuộc tính required để đảm bảo người dùng không bỏ trống trường này.
• Email: type="email" giúp trình duyệt kiểm tra định dạng email và tối ưu bàn phím trên di động. Đây cũng là một trường bắt buộc (required).
• Mật khẩu: type="password" để che các ký tự khi nhập. Chúng ta còn thêm thuộc tính minlength="8" để yêu cầu mật khẩu có ít nhất 8 ký tự, một biện pháp bảo mật cơ bản.
• Giới tính: Hai thẻ input type="radio" được sử dụng. Lưu ý rằng cả hai đều có cùng name="gender". Điều này tạo thành một nhóm, đảm bảo người dùng chỉ có thể chọn một trong hai tùy chọn.
• Điều khoản dịch vụ: Một input type="checkbox" và cũng được đặt là required. Điều này bắt buộc người dùng phải tích vào ô này để xác nhận đồng ý trước khi có thể đăng ký.
• Nút Tạo tài khoản: Cuối cùng là input type="submit". Khi nhấn vào, nó sẽ kiểm tra tất cả các thuộc tính required, minlength… Nếu hợp lệ, toàn bộ dữ liệu từ form sẽ được gửi đi.

Câu hỏi thường gặp về thẻ Input (FAQ)

Trong quá trình làm việc với thẻ input, chắc hẳn bạn sẽ có một vài thắc mắc. WiWeb đã tổng hợp những câu hỏi phổ biến nhất và giải đáp ngay dưới đây để giúp bạn gỡ rối nhanh chóng.

<input type="button" value="Click Me!">

<!-- HTML -->
<input type="text" id="myInput" value="Xin chào WiWeb">

<!-- JavaScript -->
<script>
  // Lấy phần tử input thông qua id
  const inputElement = document.getElementById('myInput');

  // Lấy giá trị của nó bằng thuộc tính .value
  const inputValue = inputElement.value;

  console.log(inputValue); // Kết quả sẽ là "Xin chào WiWeb"
</script>

Vậy là chúng ta đã cùng nhau đi qua một hành trình toàn diện, từ định nghĩa cơ bản thẻ input trong HTML là gì cho đến cách áp dụng vào một biểu mẫu đăng ký thực tế. Hi vọng rằng qua bài viết này của WiWeb, bạn không chỉ hiểu rõ về các loại và thuộc tính của thẻ input, mà còn cảm thấy tự tin hơn khi xây dựng các form tương tác cho website của mình.

Hãy nhớ rằng, một form tốt không chỉ thu thập đủ dữ liệu, mà còn phải mang lại trải nghiệm mượt mà cho người dùng. Đừng ngần ngại thử nghiệm với các loại input khác nhau để tìm ra giải pháp tối ưu nhất.

Bạn còn thắc mắc nào về thẻ input hay có mẹo hay nào muốn chia sẻ không? Hãy để lại bình luận bên dưới để chúng ta cùng thảo luận nhé!

Và nếu bạn đang tìm kiếm một đối tác để xây dựng website chuyên nghiệp, nơi mỗi thẻ input đều được tối ưu cho trải nghiệm người dùng, WiWeb luôn sẵn sàng đồng hành. Hãy liên hệ với chúng tôi để được tư vấn chi tiết!