آموزش HTML به زبان ساده – قسمت سوم

آموزش HTML به ساده ترین زبان

اگر مقالات سری آموزش HTML رایگان را مطالعه کرده باشید، حتما می‌دانید که ما در انتهای مقاله قبلی به طور کامل به بررسی تک <input> پرداختیم و بعد از آن قصد داشتیم وارد تگ <label> و فرم‌ها شویم. اکنون قصد داریم تا در رابطه با تگ <label> و کاربرد آن صحبت کنیم.

استفاده از این تگ بسیار ساده است و کاربرد آن هم جهت ایجاد یک نام برای <input> می‌باشد.

<form action="/action_page.php">
    <label for="male">Male</label>
    <input type="radio" name="gender" id="male" value="male"><br>
    <label for="female">Female</label>
    <input type="radio" name="gender" id="female" value="female"><br>
    <label for="other">Other</label>
    <input type="radio" name="gender" id="other" value="other"><br><br>
    <input type="submit" value="Submit">
</form> 

در این نمونه، همانطور که مشاهده می‌کنید برای هر input یک label مخصوص تعریف شده است. برای ایجاد ارتباط بین یک label و یک input، از for در label و آی دی در input استفاده می‌کنیم. در واقع برای ایجاد ارتباط بین این دو باید مقدار ویژگی for در label برابر با مقدار آی دی در input باشد.

برای تمامی انواع تگ <input> می‌توانید از تگ <label> استفاده کنید. استفاده از این تگ به همین سادگی که مشاهده کردید می‌باشد. اکنون که این تگ را نیز بررسی کردیم. به نحوه استفاده از فرم ها و ویژگی‌هایی که تگ فرم دارد، می‌پردازیم.

فرم‌ها <form> در آموزش HTML رایگان

تگ فرم‌ همانطور که از اسم آن پیداست، برای طراحی فرم در یک صفحه استفاده می‌شود. استفاده از این تگ نیز ساده است و بسیار کاربردی. در پایین یک نمونه استفاده از این تگ را مشاهده می‌کنید.

<form action="/action_page.php" method="post">
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Last name:</label>
    <input type="text" id="lname" name="lname"><br><br>
    <input type="submit" value="Submit">
</form> 

در اینجا ما یک فرم داریم که شامل ۲ ورودی و یک گزینه ثبت می‌باشد. دو جز اصلی یک فرم یک action و دیگری نوع متد آن می‌باشد. اکشن (action) در واقع آدرسی می‌باشد که اطلاعات فرم مورد نظر پس از ثبت به آن فرستاده می‌شود. (ارسال به سمت سرور و دریافت آن)

در این قسمت شما آدرس url ای را وارد می‌کنید که در سمت سرور تعریف کرده اید و زمانی می‌توانید آن را تست کنید که سمت سرور برای سایت نیز داشته باشید. (زمانی که صرفا به عنوان تست در فرانت کد نویسی می‌کنید، ممکن است که سمت سرور نداشته باشید)

کاربرد متد get در آموزش HTML رایگان

در مورد متد، ما دو نوع اصلی تحت عنوان get و post داریم. متد get در واقع برای گرفتن اطلاعات می‌باشد. شما بدین وسیله، اطلاعاتی را در داخل سرور ثبت نمی‌کنید و تنها دارید اطلاعاتی از سرور دریافت می‌کنید.

متد post برای ارسال اطلاعات می‌باشد و زمانی که شما از این متد استفاده می‌کنید برای فرم مورد نظرتان باید یک توکن نیز تعریف کنید که در جنگو (یک فریمورک برای سمت بک طراحی وب) به صورت {%csrf_token%} نیز تعریف کنید.

در واقع این توکن یک شناسه برای ارسال اطلاعات شما می‌باشد. به دلیل اینکه شما قصد دارید تا اطلاعاتی را به سرور بفرستید و در آن ثبت کنید، نیاز است تا حتما توکنی نیز همراه آن برای امنیت ارسال شود. برای متد get به دلیل دریافت اطلاعات، نیازی به توکن نمی‌باشد.

اکثر فرم‌هایی که با آن سر و کار دارید، احتمالا از نوع post باشند، اما به این نکته توجه کنید که بهتر است، در متدهایی که شما قصد دریافت اطلاعات دارید، حتما نوع متد را get قرار دهید.

دو ویژگی‌ای که گفته شد، دو ویژگی اصلی و لازم برای هر فرم می‌باشد. ویژگی‌های دیگری نیز یک تگ <form می‌تواند داشته باشد که به آن‌ها در اینجا خواهیم پرداخت.

” به این نکته توجه کنید که برای ثبت اطلاعات در یک فرم، باید آن فرم حتما دارای یک دکمه از نوع submit داشته باشد، این دکمه می‌تواند با تگ button تعریف شود و یا با تگ input ولی مهم است که نوع آن submit باشد. “

ویژگی target

ویژگی بعدی، target می‌باشد. این ویژگی را در لینک‌ها ( تگ <a> ) نیز مشاهده کرده بودید. این ویژگی در اینجا برای این می‌باشد که شما با استفاده از آن مشخص کنید که پس از ثبت فرم، صفحه لود شود و یا صفحه دیگری باز شود. به دلیل آنکه در بخش لینک‌ها به بررسی آن پرداختیم، در اینجا تنها نمونه‌ای از آن را قرار می‌دهیم.

در این نمونه، پس از ثبت فرم، صفحه جدیدی باز می‌شود. این صفحه با توجه به تعریفی که در کد‌های قسمت بک تعریف شده است، صورت می‌گیرد. شما می‌توانید با استفاده از ajax ویا جاوا اسکریپت، بدون لود صفحه و یا باز شدن صفحه دیگر، اطلاعات فرم را ثبت کنید و به کاربر اطلاع دهید. در این رابطه در مقالات دیگری به طور کامل صحبت خواهیم کرد.

<form action="/action_page.php" method="get" target="_blank">
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Last name:</label>
    <input type="text" id="lname" name="lname"><br><br>
    <input type="submit" value="Submit">
</form>

ویژگی name

ویژگی بعدی، name می‌باشد. با استفاده از این ویژگی شما می‌توانید با استفاده از جاوا اسکریپت، مقادیر فرم را بگیرید و یا مشخص کنید که آیا این فرم ثبت شود یا خیر. در این مثال شما مواردی مثل تابع و متد onclick() را مشاهده می‌کنید.

در حال حاضر در اینجا امکان صحبت در رابطه با این تابع و متد onclick() نیست، اما برای درک بهتر کد زیر، این متد بدین شکل می‌باشد که وقتی بر روی دکمه مورد نظر کلیک کنید، تابعی که اسم آن آمده است، از قسمت جاوا اسکریپت فراخوانده می‌شود و کد‌های داخل آن اجرا می‌شود.

همانطور که در مثال مشاهده می‌کنید، به جای وجود نوع submit از نوع button استفاده شده است و یک تابع فراخوانی شده است.

<!DOCTYPE html>
<html>
<head>
<script>
function formSubmit() {
    document.forms["myForm"].submit();
}
</script>
</head>
<body>

<h1>The form name attribute</h1>

<form name="myForm" action="/action_page.php" method="get">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="button" onclick="formSubmit()" value="Send form data!">
</form>

</body>
</html>

ویژگی enctype

ویژگی بعدی enctype می‌باشد. این ویژگی برای مشخص کردن نحوه ارسال فرم به سرور می‌باشد. این ویژگی سه حالت مختلف دارد که شامل موارد زیر می‌باشند:

• text/plain
• multipart/form-data
• application/x-www-form-urlencoded (حالت پیش‌فرض)

در حالت اول برای ارسال یک متن می‌باشد، در این حالت در صورتی که در فرم کاراکترهای خاصی وجود داشته باشد، آن‌ها را نمی‌تواند اصطلاحا رمزگذاری (encode) کند.

در حالت دوم، برای مواقعی مورد استفاده قرار می‌گیرد که شما یک فایل را قصد داشته باشید تا به سرور ارسال نمایید. در این حالت باید ویژگی enctype مقدار multipart/form-data را داشته باشد. حالت سوم نیز که پیش‌فرض این ویژگی می‌باشد، تمامی کاراکترها را رمزگذاری می‌کند.

<form action="/action_page_binary.asp" method="post" enctype="multipart/form-data">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
</form>

در صورتی که فایلی برای ارسال کردن ندارید، نیازی به استفاده از این ویژگی و تغییر آن ندارید.

تگ <form>

ویژگی بعدی که آخرین ویژگی در تگ <form> می‌باشد را قبلا نیز با آن آشنا شدید، این ویژگی autocomplete می‌باشد. نحوه استفاده از آن نیز مشابه آنچه در قبل گفته شد می‌باشد. در اینجا، در صورتی on بودن این ویژگی، تمامی اطلاعات داخل فرم می‌تواند به صورت خودکار با استفاده از اطلاعات قبلی پر گردد.

<form action="/action_page.php" method="get" autocomplete="on">
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="email">Email:</label>
    <input type="text" id="email" name="email"><br><br>
    <input type="submit">
</form> 

ویژگی‌های تگ <input> در آموزش HTML رایگان

خب اکنون با تگ فرم و ویژگی‌های آن آشنا شدید. اکنون قصد داریم تا چند تگ دیگر را که در فرم‌ها نیز مورد استفاده قرار می‌گیرد را بررسی کنیم. اولین مورد، تگ <select> می‌باشد. در بررسی ویژگی‌های تگ <input> در یک مورد، ما می‌توانستیم یک لیست را به کاربر نمایش دهیم و کاربر امکان انتخاب یکی از موارد لیست را داشت.

موردی که گفته شد، فقط در داخل یک تگ <input> قرار داشت، اکنون اگر قصد داشته باشیم تا یک لیست داشته باشیم که به صورت کشویی باز شود و کاربرد امکان انتخاب یکی از آن یا چند مورد را داشته باشید به چه صورت باید عمل کرد؟ در اینجا از تگ <select> باید استفاده کنیم. نحوه نوشتن یک لیست با این تگ به صورت زیر می‌باشد: ( همانطور که مشاهده می‌کنید، برای این تگ نیز می‌توان از تگ <label> استفاده نمود.)

<label for="cars">Choose a car:</label>

<select id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select> 

در این مثال ما یک لیست خواهیم داشت که در آن، اسامی ماشین‌های مختلف نمایش داده شده است و کاربر یکی از این موارد را می‌تواند انتخاب کند. قبل از بررسی ویژگی‌های این تگ جالب است بدانید که ویژگی‌های این تگ بسیار شبیه به ویژگی‌های تگ <input> می‌باشد. این تگ ویژگی‌های زیر را دارد:

• autofocus (در مرورگر موزیلا پشتیبانی نمی‌شود)
• disabled
• form
• multiple
• name
• required
• size

حالت multiple

تمامی موارد همچون تگ <input> می‌باشد. حالت multiple در اینجا برای انتخاب چند مورد از لیست مورد استفاده قرار می‌گیرد و size نیز، تعداد گزینه‌های قابل نمایش برای کاربر می‌باشد. بدین معنا که اگر یک لیستی ۱۰۰ مقدار داشت، اگر محدودیتی برای نمایش تعریف نشود، تمامی ۱۰۰ لیست را با هم نمایش می‌دهد که نمای بدی برای کاربر به وجود می‌آورد.

شما با استفاده از این ویژگی می‌توانید در نمایش تعداد لیست محدودیت ایجاد کنید و کاربر با استفاده از اسکرول در لیست، بقیه مقادیر را مشاهده کند. در کدهای زیر نمونه‌ای از استفاده از ویژگی‌های مختلف را می‌توانید مشاهده می‌کنید.

