مقدمه
عناصر تعاملی (interactive) در HTML عناصری هستند که می‌توانند به رفتار کاربران واکنش نشان
دهند. تعداد این عناصر زیاد نیست و به همین دلیل است که این فصل تنها از یک درس تشکیل شده
است. کار را با بررسی عنصر details و یک عنصر مربوط به آن با نام summary شروع می‌کنیم که
می‌توانند یک ویجت تعاملی ایجاد کنند که با سوئیچ بین دو وضعیت باز و بسته، جزئیاتی را
آشکار و مخفی کند. سپس عنصری با نام dialog را معرفی می‌کنیم که برای ایجاد کادرهای
محاوره‌ای کاربرد دارد. و در پایان نیز با عنصر menu به عنوان یک آلترناتیو معنایی
(semantic) برای عنصر ul آشنا می‌شویم.
ایجاد یک ویجت اینتراکتیو با عناصر details و summary
از عنصر details برای ایجاد یک ویجت تعاملی (interactive widget) استفاده می‌شود که در هر
لحظه می‌تواند در یکی از دو حالت باز یا بسته باشد و باز بودن آن به معنای نمایش اطلاعات و
بسته بودنش به معنای مخفی کردن اطلاعات است. یک ویجت از نوع details در صفحه معمولاً به
همراه یک مثلث کوچک و متنی در کنار آن نمایش داده می‌شود که این متن حکم برچسب یا خلاصه‌ای
از اطلاعات درون ویجت را برای این عنصر دارد و با استفاده از عنصری به نام summary ایجاد
می‌شود که درون عنصر details قرار می‌گیرد. با کلیک روی مثلث یا برچسب ویجت، حالت ویجت بین
باز
و بسته تغییر می‌کند.
HTML
<details>
<summary>Summary</summary>
Something small enough to escape casual notice.
</details>
در حقیقت، جفت عناصر details و summary می‌توانند در ترکیب با یکدیگر،
ویجتی را ایجاد کنند
که در حالت پیش‌فرض (بسته بودن) تنها خلاصه‌ای از اطلاعات مورد نظر (summary) را نمایش
می‌دهد اما با تبدیل حالت آن به باز، جزئیات اطلاعات (details) را نمایش می‌دهد. به عبارت
دیگر، یک چنین ویجتی خلاصه‌ای از اطلاعاتش را نمایش می‌دهد و با نمایش یک مثلث در کنار این
اطلاعات، به کاربران اعلام می‌کند که اگر اطلاعات بیشتری در این مورد می خواهند، روی آن
کلیک کنند.
یک ویجت details در حالت پیش‌فرض روی حالت بسته قرار دارد و لذا تنها چیزی که نمایش می‌دهد،
مثلث و متن برچسبی است که درون عنصر summary قرار دارد. وقتی کاربر روی مثلث یا برچسب ویجت
کلیک می‌کند (یا روی آن فوکوس کرده و کلید space را فشار دهد)، حالت ویجت از بسته به باز
تغییر می‌کند و محتویات درون details نمایش داده می‌شود.
تنها صفت اختصاصی مورد پشتیبانی عنصر details صفت بولین open است که
وجود آن باعث می‌شود که
ویجت مورد نظر پس از بارگذاری صفحه در حالت باز قرار داشته باشد.
HTML
<details open>
<summary>Summary</summary>
Something small enough to escape casual notice.
</details>
ما می‌توانیم با استفاده از جاوااسکریپت، این صفت را حذف یا اضافه کنیم و حالت ویجت را
تغییر دهیم و با استفاده از CSS استایل متفاوتی را به ویجت مورد نظر بدهیم اما متأسفانه
هنوز روش درونی (built-in) برای افزودن ترنزیشن (transition) در زمان سوئیچ بین حالت باز و
بسته وجود ندارد.
ایجاد کادرهای محاوره‌ای با عنصر dialog
در صفحات و اپلیکیشن‌های وب از کادرهای محاوره‌ای (dialog box) و پنجره‌های بازشو (popup)
به کرّات استفاده می‌شود. این کادرها و پنجره‌ها می‌توانند پیام‌ها یا هشدارهایی را برای
کاربر نمایش دهند و تا زمانی که بسته نشوند، کاربر امکان تعامل با سایر محتویات صفحه را
ندارد.
تا قبل از HTML5.2 برای ایجاد کادرهای محاوره‌ای یا پنجره‌های popup باید از توابع
جاوااسکریپتی alert() و confirm() استفاده می‌کردیم که کادرهای تولید شده توسط آنها تنها
قادر به نمایش پیام‌های متنی هستند و امکان استایل‌دهی به آنها نیز وجود ندارد. در HTML5.2
عنصر dialog با هدف ساده‌سازی فرایند ایجاد یک کادر محاوره‌ای معرفی شد. کادرهای ایجاد شده
با استفاده از این عنصر، محدودیت‌های مربوط به توابع alert() و confirm() را ندارند و
می‌توانند شامل هر محتوایی باشند و امکان استایل‌دهی به آنها نیز وجود دارد.
عنصر dialog علاوه بر صفت‌های عمومی، از یک صفت اختصاصی و بولین با نام open نیز پشتیبانی
می‌کند که وجود آن باعث نمایش کادر محاوره‌ای مورد نظر می‌شود. در غیاب این صفت، مرورگر از
نمایش کادر محاوره‌ای خودداری می‌کند.
HTML
<dialog open>
<p>Hello World!</p>
</dialog>
کادرهای محاوره‌ای معمولاً به گونه‌ای هستند که در حالت پیش‌فرض نمایش داده نمی‌شوند و
نمایش آنها به یک رفتار کاربر (مثل کلیک روی یک عنصر) وابسته می‌شود. برای پیاده کردن چنین
سناریویی، باید از جاوااسکریپت و متدهای show() و close() مربوط به
عنصر dialog استفاده
کنیم.
ساخت منوها با استفاده از عنصر menu
عنصر menu را می‌توانید به عنوان یک جایگزین معنایی (semantic) برای عنصر ul در نظر بگیرید.
در واقع، عناصر ul و menu هر دو برای ایجاد یک لیست غیرترتیبی از
آیتم‌‌ها کاربرد دارند اما
با این تفاوت که آیتم‌های menu اینتراکتیو هستند و هر آیتم، دستوری (command) است که کاربر
می‌تواند حکم به اجرای آن بدهد، در حالی که هدف عنصر ul اساساً نمایش آیتم‌هاست. برای مثال،
ساخت یک نوار ابزار (toolbar) یا یک نوار منو (menubar) از کاربردهای مهم عنصر menu است.
HTML
<menu>
<li><button onclick="new()">New...</button></li>
<li><button onclick="open()">Open...</button></li>
<li><button onclick="save()">Save...</button></li>
<li><button onclick="saveas()">Save As...</button></li>
</menu>
در مورد عنصر menu باید بدانید که این عنصر در HTML4.01 از مستندات این زبان کنار گذاشته شد
اما در HTML5.1 مجدداً به مستندات اضافه شد و در حال حاضر جنبه‌ی آزمایشی (experimental)
دارد و از پشتیبانی خوبی در مرورگرها برخوردار نیست. همچنین، این عنصر سابقاً یک مورد
استفاده‌ی دیگر هم داشت و آن تعریف گزینه‌های یک منوی راست کلیک (context menu) بود اما در
استاندارد فعلی HTML این قابلیت از مستندات مربوط به این عنصر حذف شده و لذا نباید از عنصر
menu با این هدف استفاده کنیم، حتی اگر برخی مرورگرها (مانند firefox) هنوز از این قابلیت
برای عنصر menu پشتیبانی کنند.