BS kiritish maydonlari 2
Statik boshqaruv elementi
Agar gorizontal formada forma yorlig‘i yoniga oddiy matn qo‘yish kerak bo‘lsa, <p> elementida .form-control-static klassidan foydalaning:
Misol
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2">Email:</label>
<div class="col-sm-10">
<p class="form-control-static">someone@example.com</p>
</div>
</div>
</form>
O‘zingiz sinab ko‘ring »
Bootstrap kiritish guruhlari
.input-group klassi — kiritish maydonining oldiga yoki orqasiga "yordamchi matn" sifatida belgi, matn yoki tugma qo‘shib, uni boyitish uchun mo‘ljallangan konteyner.
.input-group-addon klassi kiritish maydoni yoniga belgi yoki yordamchi matn biriktiradi.
Text
Misol
<form>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="email" type="email" class="form-control" name="email" placeholder="Email">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="password" type="password" class="form-control" name="password" placeholder="Password">
</div>
<div class="input-group">
<span class="input-group-addon">Text</span>
<input id="msg" type="text" class="form-control" name="msg" placeholder="Additional Info">
</div>
</form>
O‘zingiz sinab ko‘ring »
.input-group-btn kiritish maydoni yoniga tugma biriktiradi. Bu ko‘pincha qidiruv paneli bilan birga ishlatiladi:
Misol
<form>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
O‘zingiz sinab ko‘ring »
Bootstrap forma boshqaruv elementlarining holatlari
- KIRITISH MAYDONI FOKUSI - Fokus olganda kiritish maydonining konturi (outline) olib tashlanadi va unga box-shadow qo‘llaniladi
- NOFAOL KIRITISH MAYDONLARI - Kiritish maydonini nofaol qilish uchun
disabledatributini qo‘shing - NOFAOL FIELDSET’LAR - Fieldset ichidagi barcha boshqaruv elementlarini nofaol qilish uchun unga
disabledatributini qo‘shing - FAQAT O‘QISH UCHUN MAYDONLAR (READONLY) - Foydalanuvchi ma’lumot kirita olmasligi uchun kiritish maydoniga
readonlyatributini qo‘shing - TEKSHIRUV HOLATLARI (VALIDATION) - Bootstrap xato, ogohlantirish va muvaffaqiyat xabarlari uchun tekshiruv stillarini o‘z ichiga oladi. Ulardan foydalanish uchun ota elementga
.has-warning,.has-erroryoki.has-successni qo‘shing - BELGILAR (ICONS) -
.has-feedbackklassi va belgi yordamida qayta aloqa (feedback) belgilarini qo‘shishingiz mumkin - YASHIRIN YORLIQLAR - Ko‘rinmaydigan yorliqlarga
.sr-onlyklassini qo‘shing
Quyidagi misolda yuqoridagi forma boshqaruv elementlari holatlarining ba’zilari gorizontal formada namoyish etilgan:
Misol
<form class="form-horizontal">
<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="Click to focus">
</div>
</div>
<div class="form-group">
<label for="disabledInput" class="col-sm-2 control-label">Disabled</label>
<div class="col-sm-10">
<input class="form-control" id="disabledInput" type="text" disabled>
</div>
</div>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput" class="col-sm-2 control-label">Fieldset disabled</label>
<div class="col-sm-10">
<input type="text" id="disabledTextInput" class="form-control">
</div>
</div>
<div class="form-group">
<label for="disabledSelect" class="col-sm-2 control-label"></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 has-feedback">
<label class="col-sm-2 control-label" for="inputSuccess">
Input with success and icon</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputSuccess">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</div>
<div class="form-group has-warning has-feedback">
<label class="col-sm-2 control-label" for="inputWarning">
Input with warning and icon</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputWarning">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
</div>
<div class="form-group has-error has-feedback">
<label class="col-sm-2 control-label" for="inputError">
Input with error and icon</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputError">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</div>
</form>
O‘zingiz sinab ko‘ring »
Mana esa bir qatorli (inline) formadagi ba’zi forma boshqaruv elementlari holatlariga misol:
Misol
<form class="form-inline">
<div class="form-group">
<label for="focusedInput">Focused</label>
<input class="form-control" id="focusedInput" type="text">
</div>
<div class="form-group">
<label for="inputPassword">Disabled</label>
<input class="form-control" id="disabledInput" type="text" disabled>
</div>
<div class="form-group has-success has-feedback">
<label for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
<label for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
<label for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</form>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!