” در حالت استفاده از ویژگی multiple توجه کنید که برای انتخاب چند مورد از لیست در ویندوز باید کلید crtl و در مک کلید کامند را همزمان نگه دارید. “

نمونه multiple

<label for="cars">Choose a car:</label>

<select id="cars" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select> 

نمونه size:

<label for="cars">Choose a car:</label>

<select id="cars" size="2">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="opel">BMW</option>
  <option value="opel">Tesla</option>
  
</select>

نمونه disabled:

<label for="cars">Choose a car:</label>

<select id="cars" disabled>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

نمونه name و استفاده در form

<form action="/action_page.php">
    <label for="cars">Choose a car:</label>
    <select id="cars" name="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select>
    <input type="submit">
</form>

استفاده از name برای ارسال اطلاعات به سمت سرور و دریافت آن در سمت سرور و همچنین برای دسترسی به تگ مقدار تگ <select> با استفاده از جاوا اسکریپت می‌باشد.

مقداری (value) در آموزش HTML رایگان

” مقداری (value) که هر یک از گزینه‌ها در این تگ دارند، جهت ارسال به سمت سرور مورد استفاده قرار می‌گیرد. به همین خاطر این امکان وجود دارد تا مقدار value با عبارت نمایش داده شده برای کاربر جهت انتخاب متفاوت باشد و این مساله کاملا طبیعی می‌باشد. “

تگ <textarea>

تگ بعدی مورد بررسی تگ <textarea> می‌باشد. این تگ مشابه تگ <input> در نوع text می‌باشد، اما تفاوت‌هایی نیز با یکدیگر دارند. استفاده از این تگ به صورت زیر می‌باشد: همانطور که مشاهده می‌کنید، این تگ نیز تگ <label> می‌تواند دریافت کند.

<label for="w3mission">maktabkhooneh:</label>

<textarea id="w3mission" 
At maktabkhooneh.org/mag you will learn how to make a website.
</textarea>

از جمله ویژگی‌های این تگ، امکان تغییر سایز آن توسط کاربر در صفحه می‌باشد. ویژگی‌هایی که این تگ می‌تواند داشته باشد، موارد زیر می‌باشد:

تعریف	ویژگی
همانند ویژگی autofocus در تگ‌های قبلی که گفته شده عمل می‌کند.	autofocus
برای تعیین کردن تعداد ستون‌های تگ می‌باشد. (مشابه دادن عرض به تگ)	cols
عملکرد آن مشابه عملکرد این ویژگی در تگ <input> می‌باشد.	dirname
همانند سری‌های قبل، تگ مورد نظر را از جهت نوشتن غیر فعال می‌کند.	disabled
همانند تعریف آن در تگ‌های قبلی که صحبت شد.	form
برای تعیین حداکثر تعداد کاراکتر قابل نوشتن در تگ	maxlength
همانند تگ‌های قبلی گفته شده	name
برای نمایش عبارتی بر روی تگ به عنوان نوعی راهنما	placeholder
تنها امکان خواندن عبارت می‌باشد و نمی‌توان در آن چیزی نوشت. تفاوت آن با حالت disabled نوع نمایش آن در صفحه می‌باشد.	readonly
پر کردن آن ضروری می‌باشد.	required
برای مشخص کردن تعداد سطر‌های آن. (مشابه دادن ارتفاع به تگ)	rows

ویژگی rows و cols

در موارد گفته شده تنها دو ویژگی rows و cols جدید می‌باشند که در مثال زیر کاربرد این دو ویژگی را نیز خواهید دید:

<textarea rows="4" cols="50">
    At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.
</textarea>

