ورودی‌های فرم (بیشتر)

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو

کنترل استاتیک

اگر می‌خواهید متن ساده‌ای را در کنار برچسب فرم، درون یک فرم افقی وارد کنید، از کلاس .form-control-static در عنصر <p> استفاده کنید:[۱]

مثال

<form class="form-horizontal">
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">Email:</label>
    <div class="col-sm-10">
      <p class="form-control-static">someone@example.com</p>
    </div>
  </div>
</form>


مشاهدهٔ نتیجه


گروه های ورودی بوت استرپ

کلاس .input-group یک ظرف (Container) برای تقویت یک ورودی با اضافه کردن آیکون، متن یا کلید در جلو یا پشت آن بعنوان «متن راهنما» است.

کلاس .input-group-addon یک آیکون یا متن راهنما را در کنار فیلد ورودی قرار می‌دهد.


مثال

<form>
  <div class="input-group">
    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
    <input id="email" type="text" class="form-control" name="email" placeholder="Email">
  </div>
  <div class="input-group">
    <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
    <input id="password" type="password" class="form-control" name="password" placeholder="Password">
  </div>
  <div class="input-group">
    <span class="input-group-addon">Text</span>
    <input id="msg" type="text" class="form-control" name="msg" placeholder="Additional Info">
  </div>
</form>


مشاهدهٔ نتیجه


.input-group-btn یک کلید را در کنار ورودی قرار می‌دهد. این کلاس اغلب با نوار جستجو با هم استفاده می‌شوند.


مثال

<form>
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Search">
    <div class="input-group-btn">
      <button class="btn btn-default" type="submit">
        <i class="glyphicon glyphicon-search"></i>
      </button>
    </div>
  </div>
</form>


مشاهدهٔ نتیجه


حالت های کنترل فرم بوت استرپ

  • تمرکز ورودی - طرح کلی (outline) ورودی حذف شده و یک box-shadow در نقطه تمرکز (Focus) اعمال می‌شود
  • ورودی‌های غیرفعال - ویژگی disabled را برای غیرفعال کردن فیلد ورودی استفاده کنید
  • مجموعه فیلد های (Feildsets) غیرفعال - یک ویژگی disabled به یک مجموعه فیلد اضافه کنید با همهٔ کنترل‌های درون آن غیرفعال شوند
  • ورودی‌های فقط خواندنی - ویژگی readonly را یه یک ورودی اضافه کنید تا از ورودی‌های کاربر جلوگیری کند
  • حالت‌های اعتبارسنجی - بوت استرپ شامل حالت‌های اعتبارسنجی برای پیام‌های خطا، هشدار و موفقیت آمیز است. برای استفاده از این ویژگی .has-warning، .has-error یا .has-success را به عنصر والد اضافه کنید
  • آیکون‌ها - می‌توانید با استفاده از کلاس .has-feedback و یک آیکون، آیکون‌های بازخورد ایجاد کنید
  • برچسب‌های پنهان - به برچسب‌های غیرقابل مشاهده کلاس .sr-only اضافه کنید

مثال زیر برخی از حالت‌های کنترل فرم بالا را در یک فرم افقی نشان می‌دهد:

مثال

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Focused</label>
    <div class="col-sm-10">
      <input class="form-control" id="focusedInput" type="text" value="Click to focus">
    </div>
  </div>
  <div class="form-group">
    <label for="disabledInput" class="col-sm-2 control-label">Disabled</label>
    <div class="col-sm-10">
      <input class="form-control" id="disabledInput" type="text" disabled>
    </div>
  </div>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput" class="col-sm-2 control-label">Fieldset disabled</label>
      <div class="col-sm-10">
        <input type="text" id="disabledTextInput" class="form-control">
      </div>
    </div>
    <div class="form-group">
      <label for="disabledSelect" class="col-sm-2 control-label"></label>
      <div class="col-sm-10">
        <select id="disabledSelect" class="form-control">
          <option>Disabled select</option>
        </select>
      </div>
    </div>
  </fieldset>
  <div class="form-group has-success has-feedback">
    <label class="col-sm-2 control-label" for="inputSuccess">
    Input with success and icon</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputSuccess">
      <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
  </div>
  <div class="form-group has-warning has-feedback">
    <label class="col-sm-2 control-label" for="inputWarning">
    Input with warning and icon</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputWarning">
      <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
    </div>
  </div>
  <div class="form-group has-error has-feedback">
    <label class="col-sm-2 control-label" for="inputError">
    Input with error and icon</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputError">
      <span class="glyphicon glyphicon-remove form-control-feedback"></span>
    </div>
  </div>
</form>


مشاهدهٔ نتیجه


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

مثال

<form class="form-inline">
  <div class="form-group">
    <label for="focusedInput">Focused</label>
    <input class="form-control" id="focusedInput" type="text">
  </div>
  <div class="form-group">
    <label for="inputPassword">Disabled</label>
    <input class="form-control" id="disabledInput" type="text" disabled>
  </div>
  <div class="form-group has-success has-feedback">
    <label for="inputSuccess2">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess2">
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
  </div>
  <div class="form-group has-warning has-feedback">
    <label for="inputWarning2">Input with warning</label>
    <input type="text" class="form-control" id="inputWarning2">
    <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
  </div>
  <div class="form-group has-error has-feedback">
    <label for="inputError2">Input with error</label>
    <input type="text" class="form-control" id="inputError2">
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>
  </div>
</form>


مشاهدهٔ نتیجه


منابع آموزشی