عناصر تعاملی HTML5

عناصر تعاملی HTML5

HTML5 عناصر جدیدی معرفی کرد که تعامل کاربر را بهبود می‌بخشند و نیاز به JavaScript را کاهش می‌دهند.

details و summary

تگ <details> محتوایی را ایجاد می‌کند که کاربر می‌تواند آن را باز و بسته کند. <summary> عنوان قابل کلیک را تعیین می‌کند.

<details>
  <summary>کلیک کنید</summary>
  <p>این محتوای مخفی است.</p>
</details>

ویژگی‌های details

• open — باز بودن پیش‌فرض
• با CSS استایل‌دهی می‌شود
• بدون JavaScript کار می‌کند

dialog

تگ <dialog> یک دیالوگ یا مودال ایجاد می‌کند.

<dialog id="myDialog">
  <p>این یک دیالوگ است</p>
  <button>بستن</button>
</dialog>
<button>نمایش</button>

ویژگی‌های dialog

• show() — نمایش دیالوگ
• showModal() — نمایش به عنوان مودال
• close() — بستن دیالوگ
• open — باز بودن دیالوگ

progress

تگ <progress> نوار پیشرفت نمایش می‌دهد.

<progress value="70" max="100">70%</progress>

ویژگی‌های progress

• value — مقدار فعلی
• max — مقدار حداکثر
• بدون value: نوار پیشرفت نامشخص (indeterminate)

meter

تگ <meter> یک مقدار در یک بازه را نمایش می‌دهد (مثل باتری، دما و...).

<meter value="0.7" min="0" max="1" low="0.3" high="0.7" optimum="0.5">70%</meter>

ویژگی‌های meter

• value — مقدار فعلی
• min — حداقل
• max — حداکثر
• low — حد پایین
• high — حد بالا
• optimum — مقدار بهینه

mark

تگ <mark> متن را هایلایت می‌کند.

<p>این یک <mark>متن هایلایت شده</mark> است.</p>

time

تگ <time> زمان یا تاریخ را مشخص می‌کند.

<p>تاریخ: <time datetime="2024-01-01">۱ ژانویه ۲۰۲۴</time></p>
<p>ساعت: <time datetime="14:30">۲:۳۰ عصر</time></p>

ویژگی‌های time

• datetime — مقدار زمان قابل خواندن توسط ماشین
• pubdate — تاریخ انتشار (قدیمی)

output

تگ <output> نتیجه یک محاسبه را نمایش می‌دهد.

<form>
  <input type="number" id="a" value="10"> +
  <input type="number" id="b" value="20"> =
  <output name="result" for="a b">30</output>
</form>

contenteditable

ویژگی contenteditable اجازه ویرایش مستقیم محتوا را می‌دهد.

<div contenteditable="true">این متن قابل ویرایش است</div>

draggable

ویژگی draggable اجازه drag & drop را می‌دهد.

<div draggable="true">این قابل کشیدن است</div>

بهترین شیوه‌ها

• Accessibility: از ARIA attributes استفاده کنید
• Fallback: محتوای جایگزین برای مرورگرهای قدیمی
• Keyboard: دسترسی با کیبورد را فراموش نکنید
• Mobile: برای لمس بهینه‌سازی کنید
• Performance: از انیمیشن‌های سنگین خودداری کنید

نکات مهم

• dialog در همه مرورگرها پشتیبانی نمی‌شود
• progress و meter با CSS قابل استایل‌دهی هستند
• details/summary در همه مرورگرها کار می‌کنند
• contenteditable امنیت را به خطر می‌اندازد
• time برای SEO و Calendar apps مفید است