معرفی و کاربرد تگ progress در HTML | درصد پیشرفت

در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی به معرفی و کاربرد تگ <progress> در HTML می پردازیم.

تگ <progress> در اچ تی ام ال

معرفی و کاربرد تگ progress در HTML | درصد پیشرفت - سایت آموزی

از تگ <progress> برای ایجاد نمودار درصد پیشرفت استفاده می شود، به عنوان مثال از تگ <progress> می توانید برای نمایش درصد تمام شده از یک پروژه، کار یا درصد راندمان و …  استفاده لازم را به عمل آوردید.

پس دانستیم استفاده از تگ <progress> در سند HTML برای نشان دادن پیشرفت یک پروسه یا کار است.

تگ <progress> دو خاصیت value و max میگیرد، در خاصیت max در مقدار ماکزیمم عدد قرار میگرد، و در مقدار value هر عددی قرار بگیرد نسبت به مقدار max محاسبه و به همان اندازه نمودار پر می شود.

نکات مهم در مورد تگ <progress> در سند HTML

نکته ۱ :

از تگ <progress> به کمک دستورات زبان JavaScript برای نمایش پیشرفت کار استفاده می کنیم.

نکته ۲ : 

از تگ <progress> برای نمایش دادن اندازه یا مقیاس استفاده نکنید (به عنوان مثال فضای دیسک استفاده شده و یا ارتباط از نتیجه پرس و جو و… ). برای این کار بهتر است از تگ meter در سند HTML استفاده کنید.

مثال در مورد تگ <progressدر اچ تی ام ال

[html]<progress value=”22″ max=”100″></progress>[/html]

بررسی تگ <progress> در HTML 4.01 و HTML5

تگ <progress> یک تگ جدید در HTML5 است. در حالی که در HTML4.01 و نسخه های قدیمی تر وجود نداشته است..

خصوصیات ویژه تگ <progress> در HTML5

ویژگی های عمومی تگ <progress> در HTML

تگ <progress> از کلیه ویژگی های عمومی در سند HTML پشتیبانی می کند.

رویدادهای عمومی تگ <progress> در HTML

تگ <progress> از کلیه رویدادهای عمومی در سند HTML پشتیبانی می کند.

پشتیبانی مرورگرها از تگ <progress> در اچ تی ام ال

در زیر مرورگرهای معتبر اینترنتی از اولین نسخه هایی که از تگ <progress> پشتیبانی می کنند، آمده است:

جهت دیدن تمام ردیف و ستون ها در حالت موبایلی جدول را به چپ و راست اسکرول کنید.

برای متخصص شدن در طراحی سایت فروشگاهی با وردپرس روی لینک زیر کلیک کن و تو دوره ثبت نام کن:

دوره فوق حرفه ای طراحی سایت فروشگاهی با وردپرس پروژه محور

برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:

دوره فوق حرفه ای طراحی سایت با HTML5 و CSS3 پروژه محور

پیوندهای مهم و کاربردی

تگ های HTML در سایت آموزی

تگ های جدید HTML5 در سایت آموزی

صفات تگ های HTML در سایت آموزی

تگ های منسوخ شده HTML5 در سایت آموزی

تگ های block level و inline level در سایت آموزی

تگ های HTML در W3school

ویژگی های CSS در سایت آموزی

ویژگی های CSS در W3schools

معرفی و کاربرد تگ progress در HTML | درصد پیشرفت – اختصاصی سایت آموزی