در اینجا برای تگ <textarea> به اندازه ۴ خط در صفحه نمایش داده می‌شود. ویژگی cols نیز، یک عدد می باشد و با مقداری که عرض دریافت می‌کند متفاوت است و بر اساس میانگینی از میزان عرض کاراکترها می‌باشد. در حالت پیش‌فرض این عدد ۲۰ می‌باشد. برای تعداد خطوط یعنی rows نیز در حالت پیش‌فرض ۲ می‌باشد. چند نمونه از استفاده از ویژگی‌های مختلف در این تگ را با هم مشاهده می‌کنیم:

استفاده از ویژگی maxlenght

<textarea maxlength="50">
    Enter text here...
</textarea> 

استفاده از ویژگی placeholder

<textarea placeholder="Describe yourself here..."></textarea>

استفاده از ویژگی readonly

<textarea readonly>
    At maktabkhooneh.org/mag you will learn how to make a website. We offer free tutorials in all web development technologies.
</textarea> 

استفاده از ویژگی disabled:

<textarea disabled>
    At maktabkhooneh.org/mag you will learn how to make a website. We offer free tutorials in all web development technologies.
</textarea> 

” از این تگ در فرم‌ها نیز می‌توانید استفاده کنید. “

استفاده از این تگ در فرم

<form action="/action_page.php" id="usrform">
    Name: <input type="text" name="usrname">
    <input type="submit">
        <textarea name="comment" form="usrform">Enter text here...</textarea> 
</form>

” شما می‌توانید چندین ویژگی را با یکدیگر استفاده کنید، به شرط اینکه ویژگی‌ها با یکدیگر تضاد نداشته باشند.”

تگ <fieldset>

ویژگی بعدی در داخل فرم استفاده می‌شود و به نوعی یک مجموعه از تمامی ورودی‌های یک فرم می‌توانید ایجاد کنید. این تگ <fieldset> نام دارد. نحوه استفاده از این تگ به صورت زیر می‌باشد:

<form action="/action_page.php">
    <fieldset>
      <legend>Personalia:</legend>
      <label for="fname">First name:</label>
      <input type="text" id="fname" name="fname"><br><br>
      <label for="lname">Last name:</label>
      <input type="text" id="lname" name="lname"><br><br>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email"><br><br>
      <label for="birthday">Birthday:</label>
      <input type="date" id="birthday" name="birthday"><br><br>
      <input type="submit" value="Submit">
    </fieldset>
</form> 

تگ <legend>

این تگ یک فضای مشخص برای فیلدهای فرم در صفحه ایجاد می‌کند. همانطور که در کد مشاهده می‌کنید، تگ <legend> در داخل این تگ تعریف شده است. این تگ در واقع به عنوان تیتری برای فضای فرم مورد نظر استفاده می‌شود.

تگ <fieldset> دارای ۳ ویژگی می‌باشد:

• disabled
• form
• name

ویژگی اول موجب می‌شود تا تمامی تگ‌های داخل این تگ، غیر فعال شوند.

ویژگی دوم که form می‌باشد، عملکردی مشابه با عملکرد این ویژگی در تگ <input> و <button> دارد.

ویژگی سوم نیز که یک name به این تگ می‌دهد و با استفاده از آن می‌توان اطلاعات آن را در سمت سرور دریافت کرد و همچنین به عنوان یک روشی برای گرفتن اطلاعات آن با استفاده از جاوا اسکریپت نیز می‌باشد. نمونه استفاده از این سه ویژگی را در نمونه‌های زیر می‌توانید مشاهده کنید:

استفاده از ویژگی disabled در آموزش HTML رایگان

<form action="/action_page.php">
    <fieldset disabled>
      <legend>Personalia:</legend>
      <label for="fname">First name:</label>
      <input type="text" id="fname" name="fname"><br><br>
      <label for="lname">Last name:</label>
      <input type="text" id="lname" name="lname"><br><br>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email"><br><br>
      <label for="birthday">Birthday:</label>
      <input type="date" id="birthday" name="birthday"><br><br>
      <input type="submit" value="Submit">
    </fieldset>
