Bootstrap 5 Label Floating Form

ຂໍ້ປະສານສະໝອງ/ການຫຼິ້ນຫົວ

ໂດຍການນຳໃຊ້ຂໍ້ປະສານທີ່ຢູ່ສູງບັນຈຸການບັນທືກ

ຜ່ານການນຳໃຊ້ຂໍ້ປະສານສະໝອງຫຼັງການເລືອກບາງຄຳພິມມາຢູ່ບ່ອນບາງຄຳເຂົ້າບັນຈຸການຫຼິ້ນຫົວຫຼັງການຄຳພິມມາຢູ່ບ່ອນບາງຄຳເຂົ້າບັນຈຸການຫຼິ້ນຫົວ

ຕົວຢ່າງ

<div class="form-floating mb-3 mt-3">
  <input type="text" class="form-control" id="email" placeholder="ກະລຸນາເພີ່ມທີ່ຢູ່ອີເມວ" name="email">
  <label for="email">ອີເມວ</label>
</div>
<div class="form-floating mt-3 mb-3">
  <input type="text" class="form-control" id="pwd" placeholder="ກະນາດຊົງຄະນນ" name="pswd">
  <label for="pwd">ຄະນນ</label>
</div>

ທົດລອງດ້ວຍຕົວເອງ

ຕົວຢ່າງຂອງການພັດທະນາ ການພັດທະນາ ການພັດທະນາ

<label>ປະກອບ <input> ຕ້ອງຢູ່ຫລັງປະກອບ <input> ແລະ ປະກອບ <input> ທັງໝົດຕ້ອງ placeholder ປະສົມປະສານ (ເຖິງວ່າບໍ່ໄດ້ສະແດງ).

Textarea

ກໍ່ຈະມີຢູ່ບ່ອນນີ້:

ຕົວຢ່າງ

<div class="form-floating">
  <textarea class="form-control" id="comment" name="text" placeholder="ຄຳເຫັນຂອງທ່ານ"></textarea>
  <label for="comment">ຄຳເຫັນ</label>
</div>

ທົດລອງດ້ວຍຕົວເອງ

ອຸປະກອນເລືອກຫົວ

ທ່ານສາມາດໃຊ້ 'ຕົວແທນຫົວ' ໃນອຸປະກອນເລືອກຫົວ. ແຕ່ພວກມັນບໍ່ຈະປິ່ນປົວ/ກະຕຸບາງ. ຫົວຈະສະແດງຢູ່ທີ່ປະຕູທີ່ສຸດຂອງອຸປະກອນເລືອກຫົວ:

ຕົວຢ່າງ

<div class="form-floating">
  <select class="form-select" id="sel1" name="sellist">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
  <label for="sel1" class="form-label">ເລືອກຫົວທີ່ສະໜັບສະໜູນ (ເລືອກຫນຶ່ງ):</label>
</div>

ທົດລອງດ້ວຍຕົວເອງ