Thẻ INPUT trong HTML
Trần Thị Vân - 1948
- 23/02/2025
Chức năng của Thẻ INPUT trong HTML
Thẻ input trong HTML được cấu hình với nhiều kiểu dữ liệu khác nhau để bạn có thể nhập dữ liệu hợp lý, hiệu quả hoặc có thể chọn dữ liệu bằng cách dùng thẻ input này, thẻ input thường được sử dụng trong các form và sẽ gửi dữ liệu đến máy chủ xử lý sau khi người dùng nhập dữ liệu và gửi yêu cầu đi.
Các kiểu dữ liệu của Thẻ input trong HTML
Kiểu text trong thẻ input
Kiểu text cho phép nhập chữ và số hoặc các ký tự khác.
<label for="hoten">Họ và Tên</label>
<input type="text" name="hovaten" id="hoten" placeholder="Họ và Tên">
Kiểu số (tel) trong thẻ input
Chỉ cho phép nhập số, trên di động có kích hoạt bàn phím nhập số nên rất tiện lợi.
<label for="sodienthoai">Số điện thoại</label>
<input type="tel" name="dienthoai" id="sodienthoai" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required>
Kiểu số (number) trong thẻ input
Kiểu number cho phép nhập số và có nút tăng giảm, ngoài ra còn có giới hạn số nhỏ nhất, số lớn nhất và quy định số bước khi mỗi lần tăng giảm.
<label for="chonsoluong">Số lượng</label>
<input type="number" name="soluong" id="chonsoluong" max="1000" value="1" min="1" step="1">
Kiểu mật khẩu (password) trong thẻ input
Giúp các ký tự nhập vào sẽ hiển thị thành dấu * nhưng thực chất vẫn là những gì chúng ta nhập vào, giúp mật khẩu được bảo mật hơn khi nhập.
<label for="matkhau">Mật khẩu:</label>
<input type="password" name="password" id="matkhau">
Kiểu submit trong thẻ input
Đây là nút khi nhấn gửi thì sẽ gửi toàn bộ dữ liệu của form đến máy chủ xử lý.
<input type="submit" name="gui" value="GỬI">
Kiểu reset trong thẻ input
Khi nhấn vào nút này thì tất cả dữ liệu đã nhập trong form sẽ mất đi và bắt đầu nhập lại, nút này giúp người dùng muốn nhập lại từ đầu.
<input type="reset" value="Nhập Lại">
Kiểu email trong thẻ input
Kiểu email dùng để kiểm tra email nhập, nếu đúng là email thì mới cho phép gửi.
<label for="email">Email</label>
<input type="email" name="mail" id="email" placeholder="Nhập email">
Kiểu date trong thẻ input
Cho phép chọn ngày tháng năm, nếu muốn đặt lịch, chọn ngày sinh nhật,... thì rất thích hợp.
<label for="ngaydi">Ngày đi</label>
<input type="date" name="chonngaydi" id="ngaydi" value="2025-02-23">
Kiểu datetime-local trong thẻ input
Thẻ này cho chọn thời gian và cho phép nhập hoặc chọn thêm giờ phút.
<label for="thoigiandi">Ngày đi</label>
<input type="datetime-local" name="chonthoigiandi" id="thoigiandi">
Kiểu color trong thẻ input
Thẻ này dùng để chọn màu sắc.
<label for="mausac">Màu sắc</label>
<input type="color" name="chonmausac" id="mausac" value="#ff0000">
Kiểu search trong thẻ input
Có nút này giúp khi đang gõ từ khóa tìm kiếm từ khóa này mà muốn đổi qua từ khóa khác thì có nút xóa hết các từ đã nhập, giúp nhanh chóng nhập lại.
<input type="search" name="tukhoa" id="tukhoa">
Kiểu range trong thẻ input
Hiện thanh trượt cho phép bạn chọn số liệu từ giá trị min đến giá trị max được quy định trong thẻ.
<label for="vol">Chọn giá trị từ 0 tới 60:</label>
<input type="range" id="vol" name="chonvol" min="0" max="60">
Kiểu file trong thẻ input
Kiểu này hỗ trợ bạn upload file hình ảnh và các file khác, nếu trong form có thẻ này thì phải thêm enctype="multipart/form-data" vào thẻ khai báo form.
<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="file2">
<input type="submit" value="GỬI">
</form>
Kiểu url trong thẻ input
Thẻ này kiểm tra dữ liệu nhập vào phải là một URL thì mới cho phép gửi.
<label for="website">Nhập URL Website của bạn:</label>
<input type="url" id="website" name="nhapwebsite">
Kiểu checkbox trong thẻ input
Cho phép người dùng chọn nhiều món trong một nhóm.
<input type="checkbox" name="monhoc" id="toan" value="Toán">
<label for="toan">Tôi thích môn Toán</label><br>
<input type="checkbox" name="monhoc" id="ly" value="Lý">
<label for="ly">Tôi thích môn Lý</label><br>
<input type="checkbox" name="monhoc" id="hoa" value="Hóa">
<label for="hoa">Tôi thích môn Hóa</label><br>
Kiểu radio trong thẻ input
Chọn một món trong một nhóm.
<input type="radio" id="nam" name="gioitinh" value="Nam">
<label for="nam">Nam</label><br>
<input type="radio" id="nu" name="gioitinh" value="Nữ">
<label for="nu">Nữ</label><br>
Kiểu hidden trong thẻ input
Kiểu này sẽ không hiện cho người dùng nhìn thấy, nhưng khi POST sẽ lấy được value của thẻ này, thông thường sẽ đặt URL hoặc ID của sản phẩm trong thẻ này.
<input type="hidden" name="idsanpham" value="68">
Các thuộc tính sử dụng trong thẻ input
type: đặt kiểu dữ liệu cho thẻ.
name: Đặt tên biến để POST dữ liệu.
placeholder: Chú thích mờ để người dùng dễ dàng nhận biết yêu cầu của thẻ.
value: Đặt giá trị cho thẻ, có một số nút sẽ hiển thị chữ của nút cho người dùng thấy.
id: Đặt tên nhận diện với thẻ label, hơn nữa có thể làm việc với CSS với Javascript.
disabled: Không cho phép tác động lên thẻ này nữa, chỉ hiện cho người dùng nhìn.
Các lưu ý khi sử dụng thẻ input trong HTML
Khi tạo biểu mẫu bằng HTML, việc sử dụng thẻ input đúng cách giúp dữ liệu thu thập được chính xác hơn và mang lại trải nghiệm nhập liệu thuận tiện cho người dùng. Không nên chỉ tạo ô nhập mà cần lựa chọn kiểu dữ liệu, thuộc tính và cách kiểm soát phù hợp với từng trường hợp.
Lựa chọn đúng kiểu input phù hợp với dữ liệu cần nhập
Mỗi giá trị nhập vào có đặc điểm khác nhau nên cần chọn type phù hợp cho thẻ input. Việc này giúp trình duyệt hỗ trợ người dùng nhập liệu nhanh hơn và hạn chế sai sót.
- Sử dụng text cho nội dung thông thường như họ tên, địa chỉ hoặc tiêu đề.
- Sử dụng email khi cần nhập địa chỉ thư điện tử để trình duyệt hỗ trợ kiểm tra định dạng.
- Sử dụng number cho dữ liệu dạng số như số lượng, tuổi hoặc giá tiền.
- Sử dụng date cho các trường ngày tháng để người dùng dễ chọn thông tin.
Chọn đúng loại input không chỉ giúp biểu mẫu dễ sử dụng hơn mà còn hỗ trợ quá trình xử lý dữ liệu phía sau.
Sử dụng thuộc tính input để tối ưu trải nghiệm người dùng
Các thuộc tính đi kèm giúp thẻ input hoạt động linh hoạt hơn và hướng dẫn người dùng nhập dữ liệu chính xác. Một số thuộc tính thường được sử dụng gồm placeholder, required, value, maxlength và disabled.
<input type="text" placeholder="Nhập họ tên" required>
Ví dụ trên tạo một ô nhập bắt buộc, đồng thời hiển thị gợi ý để người dùng biết cần điền thông tin gì.
Ngoài ra, nên giới hạn dữ liệu nhập khi cần thiết để tránh người dùng nhập sai định dạng hoặc vượt quá yêu cầu của hệ thống.
Kết hợp input với label để tăng khả năng truy cập
Thẻ label giúp mô tả rõ mục đích của từng ô nhập và hỗ trợ người dùng thao tác dễ dàng hơn, đặc biệt với người sử dụng trình đọc màn hình.
<label for="email">Email</label>
<input id="email" type="email">
Khi liên kết label với input thông qua thuộc tính for và id, người dùng có thể nhấp vào phần mô tả để chọn nhanh ô nhập tương ứng.
Kiểm tra và xác thực dữ liệu nhập từ người dùng
Dữ liệu từ biểu mẫu luôn cần được kiểm tra trước khi lưu trữ hoặc xử lý. HTML cung cấp một số công cụ hỗ trợ xác thực cơ bản như required, pattern, min, max và các kiểu input chuyên biệt.
<input type="number" min="1" max="100">
Tuy nhiên, việc kiểm tra bằng HTML chỉ là bước đầu. Với các website thực tế, dữ liệu vẫn cần được xác thực lại ở phía máy chủ để đảm bảo tính bảo mật và chính xác.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thẻ INPUT trong HTML.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
