مرجع عناصر HTML : عنصر <button>
عنصر <button> در HTML یک عنصر تعاملی است که توسط کاربر با ماوس، صفحه کلید، انگشت، فرمان صوتی یا سایر فناوریهای کمکی فعال میشود. پس از فعال شدن، عملی مانند ارسال فرم یا باز کردن یک کادر محاورهای را انجام میدهد.
به طور پیشفرض، دکمههای HTML به سبکی شبیه به پلتفرمی که عامل کاربر روی آن اجرا میشود، ارائه میشوند، اما میتوانید ظاهر دکمهها را با CSS تغییر دهید.
ویژگیهای این عنصر شامل ویژگیهای سراسری است.
- autofocus
این ویژگی بولی مشخص میکند که دکمه هنگام بارگذاری صفحه باید فوکوس ورودی داشته باشد. فقط یک عنصر در یک سند میتواند این ویژگی را داشته باشد.
- command
عملی را که باید روی عنصری که توسط یک کنترلی مشخص شده از طریق ویژگی commandfor کنترل میشود، انجام شود، مشخص میکند. مقادیر ممکن عبارتند از:
"show-modal"
دکمه یک را به صورت modal نشان میدهد. اگر کادر محاورهای از قبل modal باشد، هیچ اقدامی انجام نخواهد شد. این معادل اعلانی فراخوانی متد روی عنصر است.
"close"
دکمه یک عنصر را میبندد. اگر کادر محاورهای از قبل بسته شده باشد، هیچ اقدامی انجام نخواهد شد. این معادل اعلانی فراخوانی متد روی عنصر است. هنگامی که با ویژگی value استفاده میشود، مقدار دکمه به عنوان ویژگی returnValue کادر محاورهای ارسال میشود.
"request-close"
این دکمه یک رویداد لغو را در یک عنصر فعال میکند تا از مرورگر بخواهد آن را رد کند و به دنبال آن یک رویداد بستن رخ میدهد. این با دستور بستن متفاوت است زیرا نویسندگان میتوانند را در رویداد لغو فراخوانی کنند تا از بسته شدن جلوگیری کنند. اگر کادر محاورهای از قبل بسته شده باشد، هیچ اقدامی انجام نخواهد شد. این معادل اعلانی فراخوانی متد در عنصر است. هنگامی که با ویژگی مقدار دکمه استفاده شود، مقدار به عنوان ویژگی returnValue کادر محاورهای ارسال میشود.
"show-popover"
دکمه یک پنجره بازشو پنهان را نشان میدهد. اگر سعی کنید یک پنجره بازشو که از قبل نمایش داده میشود را نشان دهید، هیچ اقدامی انجام نخواهد شد. برای جزئیات بیشتر به API Popover مراجعه کنید. این معادل تنظیم مقدار show برای ویژگی popovertargetaction است و همچنین معادل اعلانی فراخوانی متد یک دکمه ارسال با ویژگی formaction تنظیم شده، اما بدون فرم مرتبط، هیچ کاری انجام نمیدهد. شما باید یک مالک فرم تعیین کنید، یا با قرار دادن آن در یک یا با تنظیم ویژگی form روی شناسه فرم.
عناصر سبکبندی بسیار آسانتری نسبت به عناصر دارند. میتوانید محتوای HTML داخلی (مثلاً یا حتی ) اضافه کنید و از شبه عناصر و برای رندر پیچیده استفاده کنید.
اگر دکمههای شما برای ارسال دادههای فرم به سرور نیستند، حتماً ویژگی type آنها را روی button تنظیم کنید. در غیر این صورت، آنها سعی میکنند دادههای فرم را ارسال کنند و پاسخ (موجود نیست) را بارگیری کنند، که احتمالاً وضعیت فعلی سند را از بین میبرد.
در حالی که هیچ رفتار پیشفرضی ندارد، میتوان کنترلکنندههای رویداد را طوری اسکریپتنویسی کرد که رفتارها را فعال کنند. یک دکمه فعال شده میتواند با استفاده از جاوا اسکریپت اقدامات قابل برنامهریزی مانند حذف یک مورد از یک لیست را انجام دهد.
به طور پیشفرض، مرورگرها دکمهها را به صورت استایل میدهند، که یک زمینه قالببندی بلوک جدید ایجاد میکند و فرزندان دکمه را هم به صورت افقی و هم به صورت عمودی در مرکز قرار میدهد، البته تا زمانی که سرریز نشوند. اگر دکمه به عنوان یک ظرف flex یا grid تعریف شود، فرزندان مانند آیتمهای flex یا grid رفتار خواهند کرد. دکمهای که روی تنظیم شده باشد، طوری استایلبندی میشود که انگار مقدار آن روی تنظیم شده است.
دکمههایی که فقط یک آیکون را نمایش میدهند، نام قابل دسترسی ندارند. نامهای قابل دسترسی، اطلاعاتی را برای فناوریهای کمکی، مانند صفحهخوانها، فراهم میکنند تا هنگام تجزیه سند و ایجاد درخت دسترسی، به آنها دسترسی داشته باشند. سپس فناوری کمکی از درخت دسترسی برای پیمایش و دستکاری محتوای صفحه استفاده میکند.
برای دادن نام قابل دسترسی به یک دکمه آیکون، متنی را در عنصر قرار دهید که به طور خلاصه عملکرد دکمه را شرح دهد.
اگر میخواهید متن دکمه را به صورت بصری پنهان کنید، یک راه قابل دسترس برای انجام این کار، استفاده از ترکیبی از ویژگیهای CSS برای حذف بصری آن از صفحه نمایش است، اما آن را با فناوری کمکی قابل تجزیه نگه دارید.
با این حال، شایان ذکر است که قابل مشاهده نگه داشتن متن دکمه میتواند به افرادی که ممکن است با معنای آیکون آشنا نباشند یا هدف دکمه را درک نکنند، کمک کند. این امر به ویژه برای افرادی که از نظر فناوری پیشرفته نیستند یا ممکن است تفسیرهای فرهنگی متفاوتی از آیکونی که دکمه از آن استفاده میکند، داشته باشند، مهم است.
نام قابل دسترس چیست؟ | Vispero
MDN درک WCAG، توضیحات دستورالعمل ۴.۱
درک معیار موفقیت ۴.۱.۲ | W3C درک WCAG ۲.۰
مقادیر زیادی از محتوای تعاملی - از جمله دکمهها - که در مجاورت بصری نزدیک به یکدیگر قرار میگیرند، باید فضایی برای جدا کردن آنها وجود داشته باشد. این فاصلهگذاری برای افرادی که مشکلات کنترل حرکتی دارند و ممکن است به طور تصادفی محتوای تعاملی اشتباهی را فعال کنند، مفید است.
فاصلهگذاری ممکن است با استفاده از ویژگیهای CSS مانند حاشیه ایجاد شود.
لرزش دست و مشکل دکمه غولپیکر - آزمایشگاه Axess
برای توصیف وضعیت یک دکمه، ویژگی ARIA صحیح که باید استفاده شود، aria-pressed است و نه aria-checked یا aria-selected. برای کسب اطلاعات بیشتر، اطلاعات مربوط به نقش دکمه ARIA را مطالعه کنید.
بهتر است حلقه فوکوس پیشفرض را برای عناصری که فوکوس دارند، لغو نکنید. اگر سبکهای دکمه لغو شوند، مهم است که اطمینان حاصل شود که حالت فوکوس کنتراست کافی دارد تا افرادی که شرایط کم بینایی دارند بتوانند آن را درک کنند و افرادی که دارای تفاوتهای شناختی هستند، آن را درک کنند.
میتواند برای اعمال سبکها به عنصری که دارد، فقط زمانی استفاده شود که اکتشافات عامل کاربر تعیین کند که فوکوس باید برجسته شود، مانند زمانی که یک فوکوس صفحه کلید را دریافت میکند. برای اطلاعات بیشتر به در مقابل مراجعه کنید.
نسبت کنتراست رنگ با مقایسه درخشندگی متن دکمه و مقادیر رنگ پسزمینه با پسزمینهای که دکمه روی آن قرار دارد، تعیین میشود. برای رعایت دستورالعملهای فعلی دسترسی به محتوای وب (WCAG)، نسبت ۴.۵:۱ برای محتوای متن و ۳:۱ برای متن بزرگ مورد نیاز است. (متن بزرگ به صورت ۱۸.۶۶ پیکسل و پررنگ یا بزرگتر، یا ۲۴ پیکسل یا بزرگتر تعریف میشود.)
شبه کلاس WebAIM: بررسیکننده کنتراست رنگ
MDN درک WCAG، توضیحات دستورالعمل ۱.۴
درک معیار موفقیت ۱.۴.۳ | W3C درک WCAG ۲.۰
اینکه آیا کلیک کردن روی انواع دکمههای یا باعث میشود که (به طور پیشفرض) فوکوس (focus) روی آن قرار گیرد، بسته به مرورگر و سیستم عامل متفاوت است. اکثر مرورگرها فوکوس را روی دکمهای که کلیک میشود قرار میدهند، اما سافاری این کار را نمیکند، زیرا طراحی آن به این صورت است.
این مثال یک دکمهی قابل کلیک ایجاد میکند. ویژگی تضمین میکند که دکمه هیچ رفتار پیشفرضی ندارد. میتوانید این دکمه را با استفاده از جاوا اسکریپت یا ویژگیهایی مانند command و commandfor تعاملی کنید.
استفاده از مقدار request-close برای ویژگی command
پنجرهی محاورهای در این مثال دو دکمهی رادیویی دارد که کنترل میکنند آیا میتوان پنجره را بست یا خیر. بله یا خیر را انتخاب کنید و سپس برای بستن پنجره، روی درخواست بستن کلیک کنید. اگر بله انتخاب شود، پنجره بسته میشود؛ اگر خیر انتخاب شود، پنجره باز میماند و به جای آن یک پیام نمایش داده میشود.
دکمهی «باز کردن دیالوگ» عنصر را با استفاده از باز میکند.
دکمه «درخواست بستن» دارای است که عنصر را با استفاده از ویژگی هدف قرار میدهد. وقتی روی آن کلیک میشود، از میپرسد که آیا میتواند بسته شود (برخلاف ویژگی که را فوراً میبندد). این بررسی میکند که آیا با استفاده از یک رویداد لغو قابل لغو است یا خیر.
وقتی رویداد قابل لغو باشد، مقدار دکمههای رادیویی بررسی میشود:
- اگر روی بله تنظیم شود، دیالوگ بسته میشود.
- اگر روی خیر تنظیم شود، ویژگی پنهان در هنگام هشدار خاموش میشود و متد فراخوانی میشود که از رفتار پیشفرض بسته شدن جلوگیری میکند.
استفاده از ویژگی مقدار با دستور close در dialog
این مثال نحوهی استفاده از ویژگی مقدار دکمه با دستور close را برای پر کردن مقدار ویژگی returnValue یک دیالوگ نشان میدهد.
وقتی روی دکمهی Cancel یا Delete کلیک میشود، کادر محاورهای بسته میشود و returnValue آن برابر با ویژگی value دکمه قرار میگیرد. شنوندهی رویداد close، را بررسی میکند تا مشخص کند کاربر کدام عمل را انتخاب کرده و نتیجه را روی صفحه نمایش میدهد.
HTML ابتدا یک دکمهی حذف رکورد تعریف میکند که از ویژگی commandfor برای مشخص کردن دیالوگی که قرار است باز شود استفاده میکند.
در داخل دیالوگ، دکمههای Cancel و Delete از ویژگی commandfor برای نشان دادن اینکه به دیالوگ فعلی اعمال میشوند، استفاده میکنند. آنها همچنین ویژگی command را روی "close" و ویژگی value را به ترتیب روی "cancel" و "delete" تنظیم میکنند - مقدار دکمهی انتخاب شده به طور خودکار هنگام کلیک روی دکمه، در returnValue دیالوگ کپی میشود.
این کد از یک شنونده رویداد close برای ثبت مقدار بازگشتی دیالوگ استفاده میکند.
| مشخصه | توضیحات |
|---|
| دسته بندی محتوا | Flow content, phrasing content, Interactive content, listed, labelable, and submittable form-associated element, palpable content. |
| محتوای مجاز | محتوای جملهبندیشده اما نباید محتوای تعاملی وجود داشته باشد. اگر <button> اولین فرزند یک عنصر select قابل تنظیم باشد، میتواند شامل هیچ یا یک عنصر <selectedcontent> نیز باشد. |
| حذف برچسب | هیچکدام، هر دو تگ شروع و پایان اجباری هستند. |
| والدین مجاز | هر عنصری که محتوای عبارتبندیشده را میپذیرد. |
| نقش ضمنی ARIA | button |
| نقشهای مجاز ARIA | checkbox, combobox, link, menuitem, menuitemcheckbox, menuitemradio, option, radio, switch, tab |
| رابط DOM | HTMLButtonElement |
در عنصر popover را ارائه میدهد.
"hide-popover"
این دکمه، یک popover در حال نمایش را پنهان میکند. اگر سعی کنید یک popover از قبل پنهان را پنهان کنید، هیچ اقدامی انجام نخواهد شد. برای جزئیات بیشتر به Popover API مراجعه کنید. این معادل تنظیم مقدار hide برای ویژگی popovertargetaction است و همچنین معادل اعلانی برای فراخوانی متد
روی عنصر popover ارائه میدهد.
"toggle-popover"
این دکمه، یک popover را بین نمایش و پنهان تغییر وضعیت میدهد. اگر popover پنهان باشد، نمایش داده میشود؛ اگر popover در حال نمایش باشد، پنهان میشود. برای جزئیات بیشتر به Popover API مراجعه کنید. این معادل تنظیم مقدار toggle برای ویژگی popovertargetaction است و همچنین معادل اعلانی برای فراخوانی متد
روی عنصر popover ارائه میدهد.
مقادیر سفارشی
این ویژگی میتواند مقادیر سفارشی را نشان دهد که با دو کاراکتر خط تیره (--) پیشوند میشوند. دکمههای دارای مقدار سفارشی، CommandEvent را روی عنصر کنترلشده ارسال میکنند.
- commandfor
یک عنصر
را به یک دکمه فرمان تبدیل میکند و با صدور فرمان مشخص شده در ویژگی command دکمه، یک عنصر تعاملی داده شده را کنترل میکند. ویژگی commandfor، شناسه عنصری را که باید کنترل شود به عنوان مقدار خود میگیرد. این یک نسخه عمومیتر از popovertarget است.
- disabled
این ویژگی بولی مانع از تعامل کاربر با دکمه میشود: نمیتوان آن را فشار داد یا روی آن فوکوس کرد.
- form
عنصر
برای مرتبط کردن دکمه با (مالک فرم آن). مقدار این ویژگی باید شناسه یک
در همان سند باشد. (اگر این ویژگی تنظیم نشده باشد،
با عنصر
جد خود، در صورت وجود، مرتبط میشود.)
این ویژگی به شما امکان میدهد عناصر
را به
ها در هر کجای سند، نه فقط داخل یک
، مرتبط کنید. همچنین میتواند یک عنصر
جد را لغو کند.
- formaction
URL که اطلاعات ارسالی توسط دکمه را پردازش میکند. ویژگی action مالک فرم دکمه را لغو میکند. اگر مالک فرمی وجود نداشته باشد، هیچ کاری انجام نمیدهد.
- formenctype
اگر دکمه یک دکمه ارسال باشد (درون/مرتبط با یک
است و
ندارد)، نحوه رمزگذاری دادههای فرم ارسالی را مشخص میکند. مقادیر ممکن:
application/x-www-form-urlencoded: پیشفرض در صورتی که از این ویژگی استفاده نشود.
multipart/form-data: برای ارسال عناصر
با ویژگیهای نوع آنها که روی file تنظیم شدهاند، استفاده میشود.
text/plain: به عنوان یک ابزار اشکالزدایی مشخص شده است؛ نباید برای ارسال فرم واقعی استفاده شود.
اگر این ویژگی مشخص شود، ویژگی enctype مالک فرم دکمه را لغو میکند.
- formmethod
اگر دکمه یک دکمه ارسال باشد (درون/مرتبط با یک
است و
ندارد)، این ویژگی روش HTTP مورد استفاده برای ارسال فرم را مشخص میکند. مقادیر ممکن:
post: دادههای فرم هنگام ارسال به سرور در بدنه درخواست HTTP گنجانده میشوند. زمانی استفاده میشود که فرم حاوی اطلاعاتی است که نباید عمومی باشند، مانند اطلاعات ورود.
get: دادههای فرم به آدرس اینترنتی action فرم، با یک علامت ? به عنوان جداکننده، اضافه میشوند و آدرس اینترنتی حاصل به سرور ارسال میشود. از این روش زمانی استفاده کنید که فرم هیچ عارضه جانبی ندارد، مانند فرمهای جستجو.
dialog: این روش برای نشان دادن این است که دکمه، پنجره محاورهای که با آن مرتبط است را میبندد و اصلاً دادههای فرم را منتقل نمیکند.
در صورت مشخص شدن، این ویژگی، ویژگی method مالک فرم دکمه را لغو میکند.
- formnovalidate
اگر دکمه یک دکمه ارسال باشد، این ویژگی Boolean مشخص میکند که فرم هنگام ارسال، اعتبارسنجی نمیشود. اگر این ویژگی مشخص شود، ویژگی novalidate مالک فرم دکمه را لغو میکند.
این ویژگی همچنین در عناصر
و
موجود است.
- formtarget
اگر دکمه، دکمه ارسال باشد، این ویژگی یک نام تعریفشده توسط نویسنده یا کلمه کلیدی استاندارد با پیشوند underscore است که نشان میدهد پاسخ ارسال فرم کجا نمایش داده شود. این نام یا کلمه کلیدی برای یک زمینه مرور (یک تب، پنجره یا
) است. اگر این ویژگی مشخص شود، ویژگی target مالک فرم دکمه را لغو میکند. کلمات کلیدی زیر معانی خاصی دارند:
: پاسخ را در همان زمینه مرور فعلی بارگذاری کنید. اگر ویژگی مشخص نشده باشد، این پیشفرض است.
: پاسخ را در یک زمینه مرور جدید بدون نام بارگذاری کنید - معمولاً یک تب یا پنجره جدید، بسته به تنظیمات مرورگر کاربر.
: پاسخ را در زمینه مرور والد فعلی بارگذاری کنید. اگر والدی وجود نداشته باشد، این گزینه مانند
رفتار میکند.
: پاسخ را در زمینه مرور سطح بالا بارگذاری کنید (یعنی زمینه مرور که جد زمینه مرور فعلی است و والدی ندارد). اگر والدی وجود نداشته باشد، این گزینه مانند
رفتار میکند.
- interestfor
عنصر
را به عنوان یک فراخوانندهی علاقهمندی تعریف میکند. مقدار آن، شناسهی یک عنصر هدف است که به نوعی (معمولاً نمایش داده شده یا پنهان شده) تحت تأثیر قرار میگیرد وقتی که علاقهمندی روی عنصر فراخواننده نشان داده میشود یا از بین میرود (مثلاً با حرکت دادن/برداشتن شناوری یا فوکوس کردن/تار کردن آن). برای جزئیات و مثالهای بیشتر به بخش استفاده از فراخوانندههای علاقهمندی مراجعه کنید.
- name
نام دکمه، که به صورت جفت با مقدار دکمه به عنوان بخشی از دادههای فرم ارسال میشود، زمانی که از آن دکمه برای ارسال فرم استفاده میشود.
- popovertarget
یک عنصر
را به یک دکمهی کنترل popover تبدیل میکند؛ شناسهی عنصر popover را برای کنترل به عنوان مقدار خود میگیرد. ایجاد رابطه بین یک popover و دکمه فراخوان آن با استفاده از ویژگی popovertarget دو اثر مفید دیگر نیز دارد:
مرورگر یک رابطه ضمنی aria-details و aria-expanded بین popover و فراخوان ایجاد میکند و popover را در یک موقعیت منطقی در ترتیب ناوبری فوکوس صفحه کلید هنگام نمایش قرار میدهد. این امر باعث میشود که popover برای کاربران صفحه کلید و فناوری کمکی (AT) قابل دسترسیتر باشد (همچنین به ویژگیهای دسترسی Popover مراجعه کنید).
- popovertargetaction
عملی را که باید روی یک عنصر popover که توسط یک
کنترل میشود، انجام شود، مشخص میکند. مقادیر ممکن عبارتند از:
"hide"
دکمه، یک popover نمایش داده شده را پنهان میکند. اگر سعی کنید یک popover از قبل پنهان شده را پنهان کنید، هیچ اقدامی انجام نخواهد شد.
"show"
دکمه یک popover پنهان شده را نشان میدهد. اگر سعی کنید یک popover از قبل نمایش داده شده را نشان دهید، هیچ اقدامی انجام نخواهد شد.
"toggle"
دکمه، یک popover را بین نمایش و پنهان شدن تغییر وضعیت میدهد. اگر popover پنهان باشد، نمایش داده میشود؛ اگر popover در حال نمایش باشد، پنهان میشود. اگر popover حذف شود، "toggle" عمل پیشفرضی است که توسط دکمه کنترل انجام میشود.
- type
رفتار پیشفرض دکمه. مقادیر ممکن عبارتند از:
submit: دکمه دادههای فرم را به سرور ارسال میکند. اگر ویژگی برای دکمههای مرتبط با
مشخص نشده باشد، یا اگر ویژگی خالی یا مقدار نامعتبر باشد، این پیشفرض است.
reset: این دکمه تمام کنترلها را به مقادیر اولیهشان، مانند
، بازنشانی میکند. (این رفتار معمولاً کاربران را آزار میدهد.)
reset: این دکمه هیچ رفتار پیشفرضی ندارد و وقتی به طور پیشفرض فشرده میشود، هیچ کاری انجام نمیدهد. میتواند اسکریپتهای سمت کلاینت را وادار کند که به رویدادهای عنصر گوش دهند، که هنگام وقوع رویدادها فعال میشوند.
- value
مقدار مرتبط با نام دکمه را هنگام ارسال با دادههای فرم تعریف میکند. این مقدار هنگام ارسال فرم با استفاده از این دکمه، در پارامترها به سرور ارسال میشود. هنگامی که با دستورات بستن یا درخواست-بستن استفاده میشود، ویژگی مقدار، مقدار بازگشتی عنصر
که کنترل میشود را تعیین میکند.
