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

با سلام خدمت شما همراهان عزیز وب سایت پرنیان طرح

با آموزش مبحث input ها در بوت استرپ در خدمت شما هستیم.

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

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

۰ input

. textarea

. checkbox

. radio

. select

ورودی بوت استرپ (Bootstrap Input):

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

متن ، گذرواژه ، تاریخ ، زمان محلی ، ماه ، ساعت ، هفته ، ایمیل ، آدرس اینترنتی ، جستجو ، تلفن و رنگ.

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

مثال زیر شامل دو عنصر ورودی است : یکی از نوع متن ، و دیگری از نوع رمز عبور است.

همانطور که در مبحث فرم ها ذکر کردیم از کلاس form-control. برای استایل ورودی های با پهنای عریض و فاصله ی مناسب و غیره استفاده میکنیم.

مثال :

[php]

<form action=”/action_page.php”>
<div class=”form-group”>
<label for=”usr”>Name:</label>
<input type=”text” class=”form-control” id=”usr” name=”username”>
</div>
<div class=”form-group”>
<label for=”pwd”>Password:</label>
<input type=”password” class=”form-control” id=”pwd” name=”password”>
</div>
<button type=”submit” class=”btn btn-primary”>Submit</button>
</form>

[/php]

خروجی این مثال را در تصویر زیر ببینید:

Bootstrap Textarea :

مثال زیر شامل یک ورودی از نوع textarea است:

مثال:

[php]

<form action=”/action_page.php”>
<div class=”form-group”>
<label for=”comment”>Comment:</label>
<textarea class=”form-control” rows=”5″ id=”comment” name=”text”></textarea>
</div>
<button type=”submit” class=”btn btn-primary”>Submit</button>
</form>

[/php]

تصویر مثال بالا :

Bootstrap Checkboxes :

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

مثال زیر شامل ۳ کادر باکس است که آخرین گزینه ی آن غیر فعال است.

مثال:

[php]

<form action=”/action_page.php”>
<div class=”form-check”>
<label class=”form-check-label” for=”check1″>
<input type=”checkbox” class=”form-check-input” id=”check1″ name=”option1″ value=”something” checked>Option 1
</label>
</div>
<div class=”form-check”>
<label class=”form-check-label” for=”check2″>
<input type=”checkbox” class=”form-check-input” id=”check2″ name=”option2″ value=”something”>Option 2
</label>
</div>
<div class=”form-check”>
<label class=”form-check-label”>
<input type=”checkbox” class=”form-check-input” disabled>Option 3
</label>
</div>
<button type=”submit” class=”btn btn-primary”>Submit</button>
</form>

[/php]

تصویر checkbox :

Inline Checkboxes :

اگر میخواهید که صندوق های انتخاب به صورت خطی قرار بگیرند از کلاس form-check-inline. استفاده کنید.

مثال:

[php]

<form action=”/action_page.php”>
<div class=”form-check-inline”>
<label class=”form-check-label” for=”check1″>
<input type=”checkbox” class=”form-check-input” id=”check1″ name=”vehicle1″ value=”something” checked>Option 1
</label>
</div>
<div class=”form-check-inline”>
<label class=”form-check-label” for=”check2″>
<input type=”checkbox” class=”form-check-input” id=”check2″ name=”vehicle2″ value=”something”>Option 2
</label>
</div>
<div class=”form-check-inline”>
<label class=”form-check-label”>
<input type=”checkbox” class=”form-check-input” disabled>Option 3
</label>
</div>
<button type=”submit” class=”btn btn-primary”>Submit</button>
</form>

[/php]

در تصویر زیر چک باکس های دورن خطی را ببینید :

Bootstrap Radio Buttons :

از دکمه هخای رادیویی زمانی که میخواهی کاربر تنها یک حق انتخاب یک گزینه را داشته باشد استفاده کنید.

مثال زیر شامل ۳ دکمه ی رادیویی است که یکی از گزینه های آن غیر فعال است.

مثال:

[php]

