Ako budete vytvárať HTML formulár?

Pre vytvorenia HTML formulára použijem prvok <form>. Vo vnútri budú umiestnené ovládacie prvky, ako sú textové polia (<input type="text">), polia pre heslo (<input type="password">), zaškrtávacie políčka (<input type="checkbox">), radiobuttony (<input type="radio">), rozbaľovacie zoznamy (<select> a <option>), textové oblasti (<textarea>) a tlačidlá odoslania (<button type="submit"> alebo <input type="submit">).

Každý prvok formulára bude mať atribút name na identifikáciu na serverovej strane a zvyčajne aj atribút id na spojenie s popiskom (<label>).

Atribúty <form>:

• action: URL, kam budú odoslané údaje formulára.
• method: Metóda HTTP požiadavky na odoslanie údajov (GET alebo POST).
• enctype: Typ kódovania údajov pri odoslaní (napríklad multipart/form-data pre nahrávanie súborov).

Príklad jednoduchého formulára:

<form action="/submit-form" method="post">
  <label for="username">Používateľské meno:</label><br>
  <input type="text" id="username" name="username"><br><br>

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

  <input type="checkbox" id="remember" name="remember" value="yes">
  <label for="remember">Zapamätať si ma</label><br><br>

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

  <label for="message">Správa:</label><br>
  <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>

  <button type="submit">Odoslať</button>
</form>

Validácia formulára môže byť realizovaná ako na strane klienta (s využitím HTML5 atribútov validácie, JavaScriptom), tak aj na strane servera.

HTML5 atribúty validácie:

• required: Pole je povinné vyplniť.
• minlength, maxlength: Minimálna a maximálna dĺžka textového poľa.
• min, max: Minimálna a maximálna hodnota pre číselné polia.
• type s rôznymi hodnotami (email, url, number, date a pod.) pre automatickú validáciu prehliadačom.
• pattern: Regulárny výraz pre validáciu vstupu.

Príklad s HTML5 validáciou:

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

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

  <label for="zipcode">Poštový kód (5 číslic):</label><br>
  <input type="text" id="zipcode" name="zipcode" pattern="\d{5}"><br><br>

  <button type="submit">Odoslať</button>
</form>

Pre štýlovanie formulára sa používa CSS. Pre zložitejšiu logiku alebo asynchrónne odoslanie údajov sa používa JavaScript. Na zvýšenie dostupnosti formulára sa používajú príslušné ARIA atribúty a správna štruktúra HTML.