در این بخش به فرم ها در بوت استرپ پرداخته می شود. فرم ها به کاربر اجازه می دهند اطلاعاتی مانند نام، ایمیل، گذرواژه و موارد دیگر را وارد کند. سپس این داده ها به سرور ارسال می شوند تا پردازش شوند. بوت استرپ کلاس هایی ارائه می دهد که امکان طراحی فرم هایی متنوع با سبک ها، چیدمان ها و اجزای سفارشی را فراهم می کنند. اگر با ساختار بوت استرپ آشنا نیستید، پیشنهاد میکنیم ابتدا با آموزش طراحی سایت با بوت استرپ شروع کنید تا مفاهیم پایه را بهتر درک کنید.
فرم پایه در بوت استرپ
در بوت استرپ، کنترل های فرم با کمک کلاس های خاص، ظاهر فرم را با سبک های Reboot بهینه می کنند. این کلاس ها باعث می شوند فرم در مرورگرها و دستگاه های مختلف ظاهر یکنواخت و منظمی داشته باشد. برای نمایش بهتر فرم، باید از این کلاس ها استفاده کرد.
اگر قصد دارید از ورودی های جدیدی مانند بررسی ایمیل یا انتخاب عدد استفاده کنید، باید نوع داده را به درستی در ویژگی type
وارد نمایید. مثلا برای فیلد ایمیل از email
استفاده کنید و برای داده عددی، number
را به کار ببرید.
در مثال زیر، یک فرم پایه طراحی شده با بوت استرپ نمایش داده می شود:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Form</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <form> <div class="mb-3"> <label for=" sampleInputEmail" class="form-label">Username</label> <input type="email" class="form-control" id=" sampleInputEmail" aria-describedby="emailHelp"> </div> <div class="mb-3"> <label for="sampleInputPassword" class="form-label">Password</label> <input type="password" class="form-control" id="sampleInputPassword"> </div> <div class="mb-3 form-check"> <input type="checkbox" class="form-check-input" id="sampleCheck"> <label class="form-check-label" for="sampleCheck">Remember me</label> </div> <button type="submit" class="btn btn-primary">Log in</button> </form> </body> </html> |
فرم های غیرفعال در بوت استرپ
برای جلوگیری از تعامل کاربر با فیلدها و نمایش ظاهری کمرنگتر، باید از ویژگی بولی disabled
استفاده کنید. این ویژگی باعث می شود که عنصر ورودی غیرفعال شود و کاربر نتواند با آن تعامل داشته باشد.
اگر میخواهید همه کنترلهای داخل یک fieldset
را غیرفعال کنید، کافی است ویژگی disabled
را به خود تگ fieldset
اضافه کنید. در این حالت، تمام عناصر داخلی مانند input
، select
و button
که جزو کنترلهای بومی فرم هستند، توسط مرورگر به صورت غیرفعال شناسایی میشوند. در نتیجه کاربر نمیتواند با ماوس یا صفحه کلید با این فیلدها تعامل داشته باشد.
اگر فرم شما از اجزای سفارشی شبیه دکمه مانند <a class="btn btn-*">...</a>
استفاده میکند، باید توجه داشته باشید که این عناصر با وجود ظاهر غیرفعال، همچنان قابل انتخاب با صفحه کلید هستند. زیرا مرورگر به طور پیشفرض pointer-events: none
را روی آنها اعمال میکند اما قابلیت فوکوس آنها باقی میماند. برای جلوگیری از دریافت فوکوس توسط این عناصر، مقدار -1
را به ویژگی tabindex
اختصاص دهید. همچنین برای اعلام وضعیت غیرفعال به فناوریهای کمکی مانند صفحهخوانها، از ویژگی aria-disabled="disabled"
استفاده کنید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Form</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <form> <fieldset disabled> <div class="mb-3"> <label for="disabledEmailInput" class="form-label">Disabled Input</label> <input type="text" id="disabledEmailInput" class="form-control" placeholder="Email Id"> </div> <div class="mb-3"> <label for="disabledPasswordInput" class="form-label">Disabled Input</label> <select id="disabledPasswordInput" class="form-select"> <option>Password</option> </select> </div> <div class="mb-3"> <div class="form-check"> <input class="form-check-input" type="checkbox" id="disabledcheckbox" disabled> <label class="form-check-label" for="disabledcheckbox"> Disabled Check Box </label> </div> </div> <button type="submit" class="btn btn-primary">Disabled Button</button> </fieldset> </form> </body> </html> |
دسترس پذیری فرم در بوت استرپ
هر کنترل فرم باید دارای یک نام قابل دسترسی (accessible name) باشد تا کاربران فناوری های کمکی مانند صفحه خوان بتوانند به درستی با آن تعامل داشته باشند. ساده ترین روش برای این کار استفاده از عنصر label
یا نوشتن متن توصیفی داخل دکمهها مانند <button>...</button>
است.
اگر امکان نمایش برچسب یا متن مناسب وجود نداشته باشد، باید از روشهای جایگزین برای تعریف نام دسترسی استفاده کرد. برخی از این روشها عبارتند از:
-
استفاده از کلاس
.visually-hidden
برای پنهان کردن برچسبlabel
از دید کاربران معمولی ولی حفظ آن برای فناوری های کمکی. -
استفاده از ویژگی
aria-labelledby
برای ارجاع به عنصری که مانندlabel
عمل میکند. -
افزودن ویژگی
title
برای ارائه توضیح مختصر در مورد کاربرد فیلد. -
استفاده از
aria-label
برای تعیین مستقیم نام قابل دسترسی یک عنصر.
اگر هیچکدام از این روشها در دسترس نبودند، میتوان از ویژگی placeholder
در عناصر input
و textarea
به عنوان گزینه نهایی برای ایجاد نام قابل دسترسی استفاده کرد. البته این گزینه فقط زمانی توصیه میشود که سایر روشها امکانپذیر نباشند.
استفاده از محتوای پنهانشده به کمک .visually-hidden
میتواند به کاربران فناوریهای کمکی کمک کند. با این حال، برخی کاربران همچنان ممکن است به دلیل نبود برچسبهای قابل مشاهده، در درک محتوای فرم دچار مشکل شوند. بنابراین حتی در فرمهای پیشرفته نیز باید تعادل بین زیبایی بصری و دسترس پذیری حفظ شود.
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
- انتشار: ۲۶ خرداد ۱۴۰۴
دسته بندی موضوعات
- آموزش ارز دیجیتال
- آموزش برنامه نویسی
- آموزش متنی برنامه نویسی
- اطلاعیه و سایر مطالب
- پروژه برنامه نویسی
- دوره های تخصصی برنامه نویسی
- رپورتاژ
- فیلم های آموزشی
- ++C
- ADO.NET
- Adobe Flash
- Ajax
- AngularJS
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- AVR
- Bootstrap
- CCNA
- CCNP
- CMD
- CSS
- Dreameaver
- EntityFramework
- HTML
- IOS
- jquery
- Linq
- Mysql
- Oracle
- PHP
- PHPMyAdmin
- Rational Rose
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- WPF
- Xml
- آموزش های پروژه محور
- اتوکد
- الگوریتم تقریبی
- امنیت
- اندروید
- اندروید استودیو
- بک ترک
- بیسیک فور اندروید
- پایتون
- جاوا
- جاوا اسکریپت
- جوملا
- دلفی
- دوره آموزش Go
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کانستراکت
- کریستال ریپورت
- لاراول
- معماری کامپیوتر
- مهندسی اینترنت
- هوش مصنوعی
- یونیتی
- کتاب های آموزشی
- Android
- ASP.NET
- AVR
- LINQ
- php
- Workflow
- اچ تی ام ال
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- پاسکال
- پایان نامه
- پایتون
- جاوا
- جاوا اسکریپت
- جی کوئری
- داده کاوی
- دلفی
- رباتیک
- سئو
- سایر کتاب ها
- سخت افزار
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- طراحی الگوریتم
- فتوشاپ
- مقاله
- مهندسی نرم افزار
- هک و امنیت
- هوش مصنوعی
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس