Các thẻ nhập liệu nâng cao trong HTML5
HTML5 cung cấp nhiều loại input nâng cao, giúp người dùng nhập dữ liệu dễ dàng hơn mà không cần JavaScript hoặc thư viện bên ngoài.
Bài học này sẽ hướng dẫn bạn cách sử dụng các loại input như date (chọn ngày), number (nhập số), range (thanh trượt), và color (chọn màu), cũng như cách ứng dụng chúng trong biểu mẫu thực tế.
1. Các thẻ nhập liệu nâng cao
Cách sử dụng thẻ <input> nâng cao
Dưới đây là các loại input nâng cao được hỗ trợ trong HTML5:
1. Input chọn ngày – <input type="date">
Thẻ <input type="date"> cho phép người dùng chọn ngày từ bộ chọn lịch của trình duyệt.
Ví dụ:
<label for="birthday">Chọn ngày sinh:</label>
<input type="date" id="birthday" name="birthday">
Ứng dụng: Biểu mẫu đăng ký, đặt lịch hẹn, v.v.
2. Input nhập số – <input type="number">
Thẻ <input type="number"> chỉ cho phép nhập số và có thể giới hạn giá trị tối thiểu & tối đa.
Ví dụ:
<label for="age">Nhập tuổi:</label>
<input type="number" id="age" name="age" min="1" max="100">
Ứng dụng: Biểu mẫu đăng ký, nhập số lượng sản phẩm, nhập số điện thoại (cần thêm kiểm tra định dạng).
3. Thanh trượt chọn giá trị – <input type="range">
Thẻ <input type="range"> tạo một thanh trượt giúp người dùng chọn giá trị trong khoảng nhất định.
Ví dụ:
<label for="volume">Chọn âm lượng:</label>
<input type="range" id="volume" name="volume" min="0" max="100" step="10" value="50">
Ứng dụng: Điều chỉnh âm lượng, độ sáng, kích thước font, v.v.
4. Input chọn màu – <input type="color">
Thẻ <input type="color"> cho phép người dùng chọn màu sắc từ bảng màu của trình duyệt.
Ví dụ:
<label for="favcolor">Chọn màu yêu thích:</label>
<input type="color" id="favcolor" name="favcolor" value="#ff0000">
Ứng dụng: Chọn màu giao diện, thiết kế website, v.v.
2. So sánh các loại <input> nâng cao
| Loại input | Công dụng | Ứng dụng phổ biến |
|---|---|---|
date |
Chọn ngày từ lịch | Đăng ký, đặt lịch |
number |
Nhập số, có thể đặt min/max | Nhập tuổi, số lượng |
range |
Thanh trượt chọn giá trị | Điều chỉnh âm lượng, độ sáng |
color |
Chọn màu từ bảng màu | Thiết kế giao diện, chọn màu nền |
3. Thực hành: Tạo form đăng ký với các input nâng cao
Mã HTML hoàn chỉnh:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Form Đăng Ký</title>
</head>
<body>
<h2>Form Đăng Ký</h2>
<form>
<!-- Chọn ngày sinh -->
<label for="birthday">Ngày sinh:</label>
<input type="date" id="birthday" name="birthday"><br><br>
<!-- Nhập tuổi -->
<label for="age">Tuổi:</label>
<input type="number" id="age" name="age" min="18" max="100"><br><br>
<!-- Chọn âm lượng -->
<label for="volume">Âm lượng:</label>
<input type="range" id="volume" name="volume" min="0" max="100" step="5" value="50"><br><br>
<!-- Chọn màu yêu thích -->
<label for="favcolor">Màu yêu thích:</label>
<input type="color" id="favcolor" name="favcolor"><br><br>
<!-- Nút gửi -->
<button type="submit">Gửi</button>
</form>
</body>
</html>
Mô tả:
- Form này yêu cầu nhập ngày sinh, tuổi, chọn âm lượng và chọn màu yêu thích.
- Sử dụng các loại
<input>nâng cao giúp trực quan và dễ sử dụng hơn.
4. Kết luận
Các loại input nâng cao trong HTML5 giúp đơn giản hóa việc nhập liệu, tăng trải nghiệm người dùng và giảm thiểu lỗi nhập dữ liệu. Khi sử dụng đúng cách, chúng có thể giúp biểu mẫu của bạn trông chuyên nghiệp và dễ sử dụng hơn.
Với hơn 10 năm kinh nghiệm lập trình web và từng làm việc với nhiều framework, ngôn ngữ như PHP, JavaScript, React, jQuery, CSS, HTML, CakePHP, Laravel..., tôi hy vọng những kiến thức được chia sẻ tại đây sẽ hữu ích và thiết thực cho các bạn.
Xem thêm
Chào, tôi là Vũ. Đây là blog hướng dẫn lập trình của tôi.
Liên hệ công việc qua email dưới đây.
lhvuctu@gmail.com