ແບບຟອມ
ຕົວຢ່າງແລະຄໍາແນະນໍາການນໍາໃຊ້ສໍາລັບຮູບແບບການຄວບຄຸມແບບຟອມ, ທາງເລືອກການຈັດວາງ, ແລະອົງປະກອບທີ່ກໍາຫນົດເອງສໍາລັບການສ້າງຮູບແບບທີ່ຫລາກຫລາຍ.
ພາບລວມ
ການຄວບຄຸມແບບຟອມຂອງ Bootstrap ຂະຫຍາຍຢູ່ໃນ ຮູບແບບແບບຟອມ Rebooted ຂອງພວກເຮົາ ກັບຫ້ອງຮຽນ. ໃຊ້ຫ້ອງຮຽນເຫຼົ່ານີ້ເພື່ອເລືອກເຂົ້າໃນການສະແດງຜົນທີ່ປັບແຕ່ງຂອງເຂົາເຈົ້າເພື່ອໃຫ້ການສະແດງຜົນທີ່ສອດຄ່ອງກັນຫຼາຍຂຶ້ນໃນທົ່ວຕົວທ່ອງເວັບ ແລະອຸປະກອນ.
ໃຫ້ແນ່ໃຈວ່າໃຊ້ type
ຄຸນລັກສະນະທີ່ເຫມາະສົມກັບທຸກວັດສະດຸປ້ອນ (ເຊັ່ນ: email
ສໍາລັບທີ່ຢູ່ອີເມວຫຼື number
ຂໍ້ມູນຕົວເລກ) ເພື່ອໃຊ້ປະໂຫຍດຈາກການຄວບຄຸມການປ້ອນຂໍ້ມູນໃຫມ່ເຊັ່ນການຢັ້ງຢືນອີເມວ, ການເລືອກຕົວເລກ, ແລະອື່ນໆ.
ນີ້ແມ່ນຕົວຢ່າງສັ້ນໆເພື່ອສະແດງຮູບແບບແບບຟອມຂອງ Bootstrap. ສືບຕໍ່ອ່ານສໍາລັບເອກະສານກ່ຽວກັບຫ້ອງຮຽນທີ່ຕ້ອງການ, ຮູບແບບແບບຟອມ, ແລະອື່ນໆ.
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
ການຄວບຄຸມແບບຟອມ
ການຄວບຄຸມແບບຟອມຂໍ້ຄວາມ - ເຊັ່ນ: <input>
s, <select>
s, ແລະ <textarea>
s - ຖືກຈັດຮູບແບບກັບ .form-control
ຊັ້ນຮຽນ. ຮວມມີຮູບແບບຕ່າງໆສຳລັບຮູບລັກສະນະທົ່ວໄປ, ສະຖານະໂຟກັສ, ຂະໜາດ ແລະອື່ນໆອີກ.
ໃຫ້ແນ່ໃຈວ່າການສໍາຫຼວດ ຮູບແບບທີ່ກໍານົດເອງ ຂອງພວກເຮົາ ເພື່ອເພີ່ມເຕີມຮູບແບບ <select>
s.
<form>
<div class="form-group">
<label for="exampleFormControlInput1">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlSelect2">Example multiple select</label>
<select multiple class="form-control" id="exampleFormControlSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</form>
ສໍາລັບການປ້ອນໄຟລ໌, ແລກປ່ຽນ .form-control
ສໍາລັບ .form-control-file
.
<form>
<div class="form-group">
<label for="exampleFormControlFile1">Example file input</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1">
</div>
</form>
ຂະໜາດ
ກໍານົດຄວາມສູງໂດຍໃຊ້ຫ້ອງຮຽນເຊັ່ນ .form-control-lg
ແລະ .form-control-sm
.
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
<select class="form-control form-control-lg">
<option>Large select</option>
</select>
<select class="form-control">
<option>Default select</option>
</select>
<select class="form-control form-control-sm">
<option>Small select</option>
</select>
ອ່ານຢ່າງດຽວ
ເພີ່ມ readonly
ຄຸນສົມບັດ boolean ໃນວັດສະດຸປ້ອນເພື່ອປ້ອງກັນການດັດແກ້ຄ່າຂອງວັດສະດຸປ້ອນ. ການປ້ອນຂໍ້ມູນແບບອ່ານຢ່າງດຽວປະກົດວ່າອ່ອນກວ່າ (ຄືກັນກັບວັດສະດຸປ້ອນທີ່ຖືກປິດໃຊ້ງານ), ແຕ່ຮັກສາຕົວກະພິບມາດຕະຖານໄວ້.
<input class="form-control" type="text" placeholder="Readonly input here..." readonly>
ອ່ານພຽງແຕ່ຂໍ້ຄວາມທຳມະດາ
ຖ້າທ່ານຕ້ອງການໃຫ້ <input readonly>
ອົງປະກອບໃນຮູບແບບຂອງທ່ານຖືກຈັດຮູບແບບເປັນຂໍ້ຄວາມທໍາມະດາ, ໃຫ້ໃຊ້ .form-control-plaintext
ຫ້ອງຮຽນເພື່ອເອົາຮູບແບບພື້ນທີ່ແບບຟອມເລີ່ມຕົ້ນແລະຮັກສາຂອບແລະ padding ທີ່ຖືກຕ້ອງ.
<form>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword">
</div>
</div>
</form>
<form class="form-inline">
<div class="form-group mb-2">
<label for="staticEmail2" class="sr-only">Email</label>
<input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
</div>
<div class="form-group mx-sm-3 mb-2">
<label for="inputPassword2" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>
ໄລຍະການປ້ອນຂໍ້ມູນ
ຕັ້ງຄ່າການປ້ອນຂໍ້ມູນໄລຍະທີ່ສາມາດເລື່ອນໄດ້ຕາມລວງນອນໂດຍໃຊ້ .form-control-range
.
<form>
<div class="form-group">
<label for="formControlRange">Example Range input</label>
<input type="range" class="form-control-range" id="formControlRange">
</div>
</form>
ກ່ອງກວດ ແລະວິທະຍຸ
ກ່ອງກວດ ແລະວິທະຍຸເລີ່ມຕົ້ນຖືກປັບປຸງໂດຍການຊ່ວຍເຫຼືອຂອງ .form-check
, ຫ້ອງຮຽນດຽວສໍາລັບທັງສອງປະເພດວັດສະດຸປ້ອນທີ່ປັບປຸງຮູບແບບແລະພຶດຕິກໍາຂອງອົງປະກອບ HTML ຂອງເຂົາເຈົ້າ . checkboxes ແມ່ນສໍາລັບການເລືອກຫນຶ່ງຫຼືຫຼາຍທາງເລືອກໃນບັນຊີລາຍຊື່, ໃນຂະນະທີ່ວິທະຍຸແມ່ນສໍາລັບການເລືອກທາງເລືອກຫນຶ່ງຈາກຈໍານວນຫຼາຍ.
ກ່ອງກວດທີ່ປິດການໃຊ້ງານ ແລະວິທະຍຸແມ່ນຮອງຮັບ. ຄຸນ ສົມ disabled
ບັດຈະນຳໃຊ້ສີທີ່ອ່ອນກວ່າເພື່ອຊ່ວຍລະບຸສະຖານະຂອງວັດສະດຸປ້ອນ.
ກ່ອງເຊັກແລະປຸ່ມວິທະຍຸສະຫນັບສະຫນູນການກວດສອບແບບຟອມທີ່ອີງໃສ່ HTML ແລະສະຫນອງປ້າຍທີ່ຊັດເຈນ, ເຂົ້າເຖິງໄດ້. ດັ່ງນັ້ນ, <input>
s ແລະ s ຂອງພວກເຮົາ <label>
ແມ່ນອົງປະກອບຂອງພີ່ນ້ອງທີ່ກົງກັນຂ້າມກັບ <input>
ພາຍໃນ <label>
. ນີ້ແມ່ນ verbose ເລັກນ້ອຍຍ້ອນວ່າທ່ານຕ້ອງລະບຸ id
ແລະ for
ຄຸນລັກສະນະທີ່ກ່ຽວຂ້ອງກັບ <input>
ແລະ <label>
.
ຄ່າເລີ່ມຕົ້ນ (ວາງຊ້ອນກັນ)
ໂດຍຄ່າເລີ່ມຕົ້ນ, ກ່ອງໝາຍເລກໃດກໍໄດ້ ແລະວິທະຍຸທີ່ເປັນພີ່ນ້ອງກັນໃນທັນທີຈະຖືກວາງຊ້ອນກັນຕາມແນວຕັ້ງ ແລະຈັດໄລຍະຫ່າງຢ່າງເໝາະສົມກັບ .form-check
.
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
Default checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
<label class="form-check-label" for="defaultCheck2">
Disabled checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
<label class="form-check-label" for="exampleRadios1">
Default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
Second default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
<label class="form-check-label" for="exampleRadios3">
Disabled radio
</label>
</div>
ໃນແຖວ
ຈັດກຸ່ມກ່ອງໝາຍ ຫຼືວິທະຍຸຢູ່ໃນແຖວລວງນອນດຽວກັນໂດຍການເພີ່ມ .form-check-inline
ໃສ່ອັນໃດ ນຶ່ງ .form-check
.
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
<label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
<label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>
ໂດຍບໍ່ມີປ້າຍກຳກັບ
ເພີ່ມ .position-static
ໃສ່ວັດສະດຸປ້ອນພາຍໃນ .form-check
ນັ້ນບໍ່ມີຂໍ້ຄວາມປ້າຍກຳກັບໃດໆ. ຈື່ໄວ້ວ່າຍັງໃຫ້ບາງຮູບແບບຂອງຊື່ທີ່ສາມາດເຂົ້າເຖິງໄດ້ສໍາລັບເຕັກໂນໂລຊີການຊ່ວຍເຫຼືອ (ຕົວຢ່າງເຊັ່ນ, ການນໍາໃຊ້ aria-label
).
<div class="form-check">
<input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
<input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>
ແຜນຜັງ
ເນື່ອງຈາກ Bootstrap ນຳໃຊ້ display: block
ແລະ width: 100%
ກັບການຄວບຄຸມແບບຟອມເກືອບທັງໝົດຂອງພວກເຮົາ, ແບບຟອມຈະວາງໄວ້ຕາມແນວຕັ້ງ. ຫ້ອງຮຽນເພີ່ມເຕີມສາມາດຖືກໃຊ້ເພື່ອປ່ຽນແປງຮູບແບບນີ້ໃນແຕ່ລະຮູບແບບ.
ປະກອບເປັນກຸ່ມ
ຫ້ອງ .form-group
ຮຽນແມ່ນວິທີທີ່ງ່າຍທີ່ສຸດທີ່ຈະເພີ່ມໂຄງສ້າງບາງຢ່າງໃຫ້ກັບແບບຟອມ. ມັນສະຫນອງຫ້ອງຮຽນທີ່ມີຄວາມຍືດຫຍຸ່ນທີ່ສົ່ງເສີມການຈັດກຸ່ມທີ່ເຫມາະສົມຂອງປ້າຍຊື່, ການຄວບຄຸມ, ຂໍ້ຄວາມຊ່ວຍເຫຼືອທາງເລືອກ, ແລະການສົ່ງຂໍ້ຄວາມທີ່ຖືກຕ້ອງ. ໂດຍຄ່າເລີ່ມຕົ້ນມັນໃຊ້ພຽງແຕ່ margin-bottom
, ແຕ່ມັນເລືອກເອົາຮູບແບບເພີ່ມເຕີມ .form-inline
ຕາມຄວາມຕ້ອງການ. ໃຊ້ມັນກັບ <fieldset>
s, <div>
s, ຫຼືເກືອບທຸກອົງປະກອບອື່ນໆ.
<form>
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
</div>
</form>
ຕາຕະລາງແບບຟອມ
ຮູບແບບທີ່ຊັບຊ້ອນສາມາດສ້າງໄດ້ໂດຍໃຊ້ຫ້ອງຮຽນຕາຂ່າຍໄຟຟ້າຂອງພວກເຮົາ. ໃຊ້ສິ່ງເຫຼົ່ານີ້ສຳລັບການຈັດຮູບແບບທີ່ຕ້ອງການຫຼາຍຖັນ, ຄວາມກວ້າງທີ່ຫຼາກຫຼາຍ ແລະຕົວເລືອກການຈັດຮຽງເພີ່ມເຕີມ.
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name">
</div>
</div>
</form>
ແຖວແບບຟອມ
ທ່ານອາດຈະປ່ຽນ .row
ເປັນ .form-row
, ການປ່ຽນແປງຂອງແຖວຕາຕະລາງມາດຕະຖານຂອງພວກເຮົາທີ່ overrides gutters ຖັນເລີ່ມຕົ້ນສໍາລັບການຈັດວາງທີ່ເຄັ່ງຄັດແລະຫນາແຫນ້ນກວ່າ.
<form>
<div class="form-row">
<div class="col">
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name">
</div>
</div>
</form>
ການຈັດວາງທີ່ສັບສົນຫຼາຍຍັງສາມາດສ້າງດ້ວຍລະບົບຕາຂ່າຍໄຟຟ້າ.
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4">
</div>
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
Check me out
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
ຮູບແບບແນວນອນ
ສ້າງແບບຟອມຕາມລວງນອນດ້ວຍຕາຂ່າຍໄຟຟ້າໂດຍການເພີ່ມ .row
ຊັ້ນຮຽນເພື່ອສ້າງເປັນກຸ່ມແລະນໍາໃຊ້ .col-*-*
ຊັ້ນຮຽນເພື່ອກໍານົດຄວາມກວ້າງຂອງປ້າຍຊື່ແລະການຄວບຄຸມຂອງທ່ານ. ໃຫ້ແນ່ໃຈວ່າຈະເພີ່ມ .col-form-label
ໃສ່ <label>
s ຂອງເຈົ້າເຊັ່ນກັນເພື່ອໃຫ້ພວກມັນຖືກຈັດໃສ່ໃນແນວຕັ້ງດ້ວຍການຄວບຄຸມແບບຟອມທີ່ກ່ຽວຂ້ອງ.
ບາງຄັ້ງ, ທ່ານອາດຈະຕ້ອງການໃຊ້ຂອບຫຼື padding utilities ເພື່ອສ້າງຄວາມສອດຄ່ອງທີ່ສົມບູນແບບທີ່ທ່ານຕ້ອງການ. ຕົວຢ່າງ, ພວກເຮົາໄດ້ເອົາ padding-top
ປ້າຍກຳກັບວັດສະດຸປ້ອນວິທະຍຸທີ່ວາງໄວ້ຂອງພວກເຮົາອອກເພື່ອຈັດວາງເສັ້ນພື້ນຖານຂໍ້ຄວາມໃຫ້ດີຂຶ້ນ.
<form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3">
</div>
</div>
<fieldset class="form-group row">
<legend class="col-form-label col-sm-2 float-sm-left pt-0">Radios</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
<label class="form-check-label" for="gridRadios1">
First radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
<label class="form-check-label" for="gridRadios2">
Second radio
</label>
</div>
<div class="form-check disabled">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
<label class="form-check-label" for="gridRadios3">
Third disabled radio
</label>
</div>
</div>
</fieldset>
<div class="form-group row">
<div class="col-sm-10 offset-sm-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck1">
<label class="form-check-label" for="gridCheck1">
Example checkbox
</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</div>
</form>
ຂະໜາດປ້າຍກຳກັບແບບແນວນອນ
ໃຫ້ແນ່ໃຈວ່າການນໍາໃຊ້ .col-form-label-sm
ຫຼື s ຫຼື s .col-form-label-lg
ຂອງທ່ານ ທີ່ຈະຖືກຕ້ອງປະຕິບັດຕາມຂະຫນາດຂອງ ແລະ .<label>
<legend>
.form-control-lg
.form-control-sm
<form>
<div class="form-group row">
<label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
</div>
</div>
<div class="form-group row">
<label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
</div>
</div>
<div class="form-group row">
<label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
</div>
</div>
</form>
ຂະໜາດຖັນ
ດັ່ງທີ່ສະແດງຢູ່ໃນຕົວຢ່າງທີ່ຜ່ານມາ, ລະບົບຕາຂ່າຍໄຟຟ້າຂອງພວກເຮົາອະນຸຍາດໃຫ້ທ່ານວາງຈໍານວນ .col
s ພາຍໃນ .row
ຫຼື .form-row
. ພວກມັນຈະແບ່ງຄວາມກວ້າງທີ່ມີຢູ່ໃຫ້ເທົ່າທຽມກັນລະຫວ່າງພວກມັນ. ນອກນັ້ນທ່ານຍັງສາມາດເລືອກເອົາຊຸດຍ່ອຍຂອງຖັນຂອງທ່ານເພື່ອໃຊ້ພື້ນທີ່ຫຼາຍຫຼືຫນ້ອຍ, ໃນຂະນະທີ່ .col
s ທີ່ຍັງເຫຼືອແບ່ງສ່ວນທີ່ເຫລືອເທົ່າທຽມກັນ, ດ້ວຍຊັ້ນຄໍລໍາສະເພາະເຊັ່ນ .col-7
.
<form>
<div class="form-row">
<div class="col-7">
<input type="text" class="form-control" placeholder="City">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="State">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Zip">
</div>
</div>
</form>
ຂະໜາດອັດຕະໂນມັດ
ຕົວຢ່າງຂ້າງລຸ່ມນີ້ໃຊ້ flexbox utility ເພື່ອຈັດວາງເນື້ອໃນຢູ່ໃນແນວຕັ້ງແລະການປ່ຽນແປງ .col
ເພື່ອ .col-auto
ໃຫ້ຄໍລໍາຂອງເຈົ້າໃຊ້ພື້ນທີ່ຫຼາຍເທົ່າທີ່ຕ້ອງການ. ອີກວິທີຫນຶ່ງ, ຂະຫນາດຖັນຕົວມັນເອງໂດຍອີງໃສ່ເນື້ອໃນ.
<form>
<div class="form-row align-items-center">
<div class="col-auto">
<label class="sr-only" for="inlineFormInput">Name</label>
<input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
</div>
<div class="col-auto">
<label class="sr-only" for="inlineFormInputGroup">Username</label>
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
</div>
</div>
<div class="col-auto">
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="autoSizingCheck">
<label class="form-check-label" for="autoSizingCheck">
Remember me
</label>
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</div>
</div>
</form>
ຈາກນັ້ນທ່ານສາມາດຣີມິກມັນໄດ້ອີກຄັ້ງດ້ວຍຫ້ອງຮຽນຖັນສະເພາະຂະໜາດ.
<form>
<div class="form-row align-items-center">
<div class="col-sm-3 my-1">
<label class="sr-only" for="inlineFormInputName">Name</label>
<input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
</div>
<div class="col-sm-3 my-1">
<label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
</div>
</div>
<div class="col-auto my-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="autoSizingCheck2">
<label class="form-check-label" for="autoSizingCheck2">
Remember me
</label>
</div>
</div>
<div class="col-auto my-1">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
ແລະແນ່ນອນ ການຄວບຄຸມແບບຟອມທີ່ກໍາຫນົດເອງ ແມ່ນສະຫນັບສະຫນູນ.
<form>
<div class="form-row align-items-center">
<div class="col-auto my-1">
<label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label>
<select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-auto my-1">
<div class="custom-control custom-checkbox mr-sm-2">
<input type="checkbox" class="custom-control-input" id="customControlAutosizing">
<label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
</div>
</div>
<div class="col-auto my-1">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
ແບບຟອມໃນແຖວ
ໃຊ້ .form-inline
ຫ້ອງຮຽນເພື່ອສະແດງຊຸດຂອງປ້າຍກຳກັບ, ການຄວບຄຸມແບບຟອມ ແລະປຸ່ມຕ່າງໆໃນແຖວແນວນອນດຽວ. ການຄວບຄຸມແບບຟອມພາຍໃນແບບຟອມ inline ແຕກຕ່າງກັນເລັກນ້ອຍຈາກສະຖານະເລີ່ມຕົ້ນຂອງພວກມັນ.
- ການຄວບຄຸມແມ່ນ
display: flex
, ຍຸບພື້ນທີ່ສີຂາວ HTML ໃດຫນຶ່ງແລະອະນຸຍາດໃຫ້ທ່ານເພື່ອສະຫນອງການຄວບຄຸມການຈັດລຽງລໍາດັບທີ່ມີ ຊ່ອງຫວ່າງ ແລະ flexbox utilities. - ການຄວບຄຸມແລະກຸ່ມ input ໄດ້ຮັບ
width: auto
ການ override ຄ່າເລີ່ມຕົ້ນ Bootstrapwidth: 100%
. - ການຄວບຄຸມ ພຽງແຕ່ປາກົດຢູ່ໃນແຖວຢູ່ໃນຊ່ອງເບິ່ງທີ່ມີຄວາມກວ້າງຢ່າງຫນ້ອຍ 576px ເພື່ອບັນຊີຊ່ອງແຄບໃນອຸປະກອນມືຖື.
ທ່ານອາດຈະຈໍາເປັນຕ້ອງໄດ້ແກ້ໄຂຄວາມກວ້າງແລະການຈັດຕໍາແຫນ່ງຂອງຕົວຄວບຄຸມແບບຟອມສ່ວນບຸກຄົນດ້ວຍ utilities ໄລຍະຫ່າງ (ຕາມຮູບຂ້າງລຸ່ມນີ້). ສຸດທ້າຍ, ໃຫ້ແນ່ໃຈວ່າຈະປະກອບມີ <label>
ການຄວບຄຸມແບບຟອມແຕ່ລະຄົນ, ເຖິງແມ່ນວ່າທ່ານຈໍາເປັນຕ້ອງເຊື່ອງມັນຈາກຜູ້ເຂົ້າຊົມທີ່ບໍ່ແມ່ນ screenreader ດ້ວຍ .sr-only
.
<form class="form-inline">
<label class="sr-only" for="inlineFormInputName2">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
<label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
</div>
<div class="form-check mb-2 mr-sm-2">
<input class="form-check-input" type="checkbox" id="inlineFormCheck">
<label class="form-check-label" for="inlineFormCheck">
Remember me
</label>
</div>
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>
ການຄວບຄຸມແລະການເລືອກຮູບແບບທີ່ກໍານົດເອງຍັງໄດ້ສະຫນັບສະຫນູນ.
<form class="form-inline">
<label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
<select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="custom-control custom-checkbox my-1 mr-sm-2">
<input type="checkbox" class="custom-control-input" id="customControlInline">
<label class="custom-control-label" for="customControlInline">Remember my preference</label>
</div>
<button type="submit" class="btn btn-primary my-1">Submit</button>
</form>
ທາງເລືອກເພື່ອປ້າຍທີ່ເຊື່ອງໄວ້
ເທກໂນໂລຍີຊ່ວຍເຫຼືອເຊັ່ນເຄື່ອງອ່ານຫນ້າຈໍຈະມີບັນຫາກັບແບບຟອມຂອງທ່ານຖ້າທ່ານບໍ່ໃສ່ປ້າຍຊື່ສໍາລັບທຸກໆວັດສະດຸປ້ອນ. ສໍາລັບແບບຟອມ inline ເຫຼົ່ານີ້, ທ່ານສາມາດເຊື່ອງປ້າຍຊື່ໂດຍໃຊ້ .sr-only
ຊັ້ນ. ມີວິທີການທາງເລືອກເພີ່ມເຕີມຂອງການສະຫນອງປ້າຍສໍາລັບເຕັກໂນໂລຢີການຊ່ວຍເຫຼືອ, ເຊັ່ນ: aria-label
, aria-labelledby
ຫຼື title
ຄຸນລັກສະນະ. ຖ້າບໍ່ມີສິ່ງເຫຼົ່ານີ້, ເທັກໂນໂລຍີຊ່ວຍເຫຼືອອາດຈະໃຊ້ placeholder
ຄຸນລັກສະນະດັ່ງກ່າວ, ຖ້າມີ, ແຕ່ຄວນສັງເກດວ່າການໃຊ້ placeholder
ແທນວິທີການຕິດສະຫຼາກອື່ນໆບໍ່ໄດ້ຖືກແນະ ນຳ.
ຂໍ້ຄວາມຊ່ວຍເຫຼືອ
ຂໍ້ຄວາມຊ່ວຍເຫຼືອລະດັບຕັນໃນຮູບແບບສາມາດຖືກສ້າງຂື້ນໂດຍໃຊ້ .form-text
(ໃນເມື່ອກ່ອນເອີ້ນວ່າ .help-block
ໃນ v3). ຂໍ້ຄວາມຊ່ວຍເຫຼືອໃນແຖວສາມາດຖືກປະຕິບັດໄດ້ຢ່າງຄ່ອງຕົວໂດຍໃຊ້ອົງປະກອບ HTML ໃນແຖວ ແລະຫ້ອງຮຽນປະໂຫຍດເຊັ່ນ .text-muted
.
ການເຊື່ອມໂຍງຂໍ້ຄວາມຊ່ວຍເຫຼືອກັບການຄວບຄຸມແບບຟອມ
ຂໍ້ຄວາມຊ່ວຍເຫຼືອຄວນມີຄວາມກ່ຽວຂ້ອງຢ່າງຊັດເຈນກັບການຄວບຄຸມແບບຟອມທີ່ມັນກ່ຽວຂ້ອງກັບການໃຊ້ aria-describedby
ຄຸນສົມບັດ. ນີ້ຈະຮັບປະກັນວ່າເທກໂນໂລຍີຊ່ວຍເຫຼືອ - ເຊັ່ນເຄື່ອງອ່ານຫນ້າຈໍ - ຈະປະກາດຂໍ້ຄວາມການຊ່ວຍເຫຼືອນີ້ເມື່ອຜູ້ໃຊ້ສຸມໃສ່ຫຼືເຂົ້າໄປໃນການຄວບຄຸມ.
ຂໍ້ຄວາມຊ່ວຍເຫຼືອຂ້າງລຸ່ມນີ້ການປ້ອນຂໍ້ມູນສາມາດໄດ້ຮັບການຈັດຮູບແບບ .form-text
. ຊັ້ນຮຽນນີ້ລວມເອົາ display: block
ແລະເພີ່ມຂອບເທິງບາງອັນເພື່ອໃຫ້ມີໄລຍະຫ່າງໄດ້ງ່າຍຈາກວັດສະດຸປ້ອນຂ້າງເທິງ.
<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>
ຂໍ້ຄວາມໃນແຖວສາມາດໃຊ້ອົງປະກອບ HTML ໃນແຖວປົກກະຕິ (ບໍ່ວ່າຈະເປັນ <small>
, <span>
, ຫຼືອັນອື່ນ) ໂດຍບໍ່ມີຫຍັງນອກເໜືອໄປຈາກຊັ້ນປະໂຫຍດ.
<form class="form-inline">
<div class="form-group">
<label for="inputPassword6">Password</label>
<input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
<small id="passwordHelpInline" class="text-muted">
Must be 8-20 characters long.
</small>
</div>
</form>
ແບບຟອມທີ່ພິການ
ເພີ່ມ disabled
ຄຸນສົມບັດ boolean ຢູ່ໃນວັດສະດຸປ້ອນເພື່ອປ້ອງກັນການໂຕ້ຕອບຂອງຜູ້ໃຊ້ ແລະເຮັດໃຫ້ມັນອ່ອນລົງ.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
ເພີ່ມ disabled
ຄຸນສົມບັດໃສ່ a <fieldset>
ເພື່ອປິດການຄວບຄຸມທັງໝົດພາຍໃນ.
<form>
<fieldset disabled>
<legend>Disabled fieldset example</legend>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
<label class="form-check-label" for="disabledFieldsetCheck">
Can't check this
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
Caveat ກັບສະມໍ
ຕົວທ່ອງເວັບປະຕິບັດການຄວບຄຸມຮູບແບບພື້ນເມືອງທັງຫມົດ ( <input>
, <select>
, ແລະ <button>
ອົງປະກອບ) ພາຍໃນ <fieldset disabled>
ປິດການໃຊ້ງານ, ປ້ອງກັນການໂຕ້ຕອບຂອງແປ້ນພິມແລະຫນູກັບພວກມັນ.
ຢ່າງໃດກໍຕາມ, ຖ້າແບບຟອມຂອງທ່ານປະກອບມີອົງປະກອບທີ່ຄ້າຍຄືປຸ່ມທີ່ກໍາຫນົດເອງເຊັ່ນ: <a ... class="btn btn-*">
, ເຫຼົ່ານີ້ຈະໄດ້ຮັບພຽງແຕ່ຮູບແບບ pointer-events: none
. ດັ່ງທີ່ບັນທຶກໄວ້ໃນພາກສ່ວນກ່ຽວກັບ ສະຖານະປິດການໃຊ້ງານສໍາລັບປຸ່ມຕ່າງໆ (ແລະໂດຍສະເພາະໃນພາກຍ່ອຍສໍາລັບອົງປະກອບສະມໍ), ຄຸນສົມບັດ CSS ນີ້ຍັງບໍ່ທັນໄດ້ມາດຕະຖານແລະບໍ່ໄດ້ຮັບການສະຫນັບສະຫນູນຢ່າງເຕັມສ່ວນໃນ Internet Explorer 10. ການຄວບຄຸມທີ່ອີງໃສ່ສະມໍຍັງຈະຍັງຄົງຢູ່. ໂຟກັສ ແລະສາມາດໃຊ້ງານໄດ້ໂດຍໃຊ້ແປ້ນພິມ. ທ່ານຕ້ອງແກ້ໄຂການຄວບຄຸມເຫຼົ່ານີ້ດ້ວຍຕົນເອງໂດຍການເພີ່ມ tabindex="-1"
ເພື່ອປ້ອງກັນບໍ່ໃຫ້ພວກເຂົາໄດ້ຮັບການສຸມໃສ່ແລະ aria-disabled="disabled"
ເປັນສັນຍານຂອງລັດຂອງເຂົາເຈົ້າກັບເຕັກໂນໂລຊີການຊ່ວຍເຫຼືອ.
ຄວາມເຂົ້າກັນໄດ້ຂອງຕົວທ່ອງເວັບ
ໃນຂະນະທີ່ Bootstrap ຈະນໍາໃຊ້ຮູບແບບເຫຼົ່ານີ້ໃນທຸກຕົວທ່ອງເວັບ, Internet Explorer 11 ແລະຂ້າງລຸ່ມນີ້ບໍ່ໄດ້ສະຫນັບສະຫນູນຢ່າງເຕັມທີ່ disabled
ຄຸນລັກສະນະໃນ <fieldset>
. ໃຊ້ JavaScript ແບບກຳນົດເອງເພື່ອປິດການນຳໃຊ້ຊ່ອງຂໍ້ມູນໃນໂປຣແກຣມທ່ອງເວັບເຫຼົ່ານີ້.
ການກວດສອບ
ໃຫ້ຄໍາຄິດເຫັນທີ່ມີຄຸນຄ່າ, ສາມາດປະຕິບັດໄດ້ກັບຜູ້ໃຊ້ຂອງທ່ານດ້ວຍການກວດສອບແບບຟອມ HTML5 - ມີຢູ່ໃນທຸກຕົວທ່ອງເວັບທີ່ສະຫນັບສະຫນູນຂອງພວກເຮົາ . ເລືອກຈາກຄໍາຕິຊົມໃນການກວດສອບຄ່າເລີ່ມຕົ້ນຂອງຕົວທ່ອງເວັບ, ຫຼືປະຕິບັດຂໍ້ຄວາມແບບກໍານົດເອງກັບຫ້ອງຮຽນຂອງພວກເຮົາແລະ JavaScript ເລີ່ມຕົ້ນ.
ມັນເຮັດວຽກແນວໃດ
ນີ້ແມ່ນວິທີການກວດສອບແບບຟອມເຮັດວຽກກັບ Bootstrap:
- ການກວດສອບແບບຟອມ HTML ຖືກນຳໃຊ້ຜ່ານ CSS's two pseudo-classes,
:invalid
ແລະ:valid
. ມັນໃຊ້ກັບ<input>
,<select>
, ແລະ<textarea>
ອົງປະກອບ. - Bootstrap ກຳນົດຂອບເຂດ
:invalid
ແລະ:valid
ຮູບແບບຕ່າງໆໃຫ້ກັບຊັ້ນແມ່.was-validated
, ໂດຍປົກກະຕິແລ້ວໃຊ້ກັບ<form>
. ຖ້າບໍ່ດັ່ງນັ້ນ, ຊ່ອງຂໍ້ມູນທີ່ຕ້ອງການທີ່ບໍ່ມີຄ່າຈະສະແດງວ່າບໍ່ຖືກຕ້ອງໃນການໂຫຼດຫນ້າ. ດ້ວຍວິທີນີ້, ເຈົ້າອາດຈະເລືອກເວລາທີ່ຈະເປີດໃຊ້ພວກມັນ (ໂດຍປົກກະຕິແລ້ວ ຫຼັງຈາກການຍື່ນແບບຟອມຖືກພະຍາຍາມ). - ເພື່ອປັບຮູບລັກສະນະຂອງແບບຟອມ (ຕົວຢ່າງ, ໃນກໍລະນີຂອງການຍື່ນສະເຫນີແບບຟອມແບບເຄື່ອນໄຫວໂດຍໃຊ້ AJAX), ເອົາ
.was-validated
ຊັ້ນອອກຈາກ<form>
ອີກເທື່ອຫນຶ່ງຫຼັງຈາກການຍື່ນສະເຫນີ. - ໃນຖານະເປັນການຫຼຸດລົງ,
.is-invalid
ແລະ.is-valid
ຫ້ອງຮຽນອາດຈະຖືກນໍາໃຊ້ແທນທີ່ຈະເປັນ pseudo-class ສໍາລັບການ ກວດສອບຂ້າງເຊີເວີ . ພວກເຂົາບໍ່ຕ້ອງການ.was-validated
ຫ້ອງຮຽນພໍ່ແມ່. - ເນື່ອງຈາກຂໍ້ຈໍາກັດໃນວິທີການເຮັດວຽກຂອງ CSS, ພວກເຮົາບໍ່ສາມາດ (ໃນປະຈຸບັນ) ນໍາໃຊ້ຮູບແບບຕ່າງໆກັບຮູບແບບ
<label>
ທີ່ມາກ່ອນການຄວບຄຸມແບບຟອມໃນ DOM ໂດຍບໍ່ມີການຊ່ວຍເຫຼືອຂອງ JavaScript ແບບກໍານົດເອງ. - ຕົວທ່ອງເວັບທີ່ທັນສະໄຫມທັງຫມົດສະຫນັບສະຫນູນ API ການກວດສອບຂໍ້ຈໍາກັດ , ຊຸດຂອງວິທີການ JavaScript ສໍາລັບການກວດສອບການຄວບຄຸມແບບຟອມ.
- ຂໍ້ຄວາມຄໍາຕິຊົມອາດຈະນໍາໃຊ້ ຄ່າເລີ່ມຕົ້ນຂອງຕົວທ່ອງເວັບ (ທີ່ແຕກຕ່າງກັນສໍາລັບແຕ່ລະຕົວທ່ອງເວັບ, ແລະ unstylable ຜ່ານ CSS) ຫຼືຮູບແບບຄໍາຕິຊົມທີ່ກໍາຫນົດເອງຂອງພວກເຮົາກັບ HTML ແລະ CSS ເພີ່ມເຕີມ.
- ເຈົ້າອາດຈະໃຫ້ຂໍ້ຄວາມທີ່ຖືກຕ້ອງຕາມກຳນົດເອງ
setCustomValidity
ໃນ JavaScript.
ດ້ວຍສິ່ງນັ້ນຢູ່ໃນໃຈ, ພິຈາລະນາການສາທິດຕໍ່ໄປນີ້ສໍາລັບຮູບແບບການກວດສອບແບບຟອມທີ່ກໍານົດເອງຂອງພວກເຮົາ, ຫ້ອງຮຽນທາງເລືອກຂອງເຊີບເວີ, ແລະຄ່າເລີ່ມຕົ້ນຂອງຕົວທ່ອງເວັບ.
ຮູບແບບທີ່ກໍາຫນົດເອງ
ສໍາລັບຂໍ້ຄວາມການກວດສອບແບບຟອມ Bootstrap ແບບກຳນົດເອງ, ທ່ານຈະຕ້ອງເພີ່ມ novalidate
ຄຸນສົມບັດ boolean ໃສ່ <form>
. ອັນນີ້ປິດການໃຊ້ງານຄໍາແນະນໍາເຄື່ອງມືຄໍາຕິຊົມເລີ່ມຕົ້ນຂອງຕົວທ່ອງເວັບ, ແຕ່ຍັງໃຫ້ການເຂົ້າເຖິງ APIs ການກວດສອບແບບຟອມໃນ JavaScript. ພະຍາຍາມສົ່ງແບບຟອມຂ້າງລຸ່ມນີ້; JavaScript ຂອງພວກເຮົາຈະຂັດຂວາງປຸ່ມສົ່ງແລະສົ່ງຄໍາຕິຊົມໄປຫາທ່ານ. ເມື່ອພະຍາຍາມສົ່ງ, ທ່ານຈະເຫັນ ຮູບແບບ :invalid
ແລະ :valid
ຮູບແບບທີ່ນຳໃຊ້ກັບການຄວບຄຸມແບບຟອມຂອງທ່ານ.
ຮູບແບບການຕິຊົມແບບກຳນົດເອງນຳໃຊ້ສີແບບກຳນົດເອງ, ຂອບ, ຮູບແບບໂຟກັສ, ແລະໄອຄອນພື້ນຫຼັງເພື່ອສື່ສານຄຳຕິຊົມໄດ້ດີຂຶ້ນ. ໄອຄອນພື້ນຫຼັງສຳລັບ <select>
s ສາມາດໃຊ້ໄດ້ກັບ .custom-select
, ແລະບໍ່ແມ່ນ .form-control
.
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationCustom01">First name</label>
<input type="text" class="form-control" id="validationCustom01" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-6 mb-3">
<label for="validationCustom02">Last name</label>
<input type="text" class="form-control" id="validationCustom02" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationCustom03">City</label>
<input type="text" class="form-control" id="validationCustom03" required>
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom04">State</label>
<select class="custom-select" id="validationCustom04" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div class="invalid-feedback">
Please select a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom05">Zip</label>
<input type="text" class="form-control" id="validationCustom05" required>
<div class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
ຄ່າເລີ່ມຕົ້ນຂອງຕົວທ່ອງເວັບ
ບໍ່ສົນໃຈຂໍ້ຄວາມຄໍາຄຶດຄໍາເຫັນທີ່ກໍານົດເອງຫຼືຂຽນ JavaScript ເພື່ອປ່ຽນພຶດຕິກໍາແບບຟອມບໍ? ທັງຫມົດທີ່ດີ, ທ່ານສາມາດນໍາໃຊ້ຄ່າເລີ່ມຕົ້ນຂອງຕົວທ່ອງເວັບ. ລອງສົ່ງແບບຟອມຂ້າງລຸ່ມນີ້. ອີງຕາມຕົວທ່ອງເວັບແລະ OS ຂອງທ່ານ, ທ່ານຈະເຫັນຮູບແບບຂອງຄໍາຄິດເຫັນທີ່ແຕກຕ່າງກັນເລັກນ້ອຍ.
ໃນຂະນະທີ່ຮູບແບບຄໍາຕິຊົມເຫຼົ່ານີ້ບໍ່ສາມາດຖືກຈັດຮູບແບບດ້ວຍ CSS, ທ່ານຍັງສາມາດປັບແຕ່ງຂໍ້ຄວາມຄໍາຕິຊົມຜ່ານ JavaScript ໄດ້.
<form>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationDefault01">First name</label>
<input type="text" class="form-control" id="validationDefault01" value="Mark" required>
</div>
<div class="col-md-6 mb-3">
<label for="validationDefault02">Last name</label>
<input type="text" class="form-control" id="validationDefault02" value="Otto" required>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationDefault03">City</label>
<input type="text" class="form-control" id="validationDefault03" required>
</div>
<div class="col-md-3 mb-3">
<label for="validationDefault04">State</label>
<select class="custom-select" id="validationDefault04" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
</div>
<div class="col-md-3 mb-3">
<label for="validationDefault05">Zip</label>
<input type="text" class="form-control" id="validationDefault05" required>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
<label class="form-check-label" for="invalidCheck2">
Agree to terms and conditions
</label>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
ດ້ານເຊີບເວີ
ພວກເຮົາແນະນໍາໃຫ້ໃຊ້ການກວດສອບດ້ານລູກຄ້າ, ແຕ່ໃນກໍລະນີທີ່ທ່ານຕ້ອງການການກວດສອບດ້ານເຊີຟເວີ, ທ່ານສາມາດລະບຸຊ່ອງຂໍ້ມູນແບບຟອມທີ່ບໍ່ຖືກຕ້ອງແລະຖືກຕ້ອງກັບ .is-invalid
ແລະ .is-valid
. ໃຫ້ສັງເກດວ່າ .invalid-feedback
ຍັງໄດ້ຮັບການສະຫນັບສະຫນູນກັບຫ້ອງຮຽນເຫຼົ່ານີ້.
ສໍາລັບຊ່ອງຂໍ້ມູນທີ່ບໍ່ຖືກຕ້ອງ, ໃຫ້ແນ່ໃຈວ່າຄໍາຕິຊົມທີ່ບໍ່ຖືກຕ້ອງ / ຂໍ້ຄວາມສະແດງຂໍ້ຜິດພາດຖືກເຊື່ອມໂຍງກັບຊ່ອງຂໍ້ມູນແບບຟອມທີ່ກ່ຽວຂ້ອງໂດຍໃຊ້ aria-describedby
. ຄຸນລັກສະນະນີ້ອະນຸຍາດໃຫ້ຫຼາຍກ່ວາຫນຶ່ງ id
ທີ່ຈະອ້າງອີງ, ໃນກໍລະນີທີ່ພາກສະຫນາມໄດ້ຊີ້ໄປຫາຂໍ້ຄວາມຮູບແບບເພີ່ມເຕີມ.
<form>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationServer01">First name</label>
<input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-6 mb-3">
<label for="validationServer02">Last name</label>
<input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationServer03">City</label>
<input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required>
<div id="validationServer03Feedback" class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationServer04">State</label>
<select class="custom-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div id="validationServer04Feedback" class="invalid-feedback">
Please select a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationServer05">Zip</label>
<input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServer05Feedback" required>
<div id="validationServer05Feedback" class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required>
<label class="form-check-label" for="invalidCheck3">
Agree to terms and conditions
</label>
<div id="invalidCheck3Feedback" class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
ອົງປະກອບທີ່ສະຫນັບສະຫນູນ
ຮູບແບບການກວດສອບສາມາດໃຊ້ໄດ້ສໍາລັບການຄວບຄຸມແບບຟອມຕໍ່ໄປນີ້ ແລະອົງປະກອບ:
<input>
s ແລະ<textarea>
s ກັບ.form-control
<select>
s ກັບ.form-control
ຫຼື.custom-select
.form-check
ດ.custom-checkbox
s ແລະ.custom-radio
s.custom-file
<form class="was-validated">
<div class="mb-3">
<label for="validationTextarea">Textarea</label>
<textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
<div class="invalid-feedback">
Please enter a message in the textarea.
</div>
</div>
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
<label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
<div class="invalid-feedback">Example invalid feedback text</div>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
<label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio mb-3">
<input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
<label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
<div class="invalid-feedback">More example invalid feedback text</div>
</div>
<div class="mb-3">
<select class="custom-select" required>
<option value="">Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="invalid-feedback">Example invalid custom select feedback</div>
</div>
<div class="custom-file mb-3">
<input type="file" class="custom-file-input" id="validatedCustomFile" required>
<label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
<div class="invalid-feedback">Example invalid custom file feedback</div>
</div>
<div class="mb-3">
<div class="input-group is-invalid">
<div class="input-group-prepend">
<span class="input-group-text" id="validatedInputGroupPrepend">@</span>
</div>
<input type="text" class="form-control is-invalid" aria-describedby="validatedInputGroupPrepend" required>
</div>
<div class="invalid-feedback">
Example invalid input group feedback
</div>
</div>
<div class="mb-3">
<div class="input-group is-invalid">
<div class="input-group-prepend">
<label class="input-group-text" for="validatedInputGroupSelect">Options</label>
</div>
<select class="custom-select" id="validatedInputGroupSelect" required>
<option value="">Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="invalid-feedback">
Example invalid input group feedback
</div>
</div>
<div class="input-group is-invalid">
<div class="custom-file">
<input type="file" class="custom-file-input" id="validatedInputGroupCustomFile" required>
<label class="custom-file-label" for="validatedInputGroupCustomFile">Choose file...</label>
</div>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
<div class="invalid-feedback">
Example invalid input group feedback
</div>
</form>
ຄຳແນະນຳ
ຖ້າຮູບແບບແບບຟອມຂອງທ່ານອະນຸຍາດໃຫ້ມັນ, ທ່ານສາມາດແລກປ່ຽນບົດ .{valid|invalid}-feedback
ຮຽນສໍາລັບ .{valid|invalid}-tooltip
ຊັ້ນຮຽນເພື່ອສະແດງຄໍາຄຶດຄໍາເຫັນກ່ຽວກັບຄວາມຖືກຕ້ອງໃນຄໍາແນະນໍາທີ່ມີຮູບແບບ. ໃຫ້ແນ່ໃຈວ່າມີພໍ່ແມ່ position: relative
ຢູ່ກັບມັນສໍາລັບການວາງຕໍາແຫນ່ງຄໍາແນະນໍາ. ໃນຕົວຢ່າງຂ້າງລຸ່ມນີ້, ຫ້ອງຮຽນຖັນຂອງພວກເຮົາມີອັນນີ້ຢູ່ແລ້ວ, ແຕ່ໂຄງການຂອງທ່ານອາດຈະຕ້ອງການການຕັ້ງຄ່າທາງເລືອກ.
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationTooltip01">First name</label>
<input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
<div class="valid-tooltip">
Looks good!
</div>
</div>
<div class="col-md-6 mb-3">
<label for="validationTooltip02">Last name</label>
<input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
<div class="valid-tooltip">
Looks good!
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationTooltip03">City</label>
<input type="text" class="form-control" id="validationTooltip03" required>
<div class="invalid-tooltip">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationTooltip04">State</label>
<select class="custom-select" id="validationTooltip04" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div class="invalid-tooltip">
Please select a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationTooltip05">Zip</label>
<input type="text" class="form-control" id="validationTooltip05" required>
<div class="invalid-tooltip">
Please provide a valid zip.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
ປັບແຕ່ງ
ສະຖານະການກວດສອບສາມາດປັບແຕ່ງຜ່ານ Sass ດ້ວຍ $form-validation-states
ແຜນທີ່. ຕັ້ງຢູ່ໃນ _variables.scss
ໄຟລ໌ຂອງພວກເຮົາ, ແຜນທີ່ Sass ນີ້ຖືກ looped ເພື່ອສ້າງຄ່າເລີ່ມຕົ້ນ valid
/invalid
ການ ກວດສອບ. ລວມມີແຜນທີ່ທີ່ຊ້ອນກັນເພື່ອປັບແຕ່ງສີ ແລະໄອຄອນຂອງແຕ່ລະລັດ. ໃນຂະນະທີ່ບໍ່ມີລັດອື່ນໄດ້ຮັບການສະຫນັບສະຫນູນຈາກຕົວທ່ອງເວັບ, ຜູ້ທີ່ໃຊ້ຄໍເຕົ້າໄຂ່ທີ່ກໍານົດເອງສາມາດເພີ່ມຄໍາຄຶດຄໍາເຫັນແບບຟອມທີ່ສັບສົນຫຼາຍ.
ກະລຸນາຮັບຊາບວ່າພວກເຮົາບໍ່ແນະນໍາໃຫ້ປັບແຕ່ງຄ່າເຫຼົ່ານີ້ໂດຍບໍ່ມີການດັດແກ້form-validation-state
mixin.
// Sass map from `_variables.scss`
// Override this and recompile your Sass to generate different states
$form-validation-states: map-merge(
(
"valid": (
"color": $form-feedback-valid-color,
"icon": $form-feedback-icon-valid
),
"invalid": (
"color": $form-feedback-invalid-color,
"icon": $form-feedback-icon-invalid
)
),
$form-validation-states
);
// Loop from `_forms.scss`
// Any modifications to the above Sass map will be reflected in your compiled
// CSS via this loop.
@each $state, $data in $form-validation-states {
@include form-validation-state($state, map-get($data, color), map-get($data, icon));
}
ການກວດສອບການປ້ອນຂໍ້ມູນກຸ່ມ
ເພື່ອກວດຫາອົງປະກອບໃດທີ່ຕ້ອງການມຸມມົນພາຍໃນກຸ່ມປ້ອນຂໍ້ມູນທີ່ມີການກວດສອບ, ກຸ່ມປ້ອນຂໍ້ມູນຕ້ອງການເພີ່ມເຕີມ.has-validation
ຫ້ອງຮຽນເພີ່ມເຕີມ.
<div class="input-group has-validation">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
ແບບຟອມທີ່ກໍາຫນົດເອງ
ສໍາລັບການປັບແຕ່ງເພີ່ມເຕີມແລະຄວາມສອດຄ່ອງຂອງຕົວທ່ອງເວັບຂ້າມ, ໃຊ້ອົງປະກອບແບບຟອມທີ່ກໍາຫນົດເອງຢ່າງສົມບູນຂອງພວກເຮົາເພື່ອທົດແທນຄ່າເລີ່ມຕົ້ນຂອງຕົວທ່ອງເວັບ. ພວກມັນຖືກສ້າງຂື້ນຢູ່ເທິງສຸດຂອງ markup semantic ແລະສາມາດເຂົ້າເຖິງໄດ້, ດັ່ງນັ້ນພວກມັນເປັນການທົດແທນທີ່ແຂງສໍາລັບການຄວບຄຸມແບບຟອມເລີ່ມຕົ້ນ.
ກ່ອງກວດ ແລະວິທະຍຸ
ແຕ່ລະ checkbox ແລະວິທະຍຸ <input>
ແລະ <label>
ການຈັບຄູ່ແມ່ນຫໍ່ຢູ່ໃນ <div>
ເພື່ອສ້າງການຄວບຄຸມທີ່ກໍາຫນົດເອງຂອງພວກເຮົາ. ຕາມໂຄງສ້າງ, ນີ້ແມ່ນວິທີການດຽວກັນກັບຄ່າເລີ່ມຕົ້ນຂອງພວກເຮົາ .form-check
.
ພວກເຮົາໃຊ້ຕົວເລືອກອ້າຍເອື້ອຍນ້ອງ ( ~
) ສໍາລັບທຸກ <input>
ລັດຂອງພວກເຮົາ—ເຊັ່ນ :checked
—ເພື່ອຈັດຮູບແບບຕົວຊີ້ບອກແບບຟອມແບບກຳນົດເອງຂອງພວກເຮົາໃຫ້ຖືກຕ້ອງ. ເມື່ອລວມເຂົ້າກັບ .custom-control-label
ຫ້ອງຮຽນ, ພວກເຮົາຍັງສາມາດຈັດຮູບແບບຂໍ້ຄວາມສໍາລັບແຕ່ລະລາຍການໂດຍອີງໃສ່ສະ <input>
ຖານະຂອງ.
ພວກເຮົາເຊື່ອງຄ່າເລີ່ມຕົ້ນ <input>
ທີ່ມີ opacity
ແລະນໍາໃຊ້ .custom-control-label
ເພື່ອສ້າງຕົວຊີ້ວັດຮູບແບບທີ່ກໍານົດເອງໃຫມ່ໃນສະຖານທີ່ຂອງຕົນກັບ ::before
ແລະ ::after
. ແຕ່ຫນ້າເສຍດາຍ, ພວກເຮົາບໍ່ສາມາດສ້າງແບບກໍານົດເອງຈາກພຽງແຕ່ <input>
ເນື່ອງຈາກວ່າ CSS ຂອງcontent
ບໍ່ໄດ້ເຮັດວຽກຢູ່ໃນອົງປະກອບນັ້ນ.
ຢູ່ໃນສະຖານະທີ່ກວດສອບແລ້ວ, ພວກເຮົາໃຊ້ ໄອຄອນ SVG ຝັງ base64 ຈາກ Open Iconic . ອັນນີ້ໃຫ້ພວກເຮົາມີການຄວບຄຸມທີ່ດີທີ່ສຸດສໍາລັບການຄໍເຕົ້າໄຂ່ທີ່ແລະການຈັດຕໍາແຫນ່ງໃນທົ່ວຕົວທ່ອງເວັບແລະອຸປະກອນ.
ປ່ອງໝາຍ
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>
ກ່ອງເຊັກແບບກຳນົດເອງຍັງສາມາດໃຊ້ :indeterminate
pseudo class ເມື່ອຕັ້ງດ້ວຍຕົນເອງຜ່ານ JavaScript (ບໍ່ມີຄຸນລັກສະນະ HTML ທີ່ມີຢູ່ສໍາລັບການລະບຸມັນ).
ຖ້າທ່ານກໍາລັງໃຊ້ jQuery, ບາງສິ່ງບາງຢ່າງເຊັ່ນນີ້ຄວນຈະພຽງພໍ:
$('.your-checkbox').prop('indeterminate', true)
ວິທະຍຸ
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>
ໃນແຖວ
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline1" name="customRadioInline" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline2" name="customRadioInline" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>
ຄົນພິການ
ກ່ອງໝາຍ ແລະວິທະຍຸແບບກຳນົດເອງຍັງສາມາດຖືກປິດການນຳໃຊ້ໄດ້. ເພີ່ມ disabled
ຄຸນສົມບັດ boolean ໃສ່ <input>
ຕົວຊີ້ບອກ ແລະລາຍລະອຽດປ້າຍກຳກັບຈະຖືກຈັດຮູບແບບອັດຕະໂນມັດ.
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheckDisabled1" disabled>
<label class="custom-control-label" for="customCheckDisabled1">Check this custom checkbox</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" name="radioDisabled" id="customRadioDisabled2" class="custom-control-input" disabled>
<label class="custom-control-label" for="customRadioDisabled2">Toggle this custom radio</label>
</div>
ສະວິດ
ສະວິດມີເຄື່ອງໝາຍຂອງກ່ອງກາໝາຍແບບກຳນົດເອງ ແຕ່ໃຊ້ .custom-switch
ຊັ້ນເພື່ອສະແດງສະຫຼັບສະຫຼັບ. ສະວິດຍັງສະຫນັບສະຫນູນ disabled
ຄຸນລັກສະນະ.
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch1">
<label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
<label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>
ເລືອກເມນູ
<select>
ເມນູແບບກຳນົດເອງຕ້ອງການພຽງແຕ່ຫ້ອງຮຽນແບບກຳນົດເອງ, ເພື່ອ .custom-select
ກະຕຸ້ນຮູບແບບການກຳນົດເອງ. ຮູບແບບກຳນົດເອງຖືກຈຳກັດໃຫ້ <select>
ມີລັກສະນະເບື້ອງຕົ້ນ ແລະບໍ່ສາມາດແກ້ໄຂໄດ້ <option>
ເນື່ອງຈາກຂໍ້ຈຳກັດຂອງບຣາວເຊີ.
<select class="custom-select">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
ເຈົ້າອາດຈະເລືອກຈາກການເລືອກແບບກຳນົດເອງຂະໜາດນ້ອຍ ແລະຂະໜາດໃຫຍ່ເພື່ອໃຫ້ກົງກັບຂະໜາດຕົວໜັງສືຂອງພວກເຮົາ.
<select class="custom-select custom-select-lg mb-3">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="custom-select custom-select-sm">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
ຄຸນລັກ ສະ multiple
ນະຍັງໄດ້ສະຫນັບສະຫນູນ:
<select class="custom-select" multiple>
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
ດັ່ງທີ່ເປັນ size
ຄຸນລັກສະນະ:
<select class="custom-select" size="3">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
ຊ່ວງ
ສ້າງ <input type="range">
ການຄວບຄຸມທີ່ກໍາຫນົດເອງດ້ວຍ .custom-range
. ຕິດຕາມ (ພື້ນຫລັງ) ແລະຫົວໂປ້ (ຄ່າ) ທັງສອງຖືກຈັດຮູບແບບໃຫ້ປາກົດຄືກັນໃນທົ່ວຕົວທ່ອງເວັບ. ຍ້ອນວ່າພຽງແຕ່ IE ແລະ Firefox ສະຫນັບສະຫນູນ "ຕື່ມ" ຕິດຕາມຂອງພວກເຂົາຈາກຊ້າຍຫຼືຂວາຂອງໂປ້ມືເພື່ອຊີ້ໃຫ້ເຫັນເຖິງຄວາມກ້າວຫນ້າ, ພວກເຮົາບໍ່ໄດ້ສະຫນັບສະຫນູນມັນ.
<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">
ໄລຍະການປ້ອນຂໍ້ມູນມີຄ່າ implicit ສໍາລັບ min
ແລະ max
— 0
ແລະ 100
, ຕາມລໍາດັບ. ທ່ານອາດຈະກໍານົດຄ່າໃຫມ່ສໍາລັບຜູ້ທີ່ໃຊ້ min
ແລະ max
ຄຸນລັກສະນະຕ່າງໆ.
<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">
ໂດຍຄ່າເລີ່ມຕົ້ນ, ໄລຍະການປ້ອນຂໍ້ມູນ “snap” ໄປຫາຄ່າຈຳນວນເຕັມ. ເພື່ອປ່ຽນອັນນີ້, ທ່ານສາມາດລະບຸ step
ຄ່າໄດ້. ໃນຕົວຢ່າງຂ້າງລຸ່ມນີ້, ພວກເຮົາເພີ່ມຈໍານວນຂັ້ນຕອນສອງເທົ່າໂດຍໃຊ້ step="0.5"
.
<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">
ຕົວທ່ອງເວັບຂອງໄຟລ໌
ການປ້ອນຂໍ້ມູນໄຟລ໌ແມ່ນ gnarly ທີ່ສຸດຂອງກຸ່ມແລະຮຽກຮ້ອງໃຫ້ມີ JavaScript ເພີ່ມເຕີມຖ້າຫາກວ່າທ່ານຕ້ອງການທີ່ຈະເຊື່ອມຕໍ່ກັບການ ເລືອກໄຟລ໌ທີ່ເປັນປະໂຫຍດ ... ແລະຂໍ້ຄວາມຊື່ໄຟລ໌ທີ່ເລືອກ.
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
ພວກເຮົາເຊື່ອງໄຟລ໌ເລີ່ມຕົ້ນ <input>
ໂດຍຜ່ານ opacity
ແລະແທນທີ່ຮູບແບບ <label>
. ປຸ່ມໄດ້ຖືກສ້າງຂື້ນແລະຈັດຕໍາແຫນ່ງດ້ວຍ ::after
. ສຸດທ້າຍ, ພວກເຮົາປະກາດ a width
ແລະ height
on the<input>
ໄລຍະຫ່າງທີ່ເຫມາະສົມສໍາລັບເນື້ອຫາອ້ອມຂ້າງ.
ການແປ ຫຼືປັບແຕ່ງສະຕຣິງດ້ວຍ SCSS
ປະ :lang()
ເພດ pseudo-class ແມ່ນໃຊ້ເພື່ອອະນຸຍາດໃຫ້ແປຂໍ້ຄວາມ "Browse" ເປັນພາສາອື່ນໆ. ລົບລ້າງ ຫຼືເພີ່ມລາຍການໃສ່ $custom-file-text
ຕົວແປ Sass ດ້ວຍ ແທັກພາສາ ທີ່ກ່ຽວຂ້ອງ ແລະສະຕຣິງທີ່ຖືກແປ. ສາຍພາສາອັງກິດສາມາດປັບແຕ່ງໄດ້ຄືກັນ. ຕົວຢ່າງ, ນີ້ແມ່ນວິທີທີ່ຄົນຫນຶ່ງອາດຈະເພີ່ມການແປພາສາແອສປາໂຍນ (ລະຫັດພາສາສະເປນແມ່ນ es
):
$custom-file-text: (
en: "Browse",
es: "Elegir"
);
ນີ້ແມ່ນ lang(es)
ການປະຕິບັດກ່ຽວກັບການປ້ອນໄຟລ໌ແບບກຳນົດເອງສຳລັບການແປພາສາແອສປາໂຍນ:
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFileLang" lang="es">
<label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>
ທ່ານຈະຕ້ອງຕັ້ງພາສາຂອງເອກະສານຂອງເຈົ້າ (ຫຼືຕົ້ນໄມ້ຍ່ອຍຂອງມັນ) ຢ່າງຖືກຕ້ອງເພື່ອໃຫ້ຂໍ້ຄວາມທີ່ຖືກຕ້ອງຖືກສະແດງ. ນີ້ສາມາດເຮັດໄດ້ໂດຍໃຊ້ ຄຸນລັກສະນະ ຂອງlang
ອົງ <html>
ປະກອບຫຼື Content-Language
HTTP header , ໃນບັນດາວິທີການອື່ນໆ.
ການແປ ຫຼືປັບແຕ່ງສະຕຣິງດ້ວຍ HTML
Bootstrap ຍັງໃຫ້ວິທີການແປຂໍ້ຄວາມ "Browse" ໃນ HTML ດ້ວຍ data-browse
ຄຸນລັກສະນະທີ່ສາມາດເພີ່ມໃສ່ປ້າຍຊື່ທີ່ກໍາຫນົດເອງ (ຕົວຢ່າງໃນພາສາດັດ):
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFileLangHTML">
<label class="custom-file-label" for="customFileLangHTML" data-browse="Bestand kiezen">Voeg je document toe</label>
</div>