Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

BS formalar

ULASHISH

Bootstrap’ning standart sozlamalari

Bootstrap’da forma boshqaruv elementlari avtomatik ravishda ba’zi global stillarni oladi:

.form-control klassiga ega barcha matnli <input>, <textarea> va <select> elementlarining kengligi 100% bo‘ladi.

Bootstrap forma maketlari

Bootstrap forma maketlarining uch turini taqdim etadi:

  • Vertikal forma (standart)
  • Gorizontal forma
  • Bir qatorli (inline) forma

Uchala forma maketi uchun umumiy qoidalar:

  • Yorliqlar va forma boshqaruv elementlarini <div class="form-group"> ichiga o‘rang (optimal oraliqlar uchun kerak)
  • Barcha matnli <input>, <textarea> va <select> elementlariga .form-control klassini qo‘shing

Bootstrap vertikal formasi (standart)

Quyidagi misolda ikkita kiritish maydoni, bitta checkbox va yuborish tugmasiga ega vertikal forma yaratiladi:

Misol

<form action="/action_page.php">   <div class="form-group">     <label for="email">Email address:</label>     <input type="email" class="form-control" id="email">   </div>   <div class="form-group">     <label for="pwd">Password:</label>     <input type="password" class="form-control" id="pwd">   </div>   <div class="checkbox">     <label><input type="checkbox"> Remember me</label>   </div>   <button type="submit" class="btn btn-default">Submit</button> </form>
O‘zingiz sinab ko‘ring »

Bootstrap bir qatorli (inline) formasi

Bir qatorli formada barcha elementlar bitta qatorda joylashadi va chapga tekislanadi, yorliqlar esa ularning yonida turadi.

Eslatma: Bu faqat kengligi kamida 768px bo‘lgan viewport’lardagi formalarga tegishli!

Bir qatorli forma uchun qo‘shimcha qoida:

  • <form> elementiga .form-inline klassini qo‘shing

Quyidagi misolda ikkita kiritish maydoni, bitta checkbox va bitta yuborish tugmasiga ega bir qatorli forma yaratiladi:

Misol

<form class="form-inline" action="/action_page.php">   <div class="form-group">     <label for="email">Email address:</label>     <input type="email" class="form-control" id="email">   </div>   <div class="form-group">     <label for="pwd">Password:</label>     <input type="password" class="form-control" id="pwd">   </div>   <div class="checkbox">     <label><input type="checkbox"> Remember me</label>   </div>   <button type="submit" class="btn btn-default">Submit</button> </form>
O‘zingiz sinab ko‘ring »

Maslahat: Agar har bir kiritish maydoni uchun yorliq qo‘shmasangiz, ekran o‘quvchi dasturlar formalaringizni o‘qishda qiynaladi. .sr-only klassi yordamida yorliqlarni ekran o‘quvchi dasturlardan tashqari barcha qurilmalarda yashirishingiz mumkin:

Misol

<form class="form-inline" action="/action_page.php">   <div class="form-group">     <label class="sr-only" for="email">Email address:</label>     <input type="email" class="form-control" id="email">   </div>   <div class="form-group">     <label class="sr-only" for="pwd">Password:</label>     <input type="password" class="form-control" id="pwd">   </div>   <div class="checkbox">     <label><input type="checkbox"> Remember me</label>   </div>   <button type="submit" class="btn btn-default">Submit</button> </form>
O‘zingiz sinab ko‘ring »

Bootstrap gorizontal formasi

Gorizontal forma deganda katta va o‘rta ekranlarda yorliqlar kiritish maydoni yonida (gorizontal) tekislanishi tushuniladi. Kichik ekranlarda (767px va undan kichik) u vertikal formaga aylanadi (yorliqlar har bir kiritish maydonining ustiga joylashadi).

Gorizontal forma uchun qo‘shimcha qoidalar:

  • <form> elementiga .form-horizontal klassini qo‘shing
  • Barcha <label> elementlariga .control-label klassini qo‘shing

Maslahat: Gorizontal maketda yorliqlar va forma boshqaruv elementlari guruhlarini tekislash uchun Bootstrap’ning oldindan belgilangan grid klasslaridan foydalaning.

Quyidagi misolda ikkita kiritish maydoni, bitta checkbox va bitta yuborish tugmasiga ega gorizontal forma yaratiladi.

Misol

<form class="form-horizontal" action="/action_page.php">   <div class="form-group">     <label class="control-label col-sm-2" for="email">Email:</label>     <div class="col-sm-10">       <input type="email" class="form-control" id="email" placeholder="Enter email">     </div>   </div>   <div class="form-group">     <label class="control-label col-sm-2" for="pwd">Password:</label>     <div class="col-sm-10">       <input type="password" class="form-control" id="pwd" placeholder="Enter password">     </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">Submit</button>     </div>   </div> </form>
O‘zingiz sinab ko‘ring »

‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish