فرادرسساختاردهی فرم های HTML – راهنمای جامع
در بخش‌های قبلی این سری مقالات با مبانی کار با فرم‌های HTML آشنا شدیم؛ اینک نوبت به بررسی برخی عناصر می‌رسد که برای ساختاردهی فرم های اچ تی ام ال کابرد دارند. برای مطالعه بخش قبلی این مجموعه مقالات آموزشی به لینک زیر مراجعه کنید:
پیش‌نیازها
- سواد مقدماتی رایانه
- درک مبانی HTML
هدف از این مقاله آشنایی با ساختار فرم‌های HTML و معنابخشی به عناصر آن به منظور ارتقای قابلیت استفاده و دسترس‌پذیر ساختن آن‌ها است.
انعطاف‌پذیری فرم‌های HTML آن‌ها را به یکی از پیچیده‌ترین ساختارهای HTML تبدیل ساخته است. با استفاده از عناصر اختصاصی فرم و خصوصیت‌های آن‌ها می‌توان هر نوع فرم مقدماتی را ساخت. استفاده از ساختار صحیح در زمان ساخت فرم HTML تضمین می‌کند که فرم هم قابل استفاده و هم دسترس‌پذیر باشد.
عنصر <form>
عنصر <form> رسماً یک فرم و خصوصیت‌های آن را تعریف می‌کند که برای تعریف رفتار فرم مورد استفاده قرار می‌گیرد. هر بار که می‌خواهید یک فرم HTML ایجاد کنید، باید آن را با استفاده از این عنصر آغاز کنید و همه عناصر را داخل این تگ قرار دهید. فناوری‌های حمایت از افراد کم‌توان و افزونه‌های مرورگر زیادی وجود دارند که می‌توانند عناصر <form> را کاوش کنند و قلاب‌های خاصی را پیاده‌سازی کنند تا استفاده از آن‌ها را ساده‌تر کند. ما این وضعیت را در بخش قبلی مشاهده کردیم.
نکته: گنجاندن یک فرم درون فرم دیگر اکیداً ممنوع است. تعریف تودرتوی فرم‌ها موجب می‌شود که به روشی غیرقابل‌پیش‌بینی و بر مبنای مرورگری که مورد استفاده قرار می‌گیرد، رفتار کنند.
توجه کنید که همواره می‌توان از یک ویجت فرم در خارج از عنصر <form> استفاده کرد، اما اگر چنین کاری را انجام دهید، آن ویجت فرم هیچ ربطی به فرم نخواهد داشت. چنین ویجت‌هایی می‌توانند خارج از فرم استفاده شوند، اما در این صورت باید نقشه خاصی برای چنین ویجت‌هایی داشته باشید، چون آن‌ها مستقلاً کاری انجام نمی‌دهند و باید رفتار آن‌ها را با جاوا اسکریپت سفارشی‌سازی کنید.
نکته: HTML5 خصوصیت form را روی عناصر form معرفی کرده است. بدین ترتیب می‌توان یک عنصر را صراحتاً به یک عنصر اتصال داد هر چند درون <form> قرار نداشته باشد. متأسفانه در حال حاضر پیاده‌سازی این ویژگی روی مرورگرها آن قدر خوب نیست که بتوان به آن‌ها تکیه کرد.
عناصر <fieldset> و <legend>
عنصر <fieldset> روشی راحت برای ایجاد گروه‌هایی از ویجت‌ها است که مقصود مشترکی دارند و به منظور استایل‌دهی یا مقاصد معناشناختی مورد استفاده قرار می‌گیرند. می‌توانید یک <fieldset> را با گنجاندن عنصر <legend> درست زیر تگ <fieldset> برچسب‌گذاری کنید. محتوای متنی <legend> به طور رسمی مقصود <fieldset> که درونش قرار گرفته را توصیف می‌کند. فناوری‌های حمایتی زیادی از عنصر <legend> به این صورت استفاده می‌کنند که گویی بخشی از برچسب هر ویجت درون عنصر <fieldset> است. برای نمونه برخی نرم‌افزارهای قرائت صفحه مانند Jaws یا NVDA محتوای legend را پیش از خواندن برچسب هر ویجت می‌خوانند.
در ادامه مثال کوچکی را ملاحظه می‌کنید:
یک نرم‌افزار قرائت صفحه زمانی که فرم فوق را می‌خواند، به صورت «Fruit juice size small» برای ویجت اول، «Fruit juice size medium» برای ویجت دوم و «Fruit juice size large» برای ویجت سوم خواهد خواند.
کاربردهای این مثال یکی از مهم‌ترین موارد محسوب می‌شوند. هر بار که مجموعه‌ای از دکمه‌های رادیویی داشته باشید، باید آن‌ها را درون عنصر <fieldset> قرار دهید. کاربردهای دیگری نیز وجود دارند. به طور کلی عنصر <fieldset> می‌تواند برای بخشی از فرم نیز استفاده شود. به طور معمول فرم‌های بلند را می‌توان به چندین صفحه تقسیم کرد، اما اگر فرمی بلند باشد و حتماً باید در یک صفحه باشد، می‌توان بخش‌های مختلف را درون fieldset-های متفاوت قرار دارد تا شرایط استفاده از آن بهبود یابد.
عنصر fieldset به دلیل تأثیری که روی فناوری حمایتی دارد یکی از عناصر کلیدی برای ساخت فرم‌های دسترس‌پذیر محسوب می‌شود. با این حال، عدم سوءاستفاده از آن در حوزه مسئولیت شما است. اگر ممکن است هر بار که یک فرم می‌سازید از یک نرم‌افزار قرائت صفحه استفاده کنید و ببینید آن را چگونه می‌خواند. اگر روش خواندن عجیب است می‌توانید ساختار فرم را بهبود ببخشید.
عنصر <label>
چنان که در بخش قبلی این سری مقالات دیدیم، عنصر <label> روش رسمی برای تعریف یک برچسب برای یک ویجت فرم HTML محسوب می‌شود. اگر می‌خواهید فرم‌های دسترس‌پذیر بسازید، این مهم‌ترین عنصری است که باید استفاده کنید. زمانی که به درستی آن را پیاده‌سازی کنید، نرم‌افزارهای قرائت صفحه برچسب عنصر فرم را با دستورالعمل‌های مرتبط می‌خوانند. این مثال را که در مقاله قبلی دیدیم، در نظر بگیرید:
وقتی <label> به درستی و از طریق خصوصیت‌های for و id به عنصر <input> وصل شده باشد، ابزار قرائت صفحه چیزی مانند «Name, edit text» می‌خواند. اگر برچسب به درستی تنظیم نشده باشد، ابزار قرائت صفحه تنها چیزی مانند «Edit text blank» می‌خواند که چندان مفید نیست. توجه کنید که ویجت می‌تواند درون عنصر <label> به صورت زیر نیز تعریف شود:
با این حال، حتی در چنین مواردی نیز بهترین رویه تنظیم خصوصیت for است، زیرا برخی فناوری‌های حمایتی رابطه صریح بین برچسب‌ها و ویجت‌ها را درک نمی‌کنند.
برچسب‌ها نیز قابل کلیک هستند
مزیت دیگر تنظیم صحیح برچسب‌ها این است که می‌توان در همه مرورگرها برچسب را کلیک کرد تا ویجت متناظر فعال شود. این حالت به طور مثال در مورد ورودی‌های متنی مفید است و می‌توان روی برچسب کلیک کرد تا ورودی فوکوس پیدا کند، اما در مورد دکمه‌های رادیویی و کادرهای انتخاب به شدت مفید واقع می‌شود. مساحت قابل کلیک چنین کنترل‌هایی عموماً بسیار کوچک است و از این رو بهتر است آن را تا حد امکان وسعت ببخشیم. برای نمونه:
برچسب‌های چندگانه
شما می‌توانید چند برچسب را روی یک ویجت منفرد قرار دهید، اما این ایده خوبی نیست چون برخی فناوری‌های حمایتی با آن مشکل پیدا می‌کنند. در مورد برچسب‌های چندگانه باید یک ویجت تعریف کنید و برچسب‌هایش را درون یک عنصر <label> قرار دهید. به مثال زیر توجه کنید:
پاراگراف اول کد فوق قاعده عناصر الزامی را تعریف می‌کند. این قاعده باید در ابتدا باشد تا مطمئن باشیم که فناوری‌های حمایتی مانند نرم‌افزارهای قرائت صفحه آن را پیش از یافتن یک عنصر الزامی نمایش داده یا بیان می‌کنند. بدین ترتیب این ابزارها معنی کاراکتر ستاره را می‌دانند. یک ابزار قرائت صفحه بسته به تنظیمات، ستاره‌ها را به صورت Star یا Required می‌خواند. در هر حال هر آنچه که خوانده خواهد شد در پاراگراف اول مشخص می‌شود.
- در مثال اول، برچسب به همراه ورودی اصلاً خوانده نمی‌شود و صرفاً عبارت «edit text blank» به علاوه برچسب‌های واقعی به صورت جداگانه خوانده می‌شوند. عناصر چندگانه <label> موجب سردرگمی ابزار قرائت صفحه می‌شوند.
- در مثال دوم، مسائل کمی روشن‌تر است. برچسب همراه با ورودی به صورت name star name edit text خوانده می‌شود و برچسب‌ها همچنان به صورت جداگانه خوانده می‌شوند. باز هم برخی موارد پیچیده هستند، اما این بار اوضاع بهتر است، زیرا ورودی و برچسب با هم ارتباط یافته‌اند.
- مثال سوم بهترین حالت است. برچسب واقعی کلاً خوانده می‌شود و برچسب به همراه ورودی به صورت «name star edit text» خوانده می‌شود.
نکته: بسته به ابزار قرائت صفحه‌ای که استفاده می‌کنید، ممکن است نتایج کمی متفاوتی به دست آورید. ما از VoiceOver (و NDVA نیز رفتار مشابهی دارد) استفاده کرده‌ایم.
ساختارهای رایج HTML مورد استفاده در فرم‌ها
علاوه بر ساختار خاص فرم‌های HTML، بهتر است به خاطر داشته باشید که این فرم‌ها صرفاً کد HTML هستند. این بدان معنی است که می‌توانید از همه توان HTML برای ساختاردهی یک فرم HTML بهره بگیرد.
چنان که در مثال‌های قبلی دیدید، رویه رایج این است که برچسب و ویجت آن درون یک عنصر <div> قرار گیرد. عناصر <a> نیز کاربرد زیادی دارد. همین طور لیست‌های HTML بیشتر برای ساختاردهی چند کادر انتخاب یا دکمه‌های رادیویی استفاده می‌شوند. علاوه بر عنصر <fieldset> رویه رایج این است که از عناوین HTML مانند <h1> و <h2> و قطعه‌بندی با استفاده از <section> برای ساختاردهی فرم‌های پیچیده استفاده کنیم.
در نهایت یافتن استایل مناسب و کدنویسی آن برای طراحی یک فرم دسترس‌پذیر و با کارایی بالا وظیفه شماست. به طور معمول بخش‌های مختلف کارکردها در عناصر <section> و دکمه‌های رادیویی در یک <fieldset> قرار می‌گیرند.
مثال کاربردی: ایجاد ساختار یک فرم
در این بخش ایده‌های خود را عملیاتی می‌کنیم و یک ساختار فرم نسبتاً پیچیده می‌سازیم که یک فرم پرداخت است. این فرم شامل چند نوع ویجت است که ممکن است هنوز طرز کارشان را ندانید، اما جای نگرانی نیست، زیرا در بخش بعدی در مورد آن‌ها توضیح خواهیم داد. فعلاً توضیحات زیر را به دقت بخوانید و شروع به درک چرایی و چگونگی استفاده از عناصر پوششی مختلف برای ساختاردهی یک فرم بکنید. در آغاز یک کپی از فایل کد HTML قالب خالی زیر روی سیستم خود ایجاد کنید:
فایل CSS فرم پرداخت ما نیز به صورت زیر خواهد بود. آن را در همان دایرکتوری فایل HTML در فایلی با نام payment-form.css ذخیره کنید:
قبل از هر چیز با افزودن کد زیر درون بخش <head> فایل HTML، تلاش کنید CSS را روی HTML اعمال کنید:
سپس شروع به افزودن عنصر <form> بیرونی بکنید:
درون تگ‌های <from> یک عنوان و یک پاراگراف اضافه کنید تا به کاربران اطلاع دهید که فیلدهای الزامی چگونه علامت‌گذاری شده‌اند:
سپس یک بخش بزرگ‌تر از کد را به فرم و زیر مدخل قبلی اضافه می‌کنیم. در این کد می‌بینید که فیلدهای اطلاعات تماس را درون یک عنصر <section> جدا قرار داده‌ایم. به علاوه یک مجموعه از دو دکمه رادیویی داریم که هر کدام را درون عنصر لیست (<li>) خاص خود قرار داده‌ایم. در نهایت دو متن استاندارد <input> داریم که به عناصر برچسب ارتباط یافته‌اند. هر کدام از آن‌ها شامل یک <p> هستند و به علاوه ورودی رمز عبور برای وارد کردن رمز عبور نیز تدارک دیده شده است. این کد را به فرم خود اضافه کنید:
اکنون به بررسی <section> دوم فرم خود می‌پردازیم که به اطلاعات پرداخت مربوط است. در این بخش سه ویجت متمایز داریم که هر کدام برچسبی دارند و هر یک درون یک تگ <p> قرار گرفته‌اند. تگ نخست یک منوی بازشدنی (<select>) است که برای انتخاب کردن نوع کارت اعتباری استفاده می‌شود. تگ دوم یک عنصر <input> از نوع عدد است که برای وارد کردن شماره کارت اعتباری استفاده می‌شود. عنصر آخر یک <input> از نوع date است که برای وارد کردن تاریخ انقضای کارت مورد استفاده قرار می‌گیرد. این تگ به همراه یک ویجت انتخاب تاریخ در مرورگرهایی که پشتیبانی می‌کنند عرضه می‌شود و در مرورگرهای غیر پشتیبانی‌کننده به حالت همان ورودی متنی ساده درمی‌آید. بدین ترتیب کد زیر را در ادامه کدهای قبلی وارد کنید:
بخش آخر که اضافه خواهیم کرد بسیار ساده‌تر است و صرفاً شامل یک <button> از نوع submit است که برای تحویل فرم استفاده می‌شود. این دکمه را به فرم خود اضافه کنید:
فرم تکمیل‌شده را می‌توانید در ادامه ملاحظه کنید.
سخن پایانی
شما اکنون تمام دانشی که برای ساختاربندی مناسب فرم‌های HTML مورد نیاز است کسب کرده‌اید. در بخش بعدی این سری مقالات به بررسی روش پیاده‌سازی همه انواع مختلف ویجت‌های فرم که می‌توان برای گردآوری اطلاعت از کاربران مورد استفاده قرار داد خواهیم پرداخت.
برای مطالعه قسمت بعدی این مجموعه مطلب آموزشی می‌توانید روی لینک زیر کلیک کنید:
اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:
- مجموعه آموزش‌های طراحی سایت با HTML و CSS
- مجموعه آموزش‌های برنامهنویسی
- آموزش طراحی وب با HTML – تکمیلی
- ۸ افکت HTML برای زیباتر شدن وبسایت
- ۵ گام برای درک کدهای پایه HTML – آموزش مقدماتی
==
