Thẻ meter trong HTML
Bùi Tấn Lực - 931
- 29/09/2025
Chức năng của Thẻ meter trong HTML
Thẻ meter trong HTML dùng để làm thang đo cho một giá trị nằm trong khoảng từ min đến max hoặc thang đo cho giá trị phần trăm.
Cú pháp của Thẻ meter trong HTML
Theo mốc giá trị min, max
<meter value="giatrivalue" min="giatrimin" max="giatrimax">giatrivalue/giatrimax</meter>
giatrimin: Giá trị nhỏ nhất.
giatrimax: Giá trị lớn nhất.
giatrivalue: Giá trị hiện tại.
Theo mốc từ 0% tới 100%
<meter value="giatriphantram">phantram</meter>
phantram: Từ 0% đến 100%.
giatriphantram: Từ 0 đến 1 (Ví dụ 0.4, 0.46).
Code Thẻ meter trong HTML
<h1>Code Thẻ meter trong HTML</h1>
<label for="disk_c">Ổ đĩa C:</label>
<meter id="disk_c" value="2" min="0" max="10">2/10</meter><br>
<label for="disk_d">Ổ đĩa D:</label>
<meter id="disk_d" value="0.71">71%</meter>
<p>Chú ý: Edge 12 trở xuống không hỗ trợ thẻ meter</p>
Những lưu ý khi sử dụng thẻ meter trong HTML
Thẻ meter giúp biểu diễn một giá trị nằm trong phạm vi xác định, tuy nhiên cần sử dụng đúng mục đích để giao diện rõ ràng, dữ liệu chính xác và đảm bảo khả năng tương thích trên nhiều trình duyệt. Dưới đây là những lưu ý quan trọng khi làm việc với phần tử này.
Khi nào nên dùng thẻ meter thay vì hiển thị bằng văn bản?
Thẻ meter phù hợp khi giá trị cần thể hiện có giới hạn tối thiểu và tối đa rõ ràng. Thay vì chỉ hiển thị một con số, thanh đo trực quan sẽ giúp người dùng đánh giá mức độ nhanh hơn.
- Hiển thị dung lượng lưu trữ đã sử dụng.
- Đánh giá mức độ mạnh của mật khẩu.
- Biểu diễn điểm đánh giá sản phẩm.
- Thể hiện phần trăm pin hoặc tài nguyên còn lại.
Nếu chỉ cần hiển thị một giá trị đơn thuần mà không có khoảng giới hạn, nên sử dụng văn bản thông thường để tránh làm người đọc hiểu sai ý nghĩa.
Không sử dụng thẻ meter để biểu diễn tiến trình tải dữ liệu
Một lỗi phổ biến là dùng meter để hiển thị tiến trình tải tệp hoặc quá trình xử lý. Đây không phải mục đích thiết kế của phần tử này.
Đối với các thao tác đang diễn ra như tải dữ liệu, sao chép tệp hoặc cài đặt phần mềm, nên sử dụng phần tử progress. Điều này giúp trình duyệt và các công nghệ hỗ trợ nhận diện đúng loại thông tin đang được hiển thị.
Đảm bảo khả năng truy cập (Accessibility) cho người dùng
Thanh đo nên đi kèm nội dung mô tả rõ ràng để mọi người dùng đều hiểu ý nghĩa của giá trị đang hiển thị, kể cả khi sử dụng trình đọc màn hình.
- Thể hiện rõ nội dung đang được đo lường.
- Cung cấp giá trị cụ thể thay vì chỉ dựa vào màu sắc.
- Đặt thanh đo gần phần mô tả liên quan để dễ theo dõi.
Việc kết hợp thông tin trực quan với văn bản giúp cải thiện trải nghiệm cho tất cả người dùng.
Những lỗi thường gặp khi khai báo thuộc tính của thẻ meter
Khai báo sai các thuộc tính có thể khiến thanh đo hiển thị không chính xác hoặc không phản ánh đúng dữ liệu thực tế.
- Giá trị value nằm ngoài khoảng min và max.
- Khai báo min lớn hơn max.
- Thiếu thuộc tính value khiến thanh đo không có dữ liệu để hiển thị.
- Đặt các giá trị low, high hoặc optimum không hợp lý, làm sai ý nghĩa của mức đánh giá.
Trước khi đưa vào sử dụng, nên kiểm tra toàn bộ phạm vi giá trị và thử hiển thị trên nhiều trình duyệt để đảm bảo thanh đo hoạt động đúng như mong muốn.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thẻ meter 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 *
