فرم کنترل ها

همه فرم کنترل های عمومی برای سازگاری طراحی شده اند

Bulma از المان های فرم HTML محلی زیر پشتیبانی می کند: <form> <button> <input> <textarea> و <label>.

کلاس های CSS زیر پشتیبانی می شوند::

  • label
  • input
  • textarea
  • select
  • checkbox
  • radio
  • button
  • help

برای حفظ یکنواخت طراحی ، Bulma یک بخش control بسیار مفید فراهم می کند که می توانید با آن کنترل های فرم را در آن قرار دهید.
هنگام ترکیب چندین کنترل در form ،از کلاس field به عنوان بخش استفاده کنید تا فاصله ثابت باشد.


نمونه فرم کامل #

این کاربری در دسترس است

این ایمیل نامعتبر است


<div class="field">
                            <label class="label">نام</label>
                            <div class="control">
                            <input class="input" type="text" placeholder="Text input">
                            </div>
</div>

<div class="field">
                            <label class="label">نام کاربری</label>
                            <div class="control has-icons-left has-icons-right">
                            <input class="input is-success" type="text" placeholder="Text input" value="bulma">
                            <span class="icon is-small is-left">
                            <i class="fas fa-user"></i>
                            </span>
                            <span class="icon is-small is-right">
                            <i class="fas fa-check"></i>
                            </span>
                            </div>
                            <p class="help is-success">این کاربری در دسترس است</p>
</div>

<div class="field">
                            <label class="label">Email</label>
                            <div class="control has-icons-left has-icons-right">
                            <input class="input is-danger" type="email" placeholder="Email input" value="[email protected]">
                            <span class="icon is-small is-left">
                            <i class="fas fa-envelope"></i>
                            </span>
                            <span class="icon is-small is-right">
                            <i class="fas fa-exclamation-triangle"></i>
                            </span>
                            </div>
                            <p class="help is-danger">این ایمیل نامعتبر است</p>
</div>

<div class="field">
                            <label class="label">موضوع</label>
                            <div class="control">
                            <div class="select">
                            <select>
                            <option>Select dropdown</option>
                            <option>With options</option>
                            </select>
                            </div>
                            </div>
</div>

<div class="field">
                            <label class="label">Message</label>
                            <div class="control">
                            <textarea class="textarea" placeholder="Textarea"></textarea>
                            </div>
</div>

<div class="field">
                            <div class="control">
                            <label class="checkbox">
                            <input type="checkbox">
      با <a href="#">شرایط و ضوابط  موافقت می کنم</a>
                            </label>
                            </div>
</div>

<div class="field">
                            <div class="control">
                            <label class="radio">
                            <input type="radio" name="question">
      بلی
                            </label>
                            <label class="radio">
                            <input type="radio" name="question">
      خیر
                            </label>
                            </div>
</div>

<div class="field is-grouped">
                            <div class="control">
                            <button class="button is-link">ثبت نام</button>
                            </div>
                            <div class="control">
                            <button class="button is-link is-light">انصراف</button>
                            </div>
</div>

برای دستیابی به بهترین نتیجه با استفاده از Bulma، توصیه می شود تا حد ممکن از المان control استفاده کنید.


فیلد فرم #

بخشfield یک بخش ساده برای موارد زیر است:

  • یک label متن
  • یک control فرم
  • متن helpاختیاری

این یک متن کمکی است


<div class="field">
                            <label class="label">برچسب</label>
                            <div class="control">
                            <input class="input" type="text" placeholder="Text input">
                            </div>
                            <p class="help">این یک متن کمکی است</p>
</div>
          

ابن بخش بین فیلدهای فرم فاصله ایجاد می کند.


<div class="field">
                            <label class="label">نام</label>
                            <div class="control">
                            <input class="input" type="text" placeholder="نام شما">
                            </div>
</div>

<div class="field">
                            <label class="label">ایمیل</label>
                            <div class="control">
                            <input class="input" type="email" placeholder="ایمیل شما">
                            </div>
</div>
          

فرم کنترل #