</form> 

استفاده از ویژگی form 

<form action="/action_page.php" method="get" id="form1">
    <label for="favcolor">What is your favorite color?</label>
    <input type="text" id="favcolor" name="favcolor">
    <input type="submit">
</form>
  
<fieldset form="form1">
    <legend>Personalia:</legend>
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname" form="form1"><br><br>
    <label for="lname">Last name:</label>
    <input type="text" id="lname" name="lname" form="form1">
</fieldset> 

همانطور که مشاهده می‌کنید، در کنار تگ‌های داخ فرم، می‌توان یک تگ <fieldset> با تگ‌های آن را به فرم اضافه کرد. “دقت کنید که برای هر یک از تگ‌های داخل تگ <fieldset> در این حالت، نیاز است که به صورت جداگانه، ویژگی form را تعریف کنید. “

استفاده از ویژگی name در آموزش HTML رایگان

<form action="/action_page.php" method="get">
    <fieldset name="personalia">
      <label for="fname">First name:</label>
      <input type="text" id="fname" name="fname">
    </fieldset>
    <br>
    <input type="submit">
</form> 

تگ <optgroup>

تگ بعدی مورد بررسی، تگ <optgroup> می‌باشد. این تگ برای دسته بندی، لیست‌ها در یک تگ <select> کاربرد دارد. به نمونه زیر توجه کنید:

<label for="cars">Choose a car:</label>
<select id="cars">
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

در اینجا شما دو دسته ماشین‌های آلمانی و ماشین‌های سوئدی دارید. با استفاده از این تگ، این دو بخش از یکدیگر مجزا شدند ولی کماکان در داخل لیست می‌باشند. این تگ نیز می‌تواند تگ <label> داشته باشد و تنها ویژگی آن نیز، disabled می‌باشد. با استفاده از این ویژگی می‌توانید تمامی مقادیر لیست داخل این تگ را غیر فعال کنید.

تگ <output>

تگ بعدی، تگ <output> می‌باشد. این تگ همانطور که اسمش پیداست، خروجی یک عملیات را به ما می‌دهد. مثال زیر را توجه کنید:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
    <input type="range" id="a" value="50">100
    +<input type="number" id="b" value="50">
    =<output name="x" for="a b"></output>
</form> 

در اینجا یک ویژگی جدید به تگ فرم اضافه شده است که در واقع ویژگی خود فرم نمی‌باشد و ناشی از تگ <output> می‌باشد. در این ویژگی یک عملیات تعریف شده است و آن این می‌باشد که مقادیر تگ با آی دی a و تگ با آی دی b را دریافت می‌کند و آن را تبدیل به عدد می‌کند (مقادیر در ابتدا به صورت رشته می‌باشند) سپس دو مقدار مورد نظر را با یکدیگر جمع می‌کند.

ویژگی for در آموزش HTML رایگان

در تگ <output> دو مقدار مورد نظر در داخل ویژگی for مشخص شده است و در هر بار که مقادیر a و b تغییر می‌کنند، حاصل جمع آن‌ها در تگ <output> نمایش داده می‌شود. در واقع این ویژگی برای به وجود آوردن نوعی ارتباط بین تگ‌های داخل فرم می‌باشد. این تگ نیز دارای ویژگی name می‌باشد که هنگام ارسال به سمت سرور، با استفاده از name آن، می‌توان مقدارش را دریافت کرد.

این تگ سه ویژگی زیر را دارد:

• for
• form
• name

که هر سه ویژگی تماما مشابه تگ <input> می‌باشد با این تفاوت که ویژگی for به جای اختصاص پیدا کردن به یک تگ <label> مخصوص، تگ‌هایی که به عنوان ورودی مقادیر تگ <output> می‌باشند، اختصاص پیدا می‌کنند.

تگ <meter>

