HTML vorme kasutatakse kasutajalt sisendi küsimiseks (näiteks võimaldab see kasutada otsingukasti, logida või registreerida end veebilehel, anda tagasisidet). Enamasti saadetakse kasutajalt saadud sisend serverisse töötlemiseks.

Kuidas vormid töötavad

Vormid koosnevad kahest osast.

1. Esimene osa on see mida kasutaja näeb veebilehel – HTML tekstiväljad, nupud, valikukastid jne
2. Teise osa moodustab andmeid töötlev veebiserver, mis reeglina saadab vastuse tagasi kasutajale.

Võtame näiteks lihtsa registreerimisvormi:

1. kasutaja täidab nõutud HTML vormi väljad
2. vajutades nupule ‘Registreeru’ saadetakse nimi, parool ja email veebiserverile
3. veebiserverisse paigaldatud kood lisab uue kasutaja andmebaasi ja saadab kasutajale teksti õnnestumise kohta.

Vormi loomine

Vormi loomisel kasutame elementi <form>, mille algus- ja lõpumärgendi vahele lisatakse erinevaid vormi elemente nagu tekstiväljad, märkeruudud, valikukastid jm.

<form>
vormi elemedndid
</form>

Sisestusväljad

Vormi element <input> on üks olulisemaid vormi elemente, mille välimus sõltub talle lisatud type atribuudi väärtusest.

Mõned näited:

Tekstiväljad (text fields)

Vormile tekstivälja lisamiseks lisame elemendile <input> atribuudi type väärtusega text.

<form>
  <input type="text">
</form>

Nii näeks see välja brauseris:

Kuna sisestusvälju võib veebilehel olla mitu ning kui me soovime sisestusväljale sisestatud andmed saata serverisse, peame sisestusväljale lisama ka name atribuudi.

<form> 
  <input type="text" name="eesnimi">
  <input type="text" name="perekonnanimi">
</form>

Kui me soovime hiljem oma tekstivälju muuta või neist informatsiooni kätte saada JavaScripti kasutades, peame neile lisama ka id atribuudi.

<form> 
  <input type="text" id="eesnimi" name="eesnimi"> 
  <input type="text" id="perekonnanimi" name="perekonnanimi"> 
</form>

Soovi korral saame tekstiväljale lisada ka iseloomustava sildi kasutades elementi <label>. Elemendi <label> atribuut for väärtus peab olema võrdne <input> elemendi id väärtusega, millele soovime nimetuse lisada.

<form> 
  <label for="eesnimi">Eesnimi:</label>
  <input type="text" id="eesnimi" name="eesnimi"> 
</form>

Mitmerealine tekstiväli (textarea)

Mitmerealise tekstivälja loomiseks saame kasutada <textarea> elementi. Kasti kõrgus ja laius määrakse atribuutidega rows ja cols.

<form>
  <textarea name="tekstikast" rows="10" cols="30">
    ...
  </textarea>
</form>

Raadionupud (radio buttons)

Raadionuppudega on võimalus veebilehe külastajale anda võimalus valida üks etteantud valikutest. Lisaks atribuutidele id ja name peame määrama ka väärtuse atribuudile value. Selle põhjal saame teada, millised väärtused kasutaja selekteeris.

<form>
  <input type="radio" id="kollane" name="värv" value="kollane">
  <label for="kollane">Kollane</label><br>
  <input type="radio" id="punane" name="värv" value="punane">
  <label for="punane">Punane</label><br>
  <input type="radio" id="roheline" name="värv" value="roheline">
  <label for="roheline">Roheline</label><br>
</form>

<form>
  <input type="checkbox" id="vili1" name="vili1" value="õunad">
  <label for="vili1">Õunad</label><br>
  <input type="checkbox" id="vili2" name="vili2" value="pirnid">
  <label for="vili2">Pirnid</label><br>
  <input type="checkbox" id="vili3" name="vili3" value="banaanid">
  <label for="vili3">Banaanid</label><br>
</form>

<button type="button" onclick="alert('Tere maailm!')">Kliki mind!</button>

<form action="#" method="post">
  <label for="eesnimi">Eesnimi:</label> 
  <input type="text" id="eesnimi" name="eesnimi"><br>
  <label for="perekonnanimi">Perekonnanimi:</label>
  <input type="text" id="perekonnanimi" name="perekonnanimi"><br>
  <input type="submit" value="Kinnita">
</form>

<form>
  <label for="puuvili">Vali puuvili:</label>
  <select id="puuvili" name="puuvili">
    <option value="banaan">Banaan</option>
    <option value="õun">Õun</option>
    <option value="pirn">Pirn</option>
    <option value="ploom">Ploom</option>
  </select>
</form>