<form action=”/action_page.php”>
<div class=”form-check”>
<label class=”form-check-label” for=”radio1″>
<input type=”radio” class=”form-check-input” id=”radio1″ name=”optradio” value=”option1″ checked>Option 1
</label>
</div>
<div class=”form-check”>
<label class=”form-check-label” for=”radio2″>
<input type=”radio” class=”form-check-input” id=”radio2″ name=”optradio” value=”option2″>Option 2
</label>
</div>
<div class=”form-check”>
<label class=”form-check-label”>
<input type=”radio” class=”form-check-input” disabled>Option 3
</label>
</div>
<button type=”submit” class=”btn btn-primary”>Submit</button>
</form>

[/php]

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

Inline Radio Buttons :

اگر میخواهید که دکمه های رادیویی در همان خط ظاهر شوند از کلاس chesck-checkinline. استفاده کنید.

مثال:

[php]

<form action=”/action_page.php”>
<div class=”form-check-inline”>
<label class=”form-check-label” for=”radio1″>
<input type=”radio” class=”form-check-input” id=”radio1″ name=”optradio” value=”option1″ checked>Option 1
</label>
</div>
<div class=”form-check-inline”>
<label class=”form-check-label” for=”radio2″>
<input type=”radio” class=”form-check-input” id=”radio2″ name=”optradio” value=”option2″>Option 2
</label>
</div>
<div class=”form-check-inline”>
<label class=”form-check-label”>
<input type=”radio” class=”form-check-input” disabled>Option 3
</label>
</div>
<button type=”submit” class=”btn btn-primary”>Submit</button>
</form>

[/php]

تصویر رادیو باتن های خطی :

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

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

مثال زیر شامل لیست کشویی (select list) است.

مثال:

[php]

<form action=”/action_page.php”>
<div class=”form-group”>
<label for=”sel1″>Select list (select one):</label>
<select class=”form-control” id=”sel1″ name=”sellist1″>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<br>
<label for=”sel2″>Mutiple select list (hold shift to select more than one):</label>
<select multiple class=”form-control” id=”sel2″ name=”sellist2″>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<button type=”submit” class=”btn btn-primary”>Submit</button>
</form>

[/php]

تصویر زیر را مشاهده نمایید:

کنترل اندازه فرم :

اندازه کنترل فرم را با کلاس form-control-sm. یا form-control-lg. تغییر دهید.

برای توضیح بیشتر مثال زیر را ببینید:

[php]

<form action=”/action_page.php”>
<div class=”form-group”>
<input type=”text” class=”form-control form-control-sm” placeholder=”Small form control” name=”text1″>
</div>
<div class=”form-group”>
<input type=”text” class=”form-control” placeholder=”Default form control” name=”text2″>
</div>
<div class=”form-group”>
<input type=”text” class=”form-control form-control-lg” placeholder=”Large form control” name=”text3″>
</div>
<button type=”submit” class=”btn btn-primary”>Submit</button>
</form>

[/php]

تصویر مثال بالا :

کنترل فرم با متن ساده :

از کلاس form-control-plaintext. استفاده کنید اگر میخواهید ورودی را به عنوان متن ساده استایل بدهید.

مثال :

[php]

<form action=”/action_page.php”>
<div class=”form-group”>
<input type=”text” class=”form-control” placeholder=”Default form control” name=”text1″>
</div>
<div class=”form-group”>
<input type=”text” class=”form-control-plaintext” placeholder=”Form control with plain text” name=”text2″>
</div>
<button type=”submit” class=”btn btn-primary”>Submit</button>
</form>

[/php]

تصویر زیر خروجی مثال بالا است :

فرم کنترل File و Range :

از کلاس input type”range”. یا form-control-file. برای تمام عرض کردن فیلدهای فرم کنترل استفاده کنید.

مثال:

[php]

<form action=”/action_page.php”>
<div class=”form-group”>
<input type=”range” class=”form-control-range” name=”range”>
</div>
<div class=”form-group”>
<input type=”file” class=”form-control-file border” name=”file”>
</div>
<button type=”submit” class=”btn btn-primary”>Submit</button>
</form>

[/php]

تصویر مثال بالا :