Ngọc Thanh - 163
- 23/02/2025
Ngọc Thanh 
Tìm hiểu Thẻ INPUT trong HTML, đó là một loại thẻ 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ả, chi tiết như nào hãy cùng chúng tôi phân tích:
Thẻ INPUT trong HTML
Thẻ <input> trong HTML là gì?
Thẻ <input> trong HTML là một loại thẻ 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.
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 *