control Bulma یک container بلوکهمه کاره است که به منظور افزایش فرم کنترل های تک شکل. از آنجا که ارتفاع آن با المان های آن تعیین می شود،, می تواند فقط شامل المان های بولمای زیر باشد:

  • input
  • select
  • button
  • icon

این بخش به شما امکان می دهد:

  • فاصله را ثابت نگه دارید
  • فرم های کنترل را در یک گروه ترکیب کنید
  • فرم های کنترل رادر یک لیست ترکیب کنید
  • آیکون ها را به یک فرم کنترل اضافه کنید

<div class="control">
                            <input class="input" type="text" placeholder="Text input">
</div>
          

<div class="control">
                            <div class="select">
                            <select>
                            <option>انتخاب کنید</option>
                            <option>گزینه 1</option>
                            </select>
                            </div>
</div>
          

<div class="control">
                            <button class="button is-primary">Submit</button>
</div>
          

با آیکون #

می توانید یکی از 2 کلاس اصلاح کننده را به یک کنترل اضافه کنید:

  • has-icons-left
  • و/یا has-icons-right

همچنین باید یک کلاس اصلاح کننده به آیکون اضافه کنید:

  • icon is-left اگر has-icons-left استفاده شده است
  • icon is-right اگر has-icons-right استفاده شده است

اندازه input اندازه بخش آیکون را مشخص می کند.


<div class="field">
                            <p class="control has-icons-left has-icons-right">
                            <input class="input" type="ایمیل" placeholder="Email">
                            <span class="icon is-small is-right">
                            <i class="fas fa-envelope"></i>
                            </span>
                            <span class="icon is-small is-left">
                            <i class="fas fa-check"></i>
                            </span>
                            </p>
</div>
<div class="field">
                            <p class="control has-icons-right">
                            <input class="input" type="رمز عبور" placeholder="Password">
                            <span class="icon is-small is-right">
                            <i class="fas fa-lock"></i>
                            </span>
                            </p>
</div>
<div class="field">
                            <p class="control">
                            <button class="button is-success">
      ورود
                            </button>
                            </p>
</div>
          

همچنین می توانیدآیکون ها را به select dropdowns اضافه کنید.


<div class="field">
                            <p class="control has-icons-right">
                            <span class="select">
                            <select>
                            <option selected>کشور</option>
                            <option>انتخاب کنید</option>
                            <option>گزینه 1</option>
                            </select>
                            </span>
                            <span class="icon is-small is-right">
                            <i class="fas fa-globe"></i>
                            </span>
                            </p>
</div>
          

اگر کنترل حاوی یک آبکون باشد ، Bulma مطمئن می شود که آیکون در مرکز خود باقی بماند ، صرف نظر از اندازه ورودی یا آیکون.


<div class="field">
                            <label class="label is-small">input کوچک</label>
                            <div class="control has-icons-left has-icons-right">
                            <input class="input is-small" type="email" placeholder="کوچک">
                            <span class="icon is-small is-right">
                            <i class="fas fa-envelope"></i>
                            </span>
                            <span class="icon is-small is-left">
                            <i class="fas fa-check"></i>
                            </span>
                            </div>
</div>
          

<div class="field">
                            <label class="label">input نرمال</label>
                            <div class="control has-icons-left has-icons-right">
                            <input class="input" type="email" placeholder="بسیار کوچک">
                            <span class="icon is-small is-right">
                            <i class="fas fa-envelope fa-xs"></i>
                            </span>
                            <span class="icon is-small is-left">
                            <i class="fas fa-check fa-xs"></i>
                            </span>
                            </div>
</div>

<div class="field">
                            <div class="control has-icons-left has-icons-right">
                            <input class="input" type="email" placeholder="Normal">
                            <span class="icon is-right">
                            <i class="fas fa-envelope"></i>
                            </span>
                            <span class="icon is-left">
                            <i class="fas fa-check"></i>
                            </span>
                            </div>
</div>
          

<div class="field">
                            <label class="label is-medium">input متوسط</label>
                            <div class="control has-icons-left has-icons-right">
                            <input class="input is-medium" type="email" placeholder="بسیار کوچک">
                            <span class="icon is-small is-right">
                            <i class="fas fa-envelope fa-xs"></i>
                            </span>
                            <span class="icon is-small is-left">
                            <i class="fas fa-check fa-xs"></i>
                            </span>
                            </div>
</div>

<div class="field">
                            <div class="control has-icons-left has-icons-right">
                            <input class="input is-medium" type="email" placeholder="کوچک">
                            <span class="icon is-right">
                            <i class="fas fa-envelope fa-sm"></i>
                            </span>
                            <span class="icon is-left">
                            <i class="fas fa-check fa-sm"></i>
                            </span>
                            </div>
</div>

<div class="field">
                            <div class="control has-icons-left has-icons-right">
                            <input class="input is-medium" type="email" placeholder="نرمال">
                            <span class="icon is-medium is-right">
                            <i class="fas fa-envelope"></i>
                            </span>
                            <span class="icon is-medium is-left">
                            <i class="fas fa-check"></i>
                            </span>
                            </div>
</div>
          

<div class="field">
                            <label class="label is-large">input بزرگ</label>
                            <div class="control has-icons-left has-icons-right">
                            <input class="input is-large" type="email" placeholder="بسیار کوچک">
                            <span class="icon is-small is-right">
                            <i class="fas fa-envelope fa-xs"></i>
                            </span>
                            <span class="icon is-small is-left">
                            <i class="fas fa-check fa-xs"></i>
                            </span>
                            </div>
</div>

<div class="field">
                            <div class="control has-icons-left has-icons-right">
                            <input class="input is-large" type="email" placeholder="کوچک">
                            <span class="icon is-right">
                            <i class="fas fa-envelope fa-sm"></i>
                            </span>
                            <span class="icon is-left">
                            <i class="fas fa-check fa-sm"></i>
                            </span>
                            </div>
</div>

<div class="field">
                            <div class="control has-icons-left has-icons-right">
                            <input class="input is-large" type="email" placeholder="نرمال">
                            <span class="icon is-large is-right">
                            <i class="fas fa-envelope"></i>
                            </span>
                            <span class="icon is-large is-left">
                            <i class="fas fa-check"></i>
                            </span>
                            </div>
</div>

<div class="field">
                            <div class="control has-icons-left has-icons-right">
                            <input class="input is-large" type="email" placeholder="بزرگ">
                            <span class="icon is-medium is-right">
                            <i class="fas fa-envelope fa-lg"></i>
                            </span>
                            <span class="icon is-medium is-left">
                            <i class="fas fa-check fa-lg"></i>
                            </span>
                            </div>
</div>
          

افزودنی های فرم #

اگر می خواهید کنترل ها را به هم متصل کنید، از کلاس اصلاح کننده has-addons در بخش field استفاده کنید:


                            <div class="field has-addons">
                            <div class="control">
                            <input class="input" type="text" placeholder="عبارت مورد نظر را بنویسید">
                            </div>
                            <div class="control">
                            <a class="button is-info">
                  جستجو
                            </a>
                            </div>
                            </div>

فقط می توانید input ها ، button ها و dropdown را ضمیمه کنید.

آن می تواند در افزودن static button مفید باشد.


                            <div class="field has-addons">
                            <p class="control">
                            <input class="input" type="text" placeholder="ایمیل شما">
                            </p>
                            <p class="control">
                            <a class="button is-static">
                  @gmail.com
                            </a>
                            </p>
                            </div>

برای پرکردن فضای باقیمانده (در این حالت ،input) از کلاس اصلاح کننده is-expanded استفاده کنید:


<div class="field has-addons">
                            <p class="control">
                            <span class="select">
                            <select>
                            <option>$</option>
                            <option>£</option>
                            <option></option>
                            </select>
                            </span>
                            </p>
                            <p class="control">
                            <input class="input" type="text" placeholder="مقدار پول">
                            </p>
                            <p class="control">
                            <a class="button">
      انتقال
                            </a>
                            </p>
</div>

<div class="field has-addons">
                            <p class="control">
                            <span class="select">
                            <select>
                            <option>$</option>
                            <option>£</option>
                            <option></option>
                            </select>
                            </span>
                            </p>
                            <p class="control is-expanded">
                            <input class="input" type="text" placeholder="مقدار پول">
                            </p>
                            <p class="control">
                            <a class="button">
      انتقال
                            </a>
                            </p>
</div>
          

اگر می خواهید عرض select dropdown کامل باشد، control is-expanded و select is-fullwidth با هم استفاده کنید.


<div class="field has-addons">
                            <div class="control is-expanded">
                            <div class="select is-fullwidth">
                            <select name="country">
                            <option value="Argentina">Argentina</option>
                            <option value="Bolivia">Bolivia</option>
                            <option value="Brazil">Brazil</option>
                            <option value="Chile">Chile</option>
                            <option value="Colombia">Colombia</option>
                            <option value="Ecuador">Ecuador</option>
                            <option value="Guyana">Guyana</option>
                            <option value="Paraguay">Paraguay</option>
                            <option value="Peru">Peru</option>
                            <option value="Suriname">Suriname</option>
                            <option value="Uruguay">Uruguay</option>
                            <option value="Venezuela">Venezuela</option>
                            </select>
                            </div>
                            </div>
                            <div class="control">
                            <button type="submit" class="button is-primary">انتخاب</button>
                            </div>
</div>
          

از کلاس اصلاح کننده has-addons-centered یا has-addons-left برای تغییر جهت استفاده کنید.


<div class="field has-addons has-addons-centered">
                            <p class="control">
                            <span class="select">
                            <select>
                            <option>$</option>
                            <option>£</option>
                            <option></option>
                            </select>
                            </span>
                            </p>
                            <p class="control">
                            <input class="input" type="text" placeholder="مقدار پول">
                            </p>
                            <p class="control">
                            <a class="button is-primary">
      انتقال
                            </a>
                            </p>
</div>
          
<div class="field has-addons has-addons-right">
<p class="control">
                            <span class="select">
                            <select>
                            <option>$</option>
                            <option>£</option>
                            <option></option>
                            </select>
                            </span>
</p>
<p class="control">
                            <input class="input" type="text" placeholder="مقدار پول">
</p>
<p class="control">
                            <a class="button is-primary">
    انتقال
                            </a>
</p>
</div>
          

Form group #

اگر می خواهید کنترل ها را با هم گروه کنید ، از اصلاح کننده گروه بندی شده در محفظه استفاده کنید. اگر می خواهید کنترل ها را با یکدیگر گروه کنید از کلاس اصلاح کننده is-grouped در بخش field استفاده کنید.


<div class="field is-grouped">
                            <p class="control">
                            <a class="button is-primary">
      ثبت
                            </a>
                            </p>
                            <p class="control">
                            <a class="button is-light">
      انصراف
                            </a>
                            </p>
</div>
          
از کلاس اصلاح کننده is-grouped-centered یا is-grouped-left برای تغییر جهت استفاده کنید.


<div class="field is-grouped is-grouped-centered">
                            <p class="control">
                            <a class="button is-primary">
      ثبت
                            </a>
                            </p>
                            <p class="control">
                            <a class="button is-light">
      انصراف
                            </a>
                            </p>
</div>
          

                            <div class="field is-grouped is-grouped-left">
                            <p class="control">
                            <a class="button is-primary">
                  ثبت
                            </a>
                            </p>
                            <p class="control">
                            <a class="button is-light">
                  انصراف
                            </a>
                            </p>
                            </div>

کلاس اصلاح کننده is-expanded به المان control اضافه کنید تا فضای خالی را پر کند.


<div class="field is-grouped">
                            <p class="control is-expanded">
                            <input class="input" type="text" placeholder="عبارت مورد نظر خود را بنویسید">
                            </p>
                            <p class="control">
                            <a class="button is-info">
      جستجو
                            </a>
                            </p>
</div>
          

کلاس اصلاح کننده is-grouped-multiline به کنترل ها این امکان را میدهد که تا در چندین خط قرار بگیرند. این برای لیست طولانی از کنترل ها مفید است.


                            <div class="field is-grouped is-grouped-multiline">
                            <p class="control">
                            <a class="button">
        یک
                            </a>
                            </p>
                            <p class="control">
                            <a class="button">
        دو
                            </a>
                            </p>
                            <p class="control">
                            <a class="button">
        سه
                            </a>
                            </p>
                            <p class="control">
                            <a class="button">
        چهار
                            </a>
                            </p>
                            <p class="control">
                            <a class="button">
        پنج
                            </a>
                            </p>
                            <p class="control">
                            <a class="button">
        شش
                            </a>
                            </p>
                            <p class="control">
                            <a class="button">
        هفت
                            </a>
                            </p>
                            <p class="control">
                            <a class="button">
        هشت
                            </a>
                            </p>
                            <p class="control">
                            <a class="button">
        نه
                            </a>
                            </p>
                            <p class="control">
                            <a class="button">
        ده
                            </a>
                            </p>
                            <p class="control">
                            <a class="button">
        یازده
                            </a>
                            </p>
                            <p class="control">
                            <a class="button">
        دوازده
                            </a>
                            </p>
                            <p class="control">
                            <a class="button">
        سیزده
                            </a>
                            </p>
                            </div>

List of buttons

اگر فقط به لیست دکمه ها نیاز دارید ، کلاس جدید دکمه ها را امتحان کنید که می توانید با آن لیست چند خطی از دکمه ها را ایجاد کنید. اگر تنها به لیستی از button هانیاز دارید، کلاس buttons را امتحان کنید که با آن می توانید لیست چند خطی از button ها را ایجاد کنید.


فرم افقی #

اگر یک فرم کنترل افقی، می خواهید از کلاس اصلاح کننده is-horizontal در بخش field استفاده کنید، موارد زیر را در آن قرار دهید:

  • field-label برای برچسب های کناری
  • field-body برای بخش input/select/textarea

You can use is-grouped or has-addons برای المان های فرزند.

صفر اول را وارد نکنید

این فیلد اجباریست


<div class="field is-horizontal">
<div class="field-label is-normal">
                            <label class="label">از</label>
</div>
<div class="field-body">
                            <div class="field">
                            <p class="control is-expanded has-icons-left">
                            <input class="input" type="text" placeholder="نام">
                            <span class="icon is-small is-left">
                            <i class="fas fa-user"></i>
                            </span>
                            </p>
                            </div>
                            <div class="field">
                            <p class="control is-expanded has-icons-left has-icons-right">
                            <input class="input is-success" type="email" placeholder="ایمیل" value="test@test.com">
                            <span class="icon is-small is-left">
                            <i class="fas fa-envelope"></i>
                            </span>
                            <span class="icon is-small is-right">
                            <i class="fas fa-check"></i>
                            </span>
                            </p>
                            </div>
</div>
</div>

<div class="field is-horizontal">
<div class="field-label"></div>
<div class="field-body">
                            <div class="field is-expanded">
                            <div class="field has-addons">
                            <p class="control">
                            <a class="button is-static">
          +44
                            </a>
                            </p>
                            <p class="control is-expanded">
                            <input class="input" type="تلفن" placeholder="شماره تلفن شما">
                            </p>
                            </div>
                            <p class="help">صفر را اول وارد نکنید</p>
                            </div>
</div>
</div>

<div class="field is-horizontal">
<div class="field-label is-normal">
                            <label class="label">بحش</label>
</div>
<div class="field-body">
                            <div class="field is-narrow">
                            <div class="control">
                            <div class="select is-fullwidth">
                            <select>
                            <option>توسعه تجاری</option>
                            <option>بازاریابی</option>
                            <option>فروش</option>
                            </select>
                            </div>
                            </div>
                            </div>
</div>
</div>

<div class="field is-horizontal">
<div class="field-label">
                            <label class="label">قبلا عضو شده اید؟</label>
</div>
<div class="field-body">
                            <div class="field is-narrow">
                            <div class="control">
                            <label class="radio">
                            <input type="radio" name="member">
        بلی
                            </label>
                            <label class="radio">
                            <input type="radio" name="member">
        خیر
                            </label>
                            </div>
                            </div>
</div>
</div>

<div class="field is-horizontal">
<div class="field-label is-normal">
                            <label class="label">موضوع</label>
</div>
<div class="field-body">
                            <div class="field">
                            <div class="control">
                            <input class="input is-danger" type="text" placeholder="e.g. Partnership opportunity">
                            </div>
                            <p class="help is-danger">
      این فیلد اجباریست
                            </p>
                            </div>
</div>
</div>

<div class="field is-horizontal">
<div class="field-label is-normal">
                            <label class="label">سوال</label>
</div>
<div class="field-body">
                            <div class="field">
                            <div class="control">
                            <textarea class="textarea" placeholder="توضیح دهید که چگونه می توانیم به شما کمک کنیم"></textarea>
                            </div>
                            </div>
</div>
</div>

<div class="field is-horizontal">
<div class="field-label">
                            <!-- Left empty for spacing -->
</div>
<div class="field-body">
                            <div class="field">
                            <div class="control">
                            <button class="button is-primary">
        ارسال پیام
                            </button>
                            </div>
                            </div>
</div>
</div>
          

برای حفظ تراز عمودی با هر نوع و اندازه ای از کنترل ها، کلاس field-label با 4 کلاس اصلاح کننده سایز ترکیب می شود:

  • is-small
  • is-normal برای هر input یا button
  • is-medium
  • is-large

<div class="field is-horizontal">
                            <div class="field-label">
                            <label class="label">بدون padding</label>
                            </div>
                            <div class="field-body">
                            <div class="field">
                            <div class="control">
                            <label class="checkbox">
                            <input type="checkbox">
          چک باکس
                            </label>
                            </div>
                            </div>
                            </div>
</div>

<div class="field is-horizontal">
                            <div class="field-label is-small">
                            <label class="label">padding کم</label>
                            </div>
                            <div class="field-body">
                            <div class="field">
                            <div class="control">
                            <input class="input is-small" type="text" placeholder="input کوچک">
                            </div>
                            </div>
                            </div>
</div>

<div class="field is-horizontal">
                            <div class="field-label is-normal">
                            <label class="label">برچسب نرمال</label>
                            </div>
                            <div class="field-body">
                            <div class="field">
                            <div class="control">
                            <input class="input" type="text" placeholder="input نرمال">
                            </div>
                            </div>
                            </div>
</div>

<div class="field is-horizontal">
                            <div class="field-label is-medium">
                            <label class="label">برچسب متوسط</label>
                            </div>
                            <div class="field-body">
                            <div class="field">
                            <div class="control">
                            <input class="input is-medium" type="text" placeholder="input نرمال">
                            </div>
                            </div>
                            </div>
</div>

<div class="field is-horizontal">
                            <div class="field-label is-large">
                            <label class="label">برچسب بزرگ</label>
                            </div>
                            <div class="field-body">
                            <div class="field">
                            <div class="control">
                            <input class="input is-large" type="text" placeholder="Large sized input">
                            </div>
                            </div>
                            </div>
</div>
          

فرم غیرفعال #

Since 0.7.4

با قرار دان مجموعه ای از کنترل ها در بخش fieldset با ویژگی HTML disabled می توانید یک بخش یا کل فرم را غیر فعال کنید.


<fieldset disabled>
  
<div class="field">
                            <label class="label">نام</label>
                            <div class="control">
                            <input class="input" type="text" placeholder="نام شما">
                            </div>
</div>

<div class="field">
                            <label class="label">ایمیل</label>
                            <div class="control">
                            <input class="input" type="email" placeholder="ایمیل شما">
                            </div>
</div>

</fieldset>
          

متغیرها #

عناصر فرم را می توان با استفاده از متغیرهای عمومی زیر سفارشی کرد. قبل از وارد کردن Bulma ، کافی است یک یا چند مورد از این متغیرها را تنظیم کنید. یاد بگیرید چگونه.

نام نوع مقدار پیش فرض مقدار محاسبه شده
نام نوع مقدار پیش فرض مقدار محاسبه شده
$control-radius size $radius 4px
$control-radius-small size $radius-small 2px
$control-padding-vertical size calc(0.5em - #{$control-border-width})
$control-padding-horizontal size calc(0.75em - #{$control-border-width})
Name Type Default value Computed value
Name Type Default value Computed value
$label-color color $grey-darker hsl(0, 0%, 21%)
$label-weight font-weight $weight-bold 700
$help-size size $size-small 0.75rem