Kodulehe loomine, 16. kord

Vormi kujundamine, kasutades Bootstrap 5

Olles nüüd lähemalt tutvunud teegiga Bootstrap 5, saame nüüd ka 10. korral loodud vormi sellega kaasaegsemalt kujundada (muutes vormi kompaktsemaks):

<form action="andmed.php" id="andmevorm" method="post" class="d-grid gap-2 mb-4">
 <div class="row">
  <div class="col">
   <input class="form-control" type="text" name="nimi" placeholder="Sisestage palun oma nimi"><br>
  </div>
  <div class="col">  
    <input class="form-control" type="email" name="epost" placeholder="Sisestage palun oma e-posti aadress">
  </div>
 </div>
 <div class="row">
  <div class="col"> 
   <label for="sonum">Sõnum:</label>    
   <textarea class="form-control" id="sonum" name="sonum" rows="3" columns="30" placeholder="Palun kirjutage siia oma sõnumi sisu"></textarea>
 </div>
 <div class="col">  
   <div class="form-check">
     <input class="form-check-input" type="radio" id="valik1" name="valikud" value="Roblox">
     <label class="form-check-label" for="valik1">Roblox</label>
   </div>
   <div class="form-check">
     <input class="form-check-input" type="radio" id="valik2" name="valikud" value="Minecraft">
     <label class="form-check-label" for="valik2">Minecraft</label>
   </div>
   <div class="form-check">
     <input class="form-check-input" type="radio" id="valik3" name="valikud" value="Muu">
      <label class="form-check-label" for="valik3">Muu</label>
   </div>
  </div>
 </div> 
 <div class="row">
  <div class="col">
   <label class="form-control-label" for="autod">Valige palun oma lemmikauto:</label>
    <select class="form-select" name="auto" id="autod" form="andmevorm">
      <option value="Volvo">Volvo</option>
      <option value="Saab">Saab</option>
      <option value="Toyota">Toyota</option>
      <option value="Audi">Audi</option>
    </select>
   </div>
   <div class="col">
    <div class="form-check">
     <input class="form-check-input" type="checkbox" id="soiduvahend1" name="soiduvahend1" value="Ratas">
     <label class="form-check-label" for="soiduvahend1"> Mul on jalgratas</label>
    </div> 
    <div class="form-check">
     <input class="form-check-input" type="checkbox" id="soiduvahend2" name="soiduvahend2" value="Touks">
     <label class="form-check-label" for="soiduvahend2"> Mul on tõukeratas</label>
    </div>
   </div> 
  </div> 
  <div class="row">
   <div class="d-grid col-6"> 
    <input class="btn btn-secondary" type="reset" value="Tühista">
   </div>
   <div class="d-grid col-6">
     <input class="btn btn-primary" type="submit" value="Edasta">
   </div>
  </div>
</form>

Ehk siis, veidi selgitust selle asja juurde:

• vormi määratlemise real lisame klassid class=”d-grid gap-2 mb-4″, kus:
  • d-grid – määratleb, et kasutame kohanduvaid kaste
  • gap-2 – määratleb vormi elementidevahelise vahe – 2 ühikut
  • mb-4 – määratleb vormi alumise serva kauguse järgmisest elementidest
• vormis tekitatakse erinevad read: <div class=”row“>
• ridades tekitatakse erinevad veerud: <div class=”col“>
• nuppud muudetakse veeru laiuseks (kuna meil on 2 nuppu ja kogu lehel on vaikimis 12 veergu, siis tekitame 6 veeru laiused nupud, kasutades kohanduvaid kaste) class=”d-grid col-6“