فر

saeed410 · Dec 19, 2014

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

در قسمت قبل با استایل های مختلف دکمه ها در بوت استرپ آشنا شدیم. فرم ها وظیفه دریافت اطلاعات و تعامل با کاربر را دارند. در این قسمت با استایل های مختلفی که بوت استرپ

برای فرم ها در نظر گرفته است آشنا می شویم. با استفاده از کلاس های آماده بوت استرپ قادر خواهید بود به آسانی و به سرعت فرم های واکنش گرا

ایجاد کنید:
لایه بندی فرم ها در بوت استرپ :

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

فرم های عمودی (پیش فرض - Default)
فرم های درون خطی (inline forms)
فرم های افقی

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

برای ایجاد یک فرم در بوت استرپ مراحل زیر را انجام دهید:

یک نقش (role) با عنوان form به تگ form اصلی بدهید
تمام کنترل های درون تگ form را داخل یک div با کلاس form-group قرار دهید. با استفاده از این کلاس ایجاد فاصله بهینه بین کنترل های فرم بهینه میشود.
به تمام کنترل های متنی با تگ های input,textarea, select یک کلاس به نام form-control اضافه کنید.

مثال :

<div class="container">
<div class="row">
<div class="col-md-6">
<form role="form">
<div class="form-group">
<label for="name">نام</label>
<input type="text" class="form-control" id="name"
placeholder="نام خود را وارد کنید">
</div>
<div class="form-group">
<label for="inputfile">آپلود فایل </label>
<input type="file" id="inputfile">
<p class="help-block">متن کمکی برای آپلود.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> چک باکس
</label>
</div>
<button type="submit" class="btn btn-success">ثبت </button>
</form>
</div>
</div>
</div>

تصویر نمونه این کد:

فرمهای درون خطی در بوت استرپ :

برای ایجاد یک فرم درون خطی از کلاس form-inline را به تگ form اضافه کنید.مثال :

<div class="container">
<div class="row">
<form role="form" class="form-inline"">
<div class="form-group">
<label for="name">نام</label>
<input type="text" class="form-control" id="name"
placeholder="نام خود را وارد کنید">
</div>
<div class="form-group">
<label for="inputfile">آپلود فایل </label>
<input type="file" id="inputfile">
<p class="help-block">متن کمکی برای آپلود.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> چک باکس
</label>
</div>
<button type="submit" class="btn btn-success">ثبت </button>
</form>
</div>
</div>

تصویر نمونه کد :

نکته برای پنهان کردن هر کنترل در فرم های درون خطی میتوانید کلاس sr-only را به آن اضافه کنید.
به صورت پیش فرض تگ های textarea,input,select در بوت استرپ دارای عرض 100 درصدی هستند. هنگام استفاده از آنها در فرم های درون خطی عرض آنها را ست کنید.

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

برای ایجاد فرم های افقی در بوت استرپ کلاس form-horizontal را به تگ form اصلی خود اضافه کنید. مثال :

<form class="form-horizontal" role="form">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">نام </label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname"
placeholder="نام خود را وارد کنید">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">نام خانوادگی</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="lastname"
placeholder="نام خانوادگی را وارد کنید">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> من را بخاطر بسپار
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-danger">ورود</button>
</div>
</div>
</form>

تصویر نمونه کد :

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

بوت استرپ از اکثر کنترل های فرم پشتیبانی میکند این کنترل ها عبارتند از : input,textarea,checkbox,radio,select
تگ های input در بوت استرپ :

از این تگ در اکثر مواقع برای دریافت ورودی از کاربر استفاده میشود. علاوه بر این بوت استرپ تمام انواع ورودی که در html 5 تعریف شده است پشتیبانی میکند. این انواع عبارتند از : text,password,datetime,datetime-local,date,month,time,week,number,email,url,color
مثال :

تصویر:

تگ TEXTAREA :

از این تگ زمانی استفاده می شود که میخواهید ورودی داشته باشید که شامل چند خط است . برای تعیین تعداد خطوط میتوانید از ویژگی rows استفاده کنید.
مثال :

<form role="form">
<div class="form-group">
<label for="name">ورودی متن چند خطی</label>
<textarea class="form-control" rows="3"></textarea>
</div>
</form>

تصویر :

چک باکس ها و رادیو ها :

از چک باکس ها و رادیوها زمانی استفاده میشود که میخواهید کاربر یک یا چند مورد را انتخاب کند:

از چک باکس زمانی استفاده کنید که میخواهید کاربر توانایی انتخاب چند یا همه گزینه ها را داشته باشد. از رادیوها زمانی استفاده کنید که میخواهید کاربر توانایی انتخاب فقط یک گزینه را داشته باشد.
برای ایجاد چک باکس درون خطی به صورتی که تمام آنها در یک خط قرار بگیرند از کلاس checkbox-inline استفاده کنید. همچنین برای قرار دادن تمام رادیوها در یک خط میتوانید از کلاس radio-inline استفاده کنید.

در مثال زیر هم نوع درون خطی و هم نوع پیش فرض را گنجانده ایم :

<label for="name"> مثال چک باکس و رادیو به صورت پیش فرض </label>
<div class="checkbox">
<label><input type="checkbox" value="">گزینه 1</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">گزینه 2</label>
</div>

<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1"
value="option1" checked> گزینه 1
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2"
value="option2">
گزینه 2. در صورتی که این را انتخاب کنید ؛رادیوی گزینه 1 غیر فعال میشود
</label>
</div>
<label for="name">مثال چک باکس و رادیوی درون خطی </label>
<div>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> گزینه 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> گزینه 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> گزینه 3
</label>
<label class="checkbox-inline">
<input type="radio" name="optionsRadiosinline" id="optionsRadios3"
value="option1" checked> گزینه 1
</label>
<label class="checkbox-inline">
<input type="radio" name="optionsRadiosinline" id="optionsRadios4"
value="option2"> گزینه 2
</label>
</div>

تصویر مثال :

تگ select :

از این تگ میتوانید زمانی استفاده کنید که میخواهید یک لیست از انتخاب ها را در اختیار کاربر قرار دهید. به صورت پیش فرض کاربر فقط میتواند یک گزینه را از لیست انتخاب کنید.

از تگ <select> برای ایجاد یک لیست استفاده کنید.در حالت تک انتخابی لیست به صورت Drop Down یا بازشو به وجود می آید.
از ویژگی multiple برای امکان انتخاب چندین گزینه توسط کاربر استفاده کنید.

مثال :
در این مثال هر دو نوع را قرار داده ایم:

<form role="form">
<div class="form-group">
<label for="name">لیست انتخابی</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

<label for="name">لیست انتخابی با امکان چند انتخاب</label>
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</form>

تصویر :

کنترل های ایستا در بوت استرپ :

از کلاس form-control-static برای ایجاد فیلدهای ایستا استفاده کنید. برای این کار یک تگ p ایجاد کنید. سپس کلاس form-control-static را به این تگ اختصاص دهید و داخل تگ p کنترلهای ایستا را قرار دهید. مثال :

<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">ایمیل</label>
<div class="col-sm-10">
<p class="form-control-static">[email protected]</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">رمز عبور</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword"
placeholder="رمز خود را وارد کنید">
</div>
</div>
</form>

تصویر :

وضعیت های مختلف کنترلهای فرم در بوت استرپ:

بوت استرپ برای وضعیت های مختلفی مثل فاکوس روی یک کنترل ، غیر فعال کردن برخی ازورودی ها ، و اعتبارسنجی فرم ها نیز کلاسهایی را از پیش آماده کرده است :
INPUT FOCUS :

زمانی که ویژگی فاکوس را روی یک input فعال میکنیم ؛ هنگامی که کاربر روی آن ورودی قرار میگیرد ویژگی box-shadow به ورودی اعمال میشود.
ورودی های غیر فعال :

برای غیر فعال کردن یک ورودی ؛ از ویژگی disabled برای آن استفاده کنید.
فیلدست های غیر فعال :

برای غیر فعال کردن تمام کنترل های داخل یک fieldset از ویژگی disabled داخل تگ <fieldset> استفاده کنید.
وضعیت های اعتبارسنجی :

بوت استرپ برای پیام های خطا ، موفقیت و اخطار کلاسهایی را از قبل آماده کرده است.
مثال :

<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">فاکوس</label>
<div class="col-sm-10">
<input class="form-control" id="focusedInput" type="text"
value="این فیلد فاکوس شده است">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">
Disabled
</label>
<div class="col-sm-10">
<input class="form-control" id="disabledInput" type="text"
placeholder="ورودی غیر فعال" disabled>
</div>
</div>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput" class="col-sm-2 control-label">
ورودی غیر فعال (با استفاه از فیلدست)
</label>
<div class="col-sm-10">
<input type="text" id="disabledTextInput" class="form-control"
placeholder="ورودی غیر فعال">
</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>کنترل انتخاب-غیر فعال</option>
</select>
</div>
</div>
</fieldset>
<div class="form-group has-success">
<label class="col-sm-2 control-label" for="inputSuccess">
ورودی موفق
</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputSuccess">
</div>
</div>
<div class="form-group has-warning">
<label class="col-sm-2 control-label" for="inputWarning">
ورودی اخطار
</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputWarning">
</div>
</div>
<div class="form-group has-error">
<label class="col-sm-2 control-label" for="inputError">
ورودی با خطا
</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputError">
</div>
</div>
</form>

تصویر :

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

برای تغییر اندازه فرم ها میتوانید از کلاسهای input-lg و col-lg-somthing استفاده کنید. روش استفاده از این کلاسها با مثال به صورت زیر است :

<form role="form">
<div class="form-group">
<input class="form-control input-lg" type="text"
placeholder=".input-lg">
</div>

<div class="form-group">
<input class="form-control" type="text" placeholder="Default input">
</div>

<div class="form-group">
<input class="form-control input-sm" type="text"
placeholder=".input-sm">
</div>
<div class="form-group">
</div>
<div class="form-group">
<select class="form-control input-lg">
<option value="">.input-lg</option>
</select>
</div>
<div class="form-group">
<select class="form-control">
<option value="">Default select</option>
</select>
</div>
<div class="form-group">
<select class="form-control input-sm">
<option value="">.input-sm</option>
</select>
</div>

<div class="row">
<div class="col-lg-2">
<input type="text" class="form-control" placeholder=".col-lg-2">
</div>
<div class="col-lg-3">
<input type="text" class="form-control" placeholder=".col-lg-3">
</div>
<div class="col-lg-4">
<input type="text" class="form-control" placeholder=".col-lg-4">
</div>
</div>
</form>

تصویر دمو:

متن های کمکی در بوت استرپ :

بوت استرپ برای ایجاد متنهای کمکی در فرم ها از کلاس help-block استفاده میکند. شیوه استفاده از این کلاس با مثال به صورت زیر است :

تصویر دمو:

در قسمت بعد با بعضی از کلاسهای کمکی در بوت استرپ آشنا خواهیم شد.
در گروه: بوت استرپ و CSS
منبع: طراحی سایت