انواع input ها در بوت استرپ
پشتیبانی از کنترل های فرم
بوتسترپ از تگ های مربوط به فرم که در زیر قرار دارند، پشتیبانی می کند:
- input
- textarea
- checkbox
- radio
- select
input ها در بوت استرپ
بوت استرپ از تمام انواعinputهای HTML5 پشتیبانی می کند:
- text
- password
- datetime
- datetime-local
- date
- month
- time
- week
- number
- url
- search
- tel
- color
نکته: در صورتی که نوع inputها به درستی تعریف نشده باشد، آنها به طور کامل استایل دهی نخواهند شد.
مثال زیر در بر دارنده ی دو عنصر input می باشد. یکی از نوع text و دیگری از نوع password:
مثال (ورودی های بوت استرپ)
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
خودتان امتحان کنید »
عنصر Textarea در بوتسترپ
مثال زیر شامل یک textarea می باشد:
مثال (ورودی های بوت استرپ)
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
خودتان امتحان کنید »
چک باکس های بوت استرپ
اگر می خواهید که کاربر هر تعداد از گزینه ها را از یک لیست گزینه ها انتخاب کند، از چک باکس ها استفاده کنید.
مثال زیر شامل 3 چک باکس می باشد. آخرین گزینه نیز به صورت غیر فعال(disabled) در آمده است:
مثال (ورودی های بوت استرپ)
<label><input type="checkbox" value="">Option 1</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">Option 2</label>
</div>
<div class="checkbox disabled">
<label><input type="checkbox" value="" disabled>Option 3</label>
</div>
خودتان امتحان کنید »
در صورتی که می خواهید چک باکس ها در یک خط قرار بگیرند، می توانید از کلاس checkbox-inline استفاده کنید:
مثال (ورودی های بوت استرپ)
<label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 3</label>
خودتان امتحان کنید »
دکمه های رادیویی بوت استرپ
در صورتی که می خواهید کاربر را محدود کرده تا تنها یک گزینه را از یک لیست گزینه ها انتخاب کند، می توانید از دکمه های رادیویی استفاده کنید.
مثال زیر دو دکمه ی رادیویی را در بر دارد. آخرین گزینه نیز غیر فعال(disabled) شده است:
مثال (ورودی های بوت استرپ)
<label><input type="radio" name="optradio">Option 1</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Option 2</label>
</div>
<div class="radio disabled">
<label><input type="radio" name="optradio" disabled>Option 3</label>
</div>
خودتان امتحان کنید »
در صورتی که می خواهید دکمه های رادیویی در یک خط قرار بگیرند، می توانید از کلاس radio-inline. استفاده کنید:
مثال (ورودی های بوت استرپ)
<label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 3</label>
خودتان امتحان کنید »
لیست کشویی(select ) در بوت استرپ
در صورتی که می خواهد به کاربر این امکان را بدهید تا از گزینه های چندگانه، یکی را انتخاب کند، می توانید از لیست select استفاده کنید.
مثال زیر شامل یک لیست کشویی می باشد(لیست select):
مثال (ورودی های بوت استرپ)
<label for="sel1">Select list:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
خودتان امتحان کنید »
- نوشته شده توسط احسان عباسی
- بازدید: 15415
دیدگاه‌ها
و باز هم سلام.اول این که خیلی ممنون که تمامی سوالات رو با حوصله پاسخ میدید.
دوم هم یه سوال:فرض کنید توی تگ option من نوشتم sony برای این که وقتی کاربر روی سونی کلیک کرد، محصولات سونی نمایش داده بشه، باید کار خاصی انجام داد؟
درود بر شما .
شما باید تگ select خودتون رو مثل مثال زیر، به یک form متصل کنید.
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_select_form
سپس وقتی روی دکمه ی submit کلیک میشه، اطلاعات به سمت سرور ارسال میشه. حالا شما می تونید با استفاده از php اطلاعات رو در سمت سرور دریافت کنید و با دیتابیس ارتباط برقرار کنید و محصولات مرتبط با داده ی ورودی رو استخراج کنید. سپس اطلاعات رو به سمت کلاینت برگردانید. همچنین می تونید از آجاکس و جی کوئری هم کمک بگیرید.