Kako ćete kreirati HTML formu?

Za kreiranje HTML forme koristiću element <form>. Unutra će se nalaziti kontrolni elementi kao što su tekstualna polja (<input type="text">), polja za lozinku (<input type="password">), čekboksovi (<input type="checkbox">), radio dugmići (<input type="radio">), padajuće liste (<select> i <option>), tekstualne oblasti (<textarea>) i dugmad za slanje (<button type="submit"> ili <input type="submit">).

Svaki element forme će imati atribut name za identifikaciju na serverskoj strani i, uobičajeno, atribut id za povezivanje sa oznakom (<label>).

Atributi <form>:

• action: URL na koji će biti poslati podaci forme.
• method: HTTP metoda zahteva za slanje podataka (GET ili POST).
• enctype: Tip kodiranja podataka prilikom slanja (npr. multipart/form-data za upload fajlova).

Primer jednostavne forme:

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

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

  <input type="checkbox" id="remember" name="remember" value="yes">
  <label for="remember">Zapamti me</label><br><br>

  <label for="country">Zemlja:</label><br>
  <select id="country" name="country">
    <option value="ru">Rusija</option>
    <option value="us">SAD</option>
  </select><br><br>

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

  <button type="submit">Pošalji</button>
</form>

Validacija forme može biti implementirana i na klijentskoj i na serverskoj strani.

HTML5 atributi za validaciju:

• required: Polje je obavezno popuniti.
• minlength, maxlength: Minimalna i maksimalna dužina teksta.
• min, max: Minimalna i maksimalna vrednost za numerička polja.
• type sa različitim vrednostima (email, url, number, date itd.) za automatsku validaciju od strane pretraživača.
• pattern: Regularni izraz za validaciju unosa.

Primer sa HTML5 validacijom:

<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">Godine (od 18 do 99):</label><br>
  <input type="number" id="age" name="age" min="18" max="99"><br><br>

  <label for="zipcode">Poštanski broj (5 cifara):</label><br>
  <input type="text" id="zipcode" name="zipcode" pattern="\d{5}"><br><br>

  <button type="submit">Pošalji</button>
</form>

Za stilizaciju forme koristiće se CSS. Za složeniju logiku ili asinhrono slanje podataka koristiće se JavaScript. Za povećanje pristupačnosti forme koristiće se odgovarajući ARIA atributi i ispravna struktura HTML.