این مقاله را بررسی دو تگ دیگر به پایان می‌رسانیم. تگ اول، تگ <meter> می‌باشد. این تگ در واقع برای نمایش، درصد پیشرفت و یا نمایش مقداری به صورت یک progress bar می‌باشد. این تگ نیز می‌تواند تگ <label> دریافت کند.

<label for="disk_c">Disk usage C:</label>
<meter id="disk_c" value="2" min="0" max="10">2 out of 10</meter><br>

<label for="disk_d">Disk usage D:</label>
<meter id="disk_d" value="0.6">60%</meter>

در این مثال شما میزان فضای پر شده از هر دیسک را به صورت یک نمای گرافیکی و تصویری مشاهده می‌کنید. این تگ دارای ۷ ویژگی می‌باشد که در نمونه بالا ۳ ویژگی آن را مشاهده می‌کنید. این ویژگی شامل موارد زیر می‌باشند:

تعریف	ویژگی
همانند تگ‌های قبلی، برای اختصاص دادن به یک فرم خاص مورد استفاده قرار می‌گیرد.	form
بالاترین مقدار در تگ مورد نظر	high
پایین ترین مقدار در تگ مورد نظر	low
برای تعیین حداکثر مقداری که می‌تواند بگیرد. با استفاده از این ویژگی می‌توان به نوعی بازه خاصی برای نمایش تعیین کرد. در حالت پیش‌فرض ۱۰۰ می‌باشد.	max
برای تعیین حداکثر مقداری که می‌تواند بگیرد. با استفاده از این ویژگی می‌توان به نوعی بازه خاصی برای نمایش تعیین کرد. در حالت پیش‌فرض ۰ می‌باشد.	min
بازه‌ای برای تگ مشخص می‌کند که مقدار تگ به عنوان مقدار بهینه می‌باشد.	optimum
مقدار برای تگ مورد نظر	value

” با استفاده از جاوا اسکریپت و تغییر مقدار value این تگ می‌توان شکل داینامیک به نحوه نمایش این تگ داد.”

انواع مختلف ویژگی‌ها را در مثال‌های زیر می‌توانید مشاهده کنید:

<p><label for="anna">Anna's score:</label>
    <meter id="anna" min="0" low="40" high="90" max="100" value="95"></meter></p>
    
    <p><label for="peter">Peter's score:</label>
    <meter id="peter" min="0" low="40" high="90" max="100" value="65"></meter></p>
    
    <p><label for="linda">Linda's score:</label>
    <meter id="linda" min="0" low="40" high="90" max="100" value="35"></meter></p> 

برای ویژگی optimum

<p><label for="yinyang">Yin Yang:</label>
    <meter id="yinyang" value="0.3" high="0.9" low="0.1" optimum="0.5"></meter></p> 

برای ویژگی form

<form action="/action_page.php" method="get" id="form1">
    First name: <input type="text" name="fname"><br>
    <input type="submit" value="Submit">
  </form>
  
  <p><label for="anna">Anna's score:</label>
  <meter id="anna" form="form1" name="anna" min="0" low="40" high="90" max="100" value="95"></meter></p> 

تگ <progress>

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

<label for="file">Downloading progress:</label>
<progress id="file" value="32" max="100"> 32% </progress>

این تگ تنها دو ویژگی max و value را دریافت می‌کند. ویژگی value که مقدار را در آن نشان می‌دهد و ویژگی max نیز حداکثر مقدار آن را تعیین می‌کند. در حالت پیش‌فرض این مقدار ۱ می‌باشد. این تگ نیز می‌تواند تگ <label> دریافت کند. از این تگ برای نشان دادن درصد پیشرفت عمدتا استفاده می‌شود.

” با استفاده از جاوا اسکریپت و تغییر مقدار value این تگ می‌توان شکل داینامیک به نحوه نمایش این تگ داد.”

در این مقاله نیز با تگ‌های دیگری همچون فرم آشنا شدیم. در مقاله بعد با کلاس و آی دی و طریقه نمایش یک ویدئو در داخل صفحه آشنا می‌شویم.