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

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

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش فرم ها در بوت استرپ خواهیم پرداخت.

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

طرح بندی فرم

بوت استرپ انواع زیر را به شما می دهد:

• فرم عمودی (پیش فرض)
• فرم در خط
• فرم افقی

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

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

یک فرم نقش به عنصر <form> والدین اضافه کنید.

برچسب ها و کنترل ها را در <div> با گروه .form-group قرار دهید. این برای فاصله بهینه مورد نیاز است.

به همه عناصر <input> ، <textarea> و <select> یک کلاس از .form-control اضافه کنید.

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

فرم درون خطی

برای ایجاد فرمی که تمام عناصر به صورت درون خطی قرار دارند ، تراز سمت چپ و تگ ها در کنار هم هستند ، کلاس .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>

به طور پیش فرض ورودی ها، متن انتخاب ها و متن دارای ۱۰۰٪ عرض در بوت استرپ هستند. هنگام استفاده از فرم درون خطی، باید روی کنترل های فرم عرض تنظیم کنید.

با استفاده از کلاس sr. فقط می توانید برچسب فرم های درون خطی را پنهان کنید.

فرم افقی

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

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

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

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

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

ورودی ها

متداولترین قسمت متن فرم، قسمت ورودی است. این جایی است که کاربران بیشتر داده های اصلی فرم را وارد می کنند. بوت استرپ پشتیبانی از همه انواع ورودی HTML5 بومی را ارائه می دهد: متن ، رمز ورود، زمان قرارگیری، زمان محلی، تاریخ، ماه، زمان، هفته، شماره، ایمیل، آدرس اینترنتی، جستجو، تلفن و رنگ. برای فرم دهی کامل ورودی ها نیاز به اعلام نوع مناسب است.

<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 هنگامی استفاده می شود که به چندین خط ورودی نیاز داشته باشید. در صورت لزوم ویژگی ردیف ها را تغییر دهید (ردیف های کمتر = کادر کوچکتر ، ردیف های بیشتر = کادر بزرگتر).

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

جعبه های چک و دکمه های رادیو

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

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

از کلاس .checkbox-inline یا .radio-inline استفاده کنید تا مجموعه ای از کادرهای انتخاب یا رادیوها برای کنترل ها در همان خط ظاهر شوند.

مثال زیر هر دو نوع (پیش فرض و درون خطی) را نشان می دهد –

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

انتخاب ها

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

از <select> برای گزینه های لیست که کاربر با آنها آشنا است مانند حالت ها یا اعداد استفاده کنید.

از multiple = “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>

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

هنگامی که می خواهید متن ساده را در کنار یک برچسب فرم در یک فرم افقی قرار دهید ، از کلاس .form-control-static استفاده کنید.

<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 یک سبک برای ورودی ها و کلاس های غیرفعال شده برای اعتبار سنجی فرم ارائه می دهد.

کانون ورودی

هنگامی که ورودی دریافت می کند: فوکوس ، رئوس مطالب ورودی برداشته می شود و یک سایه جعبه ای اعمال می شود.

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

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

مجموعه های زمینه غیرفعال

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

 اعتبار سنجی

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

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

<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 = “input پیش فرض”>
</div>

<div class = “form-group”>
<input class = “form-control input-sm” type = “text” placeholder = “.input-sm”>
</div>

<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. بعد از <input> استفاده کنید. مثال زیر این را نشان می دهد –

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

منبع.

لیبست جلسات قبل آموزش بوت استرپ

1. آموزش بوت استرپ
2.  بررسی اجمالی بوت استرپ
3. آموزش راه اندازی بوت استرپ
4. آموزش سیستم شبکه در بوت استرپ 
5. بررسی اجمالی CSS در بوت استرپ
6. آموزش تایپوگرافی در بوت استرپ 
7. آموزش کد در بوت استرپ 
8. آموزش جدول در بوت استرپ