وبلاگ

در زبان HTML، علاوه بر برچسب‌ها که همان تگ هستند، چیز دیگری نیز داریم که به آن صفت (Attribute) گفته می‌شود. در برخی مقالات به جای Attribute از Property نیز استفاده شده است. پیش از اینکه به نحوه عملکرد صفت‌ها بپردازیم ابتدا ساختار یک تگ را با هم مرور می‌کنیم.

تگ زوج (Paired Tag)

<tag_name> // تگ آغاز
  محتوای تگ
</tag_name> // تگ پایان

تگ فرد یا تنها (Singleton Tag)

<tag_name /> // تگ آغاز

برای آشنایی با مفهوم تگ این مقاله را بخوانید.

صفت چیست؟

صفت‌ها در زبان HTML، عباراتی هستند که باعث می‌شوند یک برچسب یا تگ، دارای خاصیت‌های مختلف و عملکردهای متنوع ویژه‌ای شود. مثل ابعاد تصاویر، واکنش یک عنصر نسبت به یک رویداد مثل کلیک، آدرس‌دهی یک لینک، تعیین محل قرارگیری و رنگ‌بندی و …

صفت چگونه تعریف می‌شود؟

در همه تگ‌ها، اعم از تگ زوج یا تگ تنها، صفت‌ها در تگ آغاز استفاده می‌شوند. به عبارتی نباید صفتی را درون تگ پایان نوشت. همچنین صفت‌ها به صورت زوج داده‌ها تعریف می‌شوند که عبارتند از کلید–مقدار. نحوه تعریف صفت‌ها به شکل کلی زیر است :

<tag_name attrib1="value1" atttrib2="value2" ...> ...

همانگونه که مشاهده می‌کنید، ابتدا نام تگ نوشته می‌شود، سپس نام صفت و بعد از هر نام صفت، مقدار مربوطه داخل دو علامت ” (Double Quote) نوشته می‌شود. (در برخی موارد خاص می‌توان به جای علامت ” درون دو کاراکتر ‘ (Quote) نیز قرار داد ولی این امر معمول نیست.) همچنین بین هر صفت با صفت دیگر یک فاصله (Space) قرار می‌گیرد.

نکته : ترتیب تعریف صفت‌ها اهمیتی ندارد. ولی بهتر است با یک روتین خاصی که برای هر برنامه‌نویس یا تیم برنامه‌نویسی متغیر است نوشته شوند. چرا که در کارهای تیمی، وجود یک روتین ثابت باعث عیب‌یابی سریع‌تر و زیبایی کدها می‌شود.

صفت‌های بدون مقدار

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

در واقع می‌توان گفت، این صفت‌ها فقط یک مقدار پیش‌فرض دارند که آن مقدار نیازی به تعریف نخواهد داشت. مثلا اگر روی یک فیلد متنی (input)، صفت disabled را تعریف کنیم، به صورت پیش‌فرض مقدار آن true خواهد بود و نیازی به تعریف مقدار وجود ندارد. (این صفت باعث غیر فعال شدن فیلد می‌گردد.)

<input disabled />

مقدار پیش‌فرض صفت‌ها

برخی از صفت‌ها دارای مقدار پیش‌فرض هستند. به این معنی که ممکن است یک صفت چند مقدار مختلف دریافت نماید ولی یکی از مقادیر به صورت پیش‌فرض است که اگر صفت تعریف نشود یا تعریف شده ولی مقداری دریافت نکند، به صورت خودکار با این مقدار پیش‌فرض مقداردهی خواهد شد. مثلا در فیلدهای متنی (تگ input)، اگر صفت type را تعریف نکنیم یا مقدار آن را خالی بگذاریم به صورت پیش‌فرض text خواهد بود.

چهار نوع تعریف زیر، فیلد متنی با نوع text را ارائه خواهند کرد :

<input type="text" />
<input type="" />
<input type />
<input />

انواع صفت‌ها

صفت‌ها به دو دسته اصلی الف) صفت‌های فراگیر یا عمومی (Global Attributes) و ب) صفت‌های اختصاصی تعریف می‌شوند. صفت‌های فراگیر در تمام تگ‌ها کارایی دارند. مثلا صفت title که باعث می‌شود با بردن نشانگر ماوس روی یک عنصر، یک کادر کوچک متنی (Tooltip) با یک توضیح ظاهر شود.

<p title="Tooltip Text">
  This paragraph has a comment.
</p>

ولی صفت‌های اختصاصی می‌توانند در برخی از تگ‌ها به صورت سفارشی به کار روند. مثلا صفت src که روی تگ‌های عکس (img) تعریف می‌شوند باعث می‌شود که آدرس یک فایل عکس فراخوانی شود. بنابراین، این صفت روی تگ دیگر مثل تگ strong هیچ کارایی ندارد.

<img src="images/car.webp" />

الف) صفت‌های Global

هرچند، این صفت‌ها روی تمامی تگ‌ها تعریف می‌شوند، اما روی برخی تگ‌ها بیشتر به کار می‌روند. مثلا صفت contenteditable روی تگ‌های div بیشتر به کار می‌رود تا تگ input که به صورت پیش‌فرض امکان تایپ دارد. همچنین برخی از این صفت‌ها روی تمامی مرورگرها قابلیت اجرا ندارند. برای آشنایی بیشتر با اینکه کدام صفت با چه نسخه‌ای از مرورگرها سازگاری دارد، اینجا را مطالعه کنید.

صفت id

برای تعریف یک شناسه یکتا روی یک عنصر و تگ مورد استفاده قرار می‌گیرد. این شناسه باعث می‌شود عنصر مربوطه از سایر تگ‌ها و عناصر صفحه وب متمایز گردد. از این صفت در CSS و دستورات اسکریپت (Javascript یا Typescript) سمت کاربر استفاده می‌شود. مقدار این صفت می‌تواند هر مقدار باشد.

<p id="paragraph1">
  محتوای پارگراف اول
</p>
<p id="paragraph2">
  محتوای پارگراف دوم
</p>

نکته : یکتا بودن مقدار، مهم‌ترین ویژگی این صفت است. بنابراین، در یک صفحه وب، هرگز از یک صفت id با مقدار یکسان برای دو یا چند تگ استفاده نکنید.

صفت class

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

<p class="paragraph">
  محتوای پارگراف اول
</p>
<p class="paragraph">
  محتوای پارگراف دوم
</p>

صفت title

این صفت باعث می‌شود با بردن ماوس روی یک عنصر صفحه وب، توضیحی به صورت Tooltip نمایش داده شود. (این صفت نباید با تگ title اشتباه گرفته شود).

صفت dir

جهت نوشتاری یک عنصر را مشخص می‌کند. (این صفت به معنای تراز نوشته (Alignment) از راست یا چپ نمی‌باشد هر چند معمولا جهت نوشتاری با ترازبندی همخوانی دارد). مقدار این صفت می‌تواند ltr برای جهت چپ به راست مثل زبان‌های لاتین، rtl برای نوشتار راست به چپ مثل زبان فارسی و عربی و auto برای تعریف خودکار بر اساس مقدار ورودی باشد.

<p dir="rtl">
  محتوای پارگراف اول
</p>
<p dir="ltr">
  Contents of Second Paragraph
</p>

صفت style

برای تعریف دستورات CSS به صورت inline مناسب است.

<p style="background: red;">
  محتوای پارگراف اول
</p>

صفت *-data

همواره با عبارت data- شروع شده و به جای *، هر عبارتی که می‌خواهیم قید می‌کنیم. برای تعریف یک صفت خاص یا داده‌های خاص روی یک تگ مورد استفاده قرار می‌گیرد. مقدار این صفت می‌تواند هر عبارتی باشد.

<p data-status="warning">
  پیام اخطار
</p>
<p data-status="congratulations">
  پیام تبریک
</p>

صفت accesskey

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

<a href="https://kelaseno.ir/attribs" accesskey="a">Attribs</a>

صفت contenteditable

این صفت اگر مقدار true دریافت کند، باعث می‌شود عناصری مانند تگ‌های div یا p قابلیت نوشتن و ویرایش اطلاعات توسط کاربر را داشته باشند.

<div contenteditable="true">
  محتوای درون این عنصر قابلیت ویرایش کردن توسط کاربر را دارد.
</div>

صفت tabindex

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

<a tabindex="1">لینک اول</a>
<a tabindex="3">لینک دوم</a>
<a tabindex="2">لینک سوم</a>

صفت hidden

باعث مخفی شدن یک عنصر از دید کاربر می‌شود. این صفت جزو صفت‌های بدون مقدار است

<p hidden>
  این پاراگراف از دید کاربر مخفی است
</p>
<p>
  این پاراگراف به کاربر نمایش داده می‌شود
</p>

صفت inert

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

<form inert>
  <input type="text" />
</form>

صفت lang

این صفت، زبان درون یک تگ محتوایی را بیان می‌کند. معمولا از این صفت برای تگ html استفاده می‌شود. برای زبان فارسی عبارت fa و برای زبان انگلیسی عبارت en قید شود.

<html lang="fa">
  ...
</html>

صفت spellcheck

معمولا در زبان انگلیسی، باعث تذکر و زیرخط‌دار شدن عباراتی است که غلط املایی در نوشتار (غلط تایپی) دارند. این صفت در فیلدهای متنی یا عناصر با صفت قابلیت نوشتاری (contenteditable) کارایی دارد. این صفت مقدار true یا false دریافت می‌کند.

<textarea spellcheck="true"></textarea>

صفت inputmode

بیشتر در موبایل‌ها و دستگاه‌های دارای صفحه‌کلیدهای مجازی مثل تبلت کارایی دارد که روی هر فیلد، چه نوع صفحه‌کلیدی فعال شود. مثلا برای فیلد تلفن فقط صفحه‌کلید عددی به همراه # و * فعال و نمایش داده شود. مقدارهایی که این صفت می‌تواند دریافت نماید عبارتند از : decimal، email، none، numeric، search، tel، text، url. در مثال زیر، فقط صفحه‌کلید اعداد نمایش داده خواهد شد.

<input inputmode="numeric" />

صفت draggable

با فعال کردن این صفت روی هر تگ، عنصر مربوطه قابلیت کشیدن و رها کردن (Drag & Drop) را خواهد داشت. این صفت همراه با دستورات Javascript کارایی دارد.

صفت enterkeyhint

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

<input type="text" enterkeyhint="GO" />

ب) صفت‌های اختصاصی

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

رویدادها

در صفحات وب، می‌توان رویدادهای مختلفی تعریف کرد. مثلا کلیک کردن روی یک دکمه می‌تواند یک رویداد (Event) تلقی شود. یا تایپ کردن درون یک فیلد متنی. برای اینکه رفتار خاصی را به هر رویداد نسبت دهیم (مثلا روی دکمه کلیک شد چه فرایندی صورت گیرد)، از دستورات اسکریپتی سمت کاربر مثل Javascript استفاده می‌کنیم که در این مقال نمی‌گنجد. اما برای اینکه برای هر تگ یک رویداد تعریف کنیم از صفت‌های رویداد استفاده می‌نماییم. این صفت‌ها با کلمه on شروع می‌شوند. مانند رویداد onclick و …

برای مطالعه بیشتر در خصوص رویدادها، این مقاله را بخوانید.