حالت آفلاین — محتوا از حافظهٔ کش نمایش داده می‌شود
HTML از صفر؛ ساخت وب‌سایت

نشان‌دادن مقدار؛ progress، meter و output

۷. امکانات تکمیلی، فراداده و انتشار · 0٪

برای ذخیره پیشرفت و استفاده از دستیار وارد شوید.

درصد پیشرفت با اندازه‌گیری فرق دارد

progress پیشرفت یک کار را نشان می‌دهد. اگر value را حذف کنی، پیشرفت نامعلوم است. meter یک مقدار در بازهٔ معلوم، مثل ظرفیت پرشده، را نشان می‌دهد و برای پیشرفت یک کار نیست. output نتیجهٔ محاسبه یا عمل را مشخص می‌کند؛ خودش محاسبه انجام نمی‌دهد.

<label for="upload-progress">پیشرفت بارگذاری</label>
<progress id="upload-progress" value="40" max="100">۴۰٪</progress>
<label for="capacity">ظرفیت پرشده</label>
<meter id="capacity" min="0" max="20" value="12">۱۲ از ۲۰</meter>
<form>
  <label for="a">عدد اول</label>
  <input id="a" name="a" type="number" value="2">
  <label for="b">عدد دوم</label>
  <input id="b" name="b" type="number" value="3">
  <p>نتیجهٔ نمونه: <output name="result" for="a b">5</output></p>
</form>

در این نمونه عدد 5 ثابت است؛ عوض‌کردن ورودی‌ها آن را خودکار تغییر نمی‌دهد. برای به‌روزرسانی نتیجه باید رفتار محاسبه را با JavaScript اضافه کنی. for روی output شناسهٔ ورودی‌های مرتبط را معرفی می‌کند.

meter می‌تواند low، high و optimum داشته باشد؛ فقط وقتی معنای بازه و مقدار مطلوب روشن است از آن‌ها استفاده کن. همواره یک نام و توضیح قابل‌فهم و در صورت نیاز مقدار متنی ارائه بده.

تمرین دستی: مقدار progress را تغییر بده و بعد value را حذف کن. تفاوت پیشرفت معلوم و نامعلوم را ببین.