Thẻ input trong HTML là gì? Khám phá các thẻ input thường sử dụng

Nếu bạn đang học HTML, chắc chắn sẽ bắt gặp thẻ input trong HTML - một trong những thẻ cơ bản và quan trọng nhất. Với thẻ này, người dùng có thể tạo nhiều loại trường nhập liệu khác nhau từ ô nhập văn bản, mật khẩu, email, đến nút bấm gửi dữ liệu. Nắm vững cách sử dụng thẻ <input> sẽ giúp bạn xây dựng những form web chuyên nghiệp và hiệu quả.

Thẻ input trong HTML là gì?

Thẻ input trong HTML là một thành phần quan trọng để tạo các trường nhập liệu trong biểu mẫu (form). Nó cho phép người dùng tương tác với trang web bằng cách nhập văn bản, chọn tùy chọn, tải tệp hoặc thực hiện các hành động khác.

Mỗi thẻ input có thể mang nhiều kiểu khác nhau, phục vụ những mục đích riêng. Ví dụ:

Thẻ text dùng để nhập văn bản.
Thẻ password để nhập mật khẩu với ký tự ẩn.
Thẻ checkbox để chọn nhiều tùy chọn.
Thẻ submit để gửi biểu mẫu.

Ngoài ra, các thuộc tính như name, value, placeholder, minlength, maxlength… giúp bổ sung thông tin và hướng dẫn cho người dùng.

Giới thiệu các loại thẻ <input> trong HTML phổ biến

<input type="text">

Dùng để tạo ô nhập văn bản một dòng (tên, địa chỉ, tìm kiếm...). Đây là kiểu input cơ bản và phổ biến nhất.

Ví dụ:

<label for="name"> Search: </label>

Kết quả: Hiển thị nhãn “Search:” và một ô trống để người dùng nhập văn bản.

Bạn cũng có thể thêm một vài thuộc tính như minlength, maxlength, size tuỳ theo nhu cầu:

Minlength: Độ dài ký tự tối thiểu.
Maxlength: Độ dài ký tự tối đa.
Size: Kích thước ký tự.

Ví dụ:

Kết quả: Tạo ô nhập tên cho phép gõ từ 4 đến 8 ký tự. Nếu nhập ít hơn hoặc nhiều hơn, trình duyệt sẽ báo lỗi.

<input type="button">

Tạo một nút bấm nhưng không có chức năng mặc định.

Ví dụ:

Kết quả: Hiển thị một nút với chữ “Click Me!” nhưng bấm vào sẽ không có hành động xảy ra tiếp theo.

<input type="checkbox">

Tạo ô vuông (checkbox) cho phép chọn nhiều lựa chọn cùng lúc (ví dụ: chọn nhiều sở thích, dịch vụ).

Ví dụ:

<label for="subscribe">Subscribe to newsletter!</label>

Kết quả: Hiển thị ô vuông để người dùng tick chọn “Subscribe to newsletter!”. Khi gửi form, giá trị "subscribe" chỉ được gửi nếu ô được chọn.

<input type="color">

Hiển thị bảng chọn màu trong trình duyệt, cho phép người dùng chọn hoặc nhập mã màu (HEX/RGB).

Ví dụ:

<label for="background">Background Color</label>

Kết quả: Hiển thị một ô chọn màu. Khi click vào ô màu, trình duyệt mở bảng chọn màu cho phép chọn trực tiếp hoặc nhập mã màu.

<input type="date">

Cho phép người dùng nhập hoặc chọn ngày (ngày/tháng/năm) thông qua lịch tích hợp sẵn trong trình duyệt.

Ví dụ:

<label for="birthday">Birthday:</label>

Kết quả: Tạo trường nhập “Birthday” kèm lịch chọn ngày (ngày/tháng/năm). Người dùng có thể nhập hoặc chọn từ giao diện lịch tích hợp.

<input type="datetime-local">

Chọn ngày và giờ (không có múi giờ), thường dùng để đặt lịch hẹn, lịch sự kiện.

Ví dụ:

<label for="meeting-time">Choose a time:</label>

Kết quả: Hiển thị trường chọn lịch hẹn, cho phép nhập cả ngày và giờ nhưng không có múi giờ (timezone).

<input type="email">

Tạo ô nhập email, có sẵn chức năng kiểm tra định dạng email hợp lệ (ví dụ: phải có ký tự “@”).

Ví dụ:

<label for="email">Enter your email:</label>

Kết quả: Tạo ô nhập email. Nếu người dùng nhập sai định dạng (ví dụ thiếu @), trình duyệt sẽ báo lỗi khi submit form.

<input type="file">

Cho phép người dùng tải lên các tệp từ máy tính hoặc thiết bị (ảnh, tài liệu, video…).

Ví dụ:

Kết quả: Hiển thị nút “Chọn tệp” để tải lên tệp từ máy tính hoặc điện thoại (có thể chọn 1 hoặc nhiều tệp).

<input type="hidden">

Tạo một trường dữ liệu ẩn, không hiển thị cho người dùng, dùng để gửi giá trị bổ sung trong form (ví dụ: ID sản phẩm).

Ví dụ:

Kết quả: Không hiển thị gì trên trang nhưng khi gửi form sẽ gửi kèm dữ liệu id=123. Dùng để truyền dữ liệu mà người dùng không thấy.

<input type="image">

Hiển thị hình ảnh dưới dạng nút gửi form, hoạt động như nút submit nhưng thay thế nút mặc định bằng ảnh.

Ví dụ:

Kết quả: Hiển thị một hình ảnh (submit.png) và biến nó thành nút gửi form. Khi nhấn vào, form được gửi đi.

Ví dụ trong form:

<form>

<label for="firstname">First name:</label>

</form>

Kết quả: Tạo một form với ô nhập "First name" và nút gửi form bằng hình ảnh submit.png.

<input type="password">

Tạo ô nhập mật khẩu. Các ký tự được hiển thị dưới dạng dấu chấm hoặc sao (*) để đảm bảo bảo mật.

Ví dụ:

<label for="password">Password:</label>

Kết quả: Hiển thị ô nhập “Password”. Ký tự gõ vào sẽ hiển thị dưới dạng dấu ● hoặc * để bảo mật.

<input type="radio">

Tạo radio button, cho phép người dùng chọn duy nhất một lựa chọn trong nhiều tùy chọn.

Ví dụ:

<form>

</form>

Kết quả: Hiển thị hai radio button “Cat” và “Dog”. Vì cả hai có cùng name="animal", người dùng chỉ chọn được một trong hai.

<input type="range">

Tạo thanh trượt (slider) để chọn giá trị trong một khoảng xác định (ví dụ: âm lượng 0 - 100, độ sáng màn hình).

Ví dụ:

<label for="range">Select value: </label>

Kết quả: Hiển thị một thanh trượt mặc định từ 0 đến 100. Giá trị hiện tại là 90, người dùng có thể kéo để chọn giá trị khác.

Tạm kết

Thẻ input trong HTML là công cụ linh hoạt và cần thiết nhất để thu thập dữ liệu từ người dùng, phục vụ nhiều tình huống từ nhập văn bản, chọn ngày giờ, tải file cho đến tạo nút hành động. Việc nắm rõ các loại type và thuộc tính đi kèm sẽ giúp bạn xây dựng biểu mẫu web trực quan, dễ dùng và tối ưu trải nghiệm người dùng.

Bạn đang tìm một chiếc laptop mạnh mẽ để phục vụ học tập, làm việc và giải trí? Laptop ASUS tại FPT Shop là lựa chọn lý tưởng với thiết kế mỏng nhẹ, hiệu năng bền bỉ và nhiều dòng sản phẩm đa dạng từ phổ thông đến cao cấp. Truy cập website FPT Shop hoặc ghé cửa hàng gần nhất để sở hữu ngay chiếc laptop ASUS phù hợp với nhu cầu của bạn!

Laptop ASUS

Xem thêm: