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

فرم ها در Bootstrap

Bootstrap با CSS

در این فصل ، ما به بررسی نحوه ایجاد فرم ها به روش ساده با استفاده از Bootstrap خواهیم پرداخت. بوت استرپ ، این کار را با نشانه گذاری ساده HTML و کلاس های گسترده ای که برای سبک های مختلف فرم ها وجود دارند ، تسهیل می کند. در این فصل ما به بررسی نحوه ایجاد فرم ها با روش ساده ای که Bootstrap در اختیار ما قرار می دهد ، می پردازیم.

چیدمان فرم

Bootstrap انواع چیدمان های فرم زیر را برای ما فراهم می کند :

• فرم عمودی (پیش فرض)
• فرم In-line
• فرم افقی

فرم عمودی یا فرم پایه

کنترل های تکی فرم ، به طور خودکار برخی از سبک بندی های سراسری را دریافت می کنند. برای  ایجاد یک فرم پایه به ترتیب زیر عمل می کنیم :

• یک نقش form را به عنصر والد <form> اضافه می کنیم.
• برچسب ها و کنترل ها را در یک تگ <div> با کلاس .form-group قرار می دهیم. این کار برای فاصله گذاری مناسب ، لازم است.
• یک کلاس form-control. را به تمام عناصر <input> ، <textarea> و <select> متنی اضافه می کنیم.

<form role = "form">

   <div class = "form-group">
      <label for = "name">Name</label>
      <input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
   </div>
   
   <div class = "form-group">
      <label for = "inputfile">File input</label>
      <input type = "file" id = "inputfile">
      <p class = "help-block">Example block-level help text here.</p>
   </div>
   
   <div class = "checkbox">
      <label><input type = "checkbox"> Check me out</label>
   </div>
   
   <button type = "submit" class = "btn btn-default">Submit</button>
</form>

خروجی قطعه کد فوق ، به صورت زیر می باشد :

فرم Inline

برای ایجاد یک فرم که در آن تمام عناصر به صورت inline (درون خطی) هستند ، برای این کار ، کلاس form-inline. را به تگ <form> اضافه می کنیم.

<form class = "form-inline" role = "form">
   
   <div class = "form-group">
      <label class = "sr-only" for = "name">Name</label>
      <input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
   </div>
   
   <div class = "form-group">
      <label class = "sr-only" for = "inputfile">File input</label>
      <input type = "file" id = "inputfile">
   </div>
   
   <div class = "checkbox">
      <label><input type = "checkbox"> Check me out</label>
   </div>
   
   <button type = "submit" class = "btn btn-default">Submit</button>
</form>

خروجی قطعه کد فوق ، به صورت زیر می باشد :

• ورودی های پیش فرض ، انتخاب ها (select) و textareas در بوت استرپ دارای عرض 100٪ هستند. هنگام استفاده از فرم inline (درون خطی) ، باید در کنترل های فرم ، مقدار width را تنظیم کنیم.

• با استفاده از کلاس sr-only. می توانیم برچسب فرم های Inline را پنهان کنیم.

فرم های افقی

فرم های افقی جدا از دیگر فرم ها هستند ، این تفاوت ، نه تنها در میزان نشانه گذاری ، بلکه در نحوه نمایش فرم نیز است. برای ایجاد یک فرم که از چیدمان افقی استفاده می کند ، مطابق مراحل زیر عمل می نماییم :

• یک کلاس form-horizontal. را به عنصر <form> اضافه می کنیم.
• برچسب ها و کنترل ها را در یک تگ <div> با کلاس form-group. قرار می دهیم.
• یک کلاس control-label به برچسب ها اضافه می کنیم.

<form class = "form-horizontal" role = "form">
   
   <div class = "form-group">
      <label for = "firstname" class = "col-sm-2 control-label">First Name</label>
		
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "firstname" placeholder = "Enter First Name">
      </div>
   </div>
   
   <div class = "form-group">
      <label for = "lastname" class = "col-sm-2 control-label">Last Name</label>
		
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "lastname" placeholder = "Enter Last Name">
      </div>
   </div>
   
   <div class = "form-group">
      <div class = "col-sm-offset-2 col-sm-10">
         <div class = "checkbox">
            <label><input type = "checkbox"> Remember me</label>
         </div>
      </div>
   </div>
   
   <div class = "form-group">
      <div class = "col-sm-offset-2 col-sm-10">
         <button type = "submit" class = "btn btn-default">Sign in</button>
      </div>
   </div>
	
</form>

خروجی قطعه کد فوق ، به صورت زیر می باشد :

کنترل های پشتیبانی شده فرم

Bootstrap ، به طور بومی رایج ترین کنترل های فرم را که به طور عمده شامل input ، textarea ، checkbox ، radio ، و select هستند ، پشتیبانی می کند.

کنترل Input

متداول ترین شکل فیلد متنی ، فیلد input (ورودی) است. این فیلد ، جایی است که کاربران ، بسیاری از داده های اصلی را در آن وارد می کنند. Bootstrap پشتیبانی از تمام انواع ورودی HTML5 بومی را فراهم می کند ، که عبارتند از : text ، password ، datetime ، datetime محلی، date ، month ، time ، week  number ، email ، url ، search ، tel و color . اعلام (declaration) نوع ورودی مناسب ، لازم است تا ورودی ها به طور کامل سبک بندی شوند.

<form role = "form">
   
   <div class = "form-group">
      <label for = "name">Label</label>
      <input type = "text" class = "form-control" placeholder = "Text input">
   </div>
  
</form>

خروجی قطعه کد بالا ، به صورت زیر است :

Textarea

Textarea زمانی استفاده می شود که ما نیاز به چند خط ورودی داشته باشیم. صفت rows را در صورت لزوم تغییر می دهیم (ردیف های کمتر = کادر کوچک تر، ردیف های بیشتر = کادر بزرگ تر).

<form role = "form">
   
   <div class = "form-group">
      <label for = "name">Text Area</label>
      <textarea class = "form-control" rows = "3"></textarea>
   </div>
   
</form>

خروجی قطعه کد فوق ، به صورت زیر است :

CheckBox ها و Radio Button ها

CheckBox ها و Radio Button زمانی عالی عمل می کنند که ما بخواهیم کاربران از یک لیست ، گزینه های از پیش تعیین شده را انتخاب نمایند.

• هنگام ساخت یک فرم ، اگر بخواهیم کاربر هر تعداد از گزینه های یک لیست را انتخاب نماید ، از checkbox استفاده کنید. اگر بخواهیم کاربر را محدود به انتخاب فقط یک گزینه نماییم ، از radio استفاده می کنیم.
• از کلاس checkbox-inline. یا radio-inline. برای مجموعه ای از checkbox ها یا radio ها جهت اعمال کنترل ها در همان خط استفاده می کنیم.

مثال زیر هر دو این موارد (default و inline) را نشان می دهد :

<label for = "name">Example of Default Checkbox and radio button </label>

<div class = "checkbox">
   <label>
      <input type = "checkbox" value = "">Option 1
   </label>
</div>

<div class = "checkbox">
   <label>
      <input type = "checkbox" value = "">Option 2
   </label>
</div>

<div class = "radio">
   <label>
      <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" checked> Option 1
   </label>
</div>

<div class = "radio">
   <label>
      <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2">
      Option 2 - selecting it will deselect option 1
   </label>
</div>

<label for = "name">Example of Inline Checkbox and radio button </label>

<div>
   <label class = "checkbox-inline">
      <input type = "checkbox" id = "inlineCheckbox1" value = "option1"> Option 1
   </label>
   
   <label class = "checkbox-inline">
      <input type = "checkbox" id = "inlineCheckbox2" value = "option2"> Option 2
   </label>
   
   <label class = "checkbox-inline">
      <input type = "checkbox" id = "inlineCheckbox3" value = "option3"> Option 3
   </label>
   
   <label class = "checkbox-inline">
      <input type = "radio" name = "optionsRadiosinline" id = "optionsRadios3" value = "option1" checked> Option 1
   </label>
   
   <label class = "checkbox-inline">
      <input type = "radio" name = "optionsRadiosinline" id = "optionsRadios4" value = "option2"> Option 2
   </label>
</div>

خروجی قطعه کد فوق ، به صورت زیر است :

انتخاب ها

یک انتخاب (select) زمانی استفاده می شود که بخواهیم به کاربر اجازه دهیم از میان گزینه های چندتایی ،  انتخاب نماید ، اما به طور پیش فرض این انتخاب فقط شامل یک گزینه می شود.

• از تگ <select> برای لیست گزینه ها که برای کاربر آشنا هست ، استفاده می کنیم ، همانند اعداد یا حالت ها.
• از multiple = “multiple” برای اجازه دادن به کاربر جهت انتخاب بیش از یک گزینه ، استفاده می نماییم.

مثال زیر هر دو این موارد (select و multiple) را نشان می دهد :

<form role = "form">
   
   <div class = "form-group">
      <label for = "name">Select list</label>
      
      <select class = "form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>

      <label for = "name">Mutiple Select list</label>
      
      <select multiple class = "form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>
      
   </div>
	
</form>

خروجی قطعه کد بالا ، به صورت زیر است :

کنترل Static

از کلاس form-control-static. در یک تگ <p> ، زمانی که نیاز داشته باشیم یک متن ساده را بعد از برچسب فرم درون یک فرم افقی جا دهیم ، استفاده می کنیم.

<form class = "form-horizontal" role = "form">
   <div class = "form-group">
      <label class = "col-sm-2 control-label">Email</label>
      
      <div class = "col-sm-10">
         <p class = "form-control-static">email@example.com</p>
      </div>
      
   </div>
   
   <div class = "form-group">
      <label for = "inputPassword" class = "col-sm-2 control-label">Password</label>
      
      <div class = "col-sm-10">
         <input type = "password" class = "form-control" id = "inputPassword" placeholder = "Password">
      </div>
      
   </div>
</form>

خروجی قطعه کد فوق ، به صورت زیر است :

حالت های کنترل فرم

علاوه بر حالت focus: (یعنی ، یک کاربر بر روی ورودی یا زبانه های روی آن کلیک می کند) ، Bootstrap یک سبک بندی را برای ورودی ها و کلاس های غیر فعال جهت اعتبارسنجی فرم ارائه می دهد.

Input Focus

هنگامی که یک ورودی focus: را دریافت می کند ، زمینه ورودی حذف می شود و یک کادر سایه
(box-shadow) بر روی آن اعمال می شود.

ورودی غیرفعال

اگر نیاز به غیر فعال کردن ورودی داشته باشیم ، به سادگی با اضافه کردن صفت disabled نه تنها آن را غیر فعال خواهیم کرد ؛ بلکه هنگامی که مکان نما بر روی عنصر قرار می گیرد ، سبک بندی و مکان نمای موس نیز تغییر خواهد کرد.

Fieldset های غیرفعال شده

صفت disabled را به تگ <fieldset> اضافه می کنیم ، تا تمام کنترل های درون <fieldset> ، به یک باره غیرفعال شوند.

حالت اعتبارسنجی

Bootstrap شامل سبک های اعتبارسنجی برای خطاها ، هشدارها و پیام های موفقیت است. برای استفاده از این سبک ها ، به سادگی کلاس مناسب (.has-warning ، .has-error ، یا has-success. ) را به عنصر والد اضافه می کنیم.

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

<form class = "form-horizontal" role = "form">

   <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 = "This is focused...">
      </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 input here..." disabled>
      </div>
   </div>
   
   <fieldset disabled>
      <div class = "form-group">
         
         <label for = "disabledTextInput"  class = "col-sm-2 control-label">
            Disabled input (Fieldset disabled)
         </label>
         
         <div class = "col-sm-10">
            <input type = "text" id = "disabledTextInput" class = "form-control" placeholder = "Disabled input">
         </div>
      </div>
      
      <div class = "form-group">
         <label for = "disabledSelect"  class = "col-sm-2 control-label">
            Disabled select menu (Fieldset disabled)
         </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">
      <label class = "col-sm-2 control-label" for = "inputSuccess">
         Input with success
      </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">
         Input with warning
      </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">
         Input with error
      </label>
      
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "inputError">
      </div>
      
   </div>
	
</form>

خروجی قطعه کد فوق ، به صورت زیر می باشد :

اندازه گیری کنترل فرم

ارتفاع و عرض فرم ها را می توانیم با استفاده از کلاس هایی مانند input-lg. و *-col-lg. (به ترتیب ) تنظیم کنیم. مثال زیر این مورد را نشان می دهد :

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

کنترل های فرم Bootstrap می توانند حاوی یک متن کمکی (help text) باشند که با ورودی ها جریان دارد. برای اضافه کردن یک بلوک از محتوا با عرض کامل ، پس از تگ <input>، از کلاس help-block. استفاده می کنیم. مثال زیر این عمل را نشان می دهد :

<form role = "form">
   <span>Example of Help Text</span>
   <input class = "form-control" type = "text" placeholder = "">
   
   <span class = "help-block">
      A longer block of help text that breaks onto a new line and may extend beyond one line.
   </span>
	
</form>

خروجی قطعه کد بالا ، به صورت زیر است :