آموزش فرم ها در بوت استرپ

0 دیدگاه

در این بخش به فرم ها در بوت استرپ پرداخته می شود. فرم ها به کاربر اجازه می دهند اطلاعاتی مانند نام، ایمیل، گذرواژه و موارد دیگر را وارد کند. سپس این داده ها به سرور ارسال می شوند تا پردازش شوند. بوت استرپ کلاس هایی ارائه می دهد که امکان طراحی فرم هایی متنوع با سبک ها، چیدمان ها و اجزای سفارشی را فراهم می کنند. اگر با ساختار بوت استرپ آشنا نیستید، پیشنهاد می‌کنیم ابتدا با آموزش طراحی سایت با بوت استرپ شروع کنید تا مفاهیم پایه را بهتر درک کنید.

فرم پایه در بوت استرپ

در بوت استرپ، کنترل های فرم با کمک کلاس های خاص، ظاهر فرم را با سبک های Reboot بهینه می کنند. این کلاس ها باعث می شوند فرم در مرورگرها و دستگاه های مختلف ظاهر یکنواخت و منظمی داشته باشد. برای نمایش بهتر فرم، باید از این کلاس ها استفاده کرد.

اگر قصد دارید از ورودی های جدیدی مانند بررسی ایمیل یا انتخاب عدد استفاده کنید، باید نوع داده را به درستی در ویژگی type وارد نمایید. مثلا برای فیلد ایمیل از email استفاده کنید و برای داده عددی، number را به کار ببرید.

در مثال زیر، یک فرم پایه طراحی شده با بوت استرپ نمایش داده می شود:

  <!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>

<!DOCTYPE html>

<head>

<title>Bootstrap - Form</title>

</head>

<body>

<form>

<label for=" sampleInputEmail" class="form-label">Username</label>

</div>

<label for="sampleInputPassword" class="form-label">Password</label>

</div>

<label class="form-check-label" for="sampleCheck">Remember me</label>

</div>

</form>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

فرم های غیرفعال در بوت استرپ

برای جلوگیری از تعامل کاربر با فیلدها و نمایش ظاهری کمرنگ‌تر، باید از ویژگی بولی disabled استفاده کنید. این ویژگی باعث می شود که عنصر ورودی غیرفعال شود و کاربر نتواند با آن تعامل داشته باشد.

اگر می‌خواهید همه کنترل‌های داخل یک fieldset را غیرفعال کنید، کافی است ویژگی disabled را به خود تگ fieldset اضافه کنید. در این حالت، تمام عناصر داخلی مانند input، select و button که جزو کنترل‌های بومی فرم هستند، توسط مرورگر به صورت غیرفعال شناسایی می‌شوند. در نتیجه کاربر نمی‌تواند با ماوس یا صفحه کلید با این فیلدها تعامل داشته باشد.

اگر فرم شما از اجزای سفارشی شبیه دکمه مانند <a class="btn btn-*">...</a> استفاده می‌کند، باید توجه داشته باشید که این عناصر با وجود ظاهر غیرفعال، همچنان قابل انتخاب با صفحه کلید هستند. زیرا مرورگر به طور پیش‌فرض pointer-events: none را روی آن‌ها اعمال می‌کند اما قابلیت فوکوس آن‌ها باقی می‌ماند. برای جلوگیری از دریافت فوکوس توسط این عناصر، مقدار -1 را به ویژگی tabindex اختصاص دهید. همچنین برای اعلام وضعیت غیرفعال به فناوری‌های کمکی مانند صفحه‌خوان‌ها، از ویژگی aria-disabled="disabled" استفاده کنید.

  <!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>

<!DOCTYPE html>

<head>

<title>Bootstrap - Form</title>

</head>

<body>

<form>

<label for="disabledEmailInput" class="form-label">Disabled Input</label>

</div>

<label for="disabledPasswordInput" class="form-label">Disabled Input</label>

<option>Password</option>

</select>

</div>

Disabled Check Box

</label>

</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 می‌تواند به کاربران فناوری‌های کمکی کمک کند. با این حال، برخی کاربران همچنان ممکن است به دلیل نبود برچسب‌های قابل مشاهده، در درک محتوای فرم دچار مشکل شوند. بنابراین حتی در فرم‌های پیشرفته نیز باید تعادل بین زیبایی بصری و دسترس پذیری حفظ شود.

5/5 - (1 امتیاز)

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

نظرات

دوره آموزش طراحی وب سایت مدرسه با PHP و MySql

انتشار: ۲۶ خرداد ۱۴۰۴

آموزش فرم ها در بوت استرپ

فرم پایه در بوت استرپ

فرم های غیرفعال در بوت استرپ

دسترس پذیری فرم در بوت استرپ

دسته بندی موضوعات

آخرین محصولات فروشگاه

نظرات

بازخوردهای خود را برای ما ارسال کنید

لغو پاسخ

مطالب مرتبط