Kuidas te lood HTML-vormi?

Loomaks HTML-vormi, kas kasutab <form> elementi. Selle sees paiknevad juhtnupud, nagu tekstiväljad (<input type="text">), parooliväljad (<input type="password">), märgistused (<input type="checkbox">), raadiobuttonid (<input type="radio">), rippmenüüd (<select> ja <option>), tekstialad (<textarea>) ning saatnupud (<button type="submit"> või <input type="submit">).

Iga vormielement omab name atribuuti selle serveripoolseks identifitseerimiseks ning tavaliselt ka id atribuuti, et see saaks olla seotud <label>-iga.

<form>-i atribuute:

• action: URL, kuhu vormi andmed saadetakse.
• method: HTTP päringu meetod (GET või POST).
• enctype: Andmete kodeerimise tüüp saatmisel (näiteks multipart/form-data failide üleslaadimiseks).

Näide lihtsast vormist:

<form action="/submit-form" method="post">
  <label for="username">Kasutajanimi:</label><br>
  <input type="text" id="username" name="username"><br><br>

  <label for="password">Parool:</label><br>
  <input type="password" id="password" name="password"><br><br>

  <input type="checkbox" id="remember" name="remember" value="yes">
  <label for="remember">Mäleta mind</label><br><br>

  <label for="country">Riik:</label><br>
  <select id="country" name="country">
    <option value="ru">Venemaa</option>
    <option value="us">USA</option>
  </select><br><br>

  <label for="message">Sõnum:</label><br>
  <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>

  <button type="submit">Saada</button>
</form>

Vormide valideerimine saab olema teostatud nii kliendi- kui ka serveripoolselt.

HTML5 valideerimisatribuutid:

• required: Väli on kohustuslik täita.
• minlength, maxlength: Minimaalne ja maksimaalne tekstipikkus.
• min, max: Minimaalne ja maksimaalne väärtus arvuväljadele.
• type erinevate väärtustega (email, url, number, date ja nii edasi) automaatseks valideerimiseks brauseri poolt.
• pattern: Regulaaravaldis sisendi valideerimiseks.

Näide HTML5 valideerimisega:

<form action="/submit-form" method="post">
  <label for="email">E-post:</label><br>
  <input type="email" id="email" name="email" required><br><br>

  <label for="age">Vanus (18 kuni 99):</label><br>
  <input type="number" id="age" name="age" min="18" max="99"><br><br>

  <label for="zipcode">Postiindeks (5 numbrit):</label><br>
  <input type="text" id="zipcode" name="zipcode" pattern="\d{5}"><br><br>

  <button type="submit">Saada</button>
</form>

Vormi stiilimiseks kasutatakse CSS-i. Keerulisema loogika või asünkroonse andmeedastuse korral kasutatakse JavaScripti. Parandamaks vormi ligipääsetavust, kasutatakse sobivaid ARIA-atribuutte ja õiget HTML-struktuuri.