Nauč sa HTML od základov – 6. diel: Formuláre a vstupné polia v HTML

Vitajte v šiestej časti nášho seriálu o HTML! V tomto dieli sa budeme venovať vytváraniu formulárov a používaniu vstupných polí. Formuláre sú základným nástrojom na zber informácií od používateľov na webových stránkach, ako sú prihlasovacie údaje, registrácie, vyhľadávania, kontaktné údaje a podobne.

Základná štruktúra formulára

Formulár v HTML sa vytvára pomocou značky <form>, ktorá obklopuje všetky vstupné prvky. Formulár tiež obsahuje dva základné atribúty:

• action: Určuje URL, kam sa údaje z formulára odošlú.
• method: Určuje spôsob odosielania dát (najčastejšie používané metódy sú POST a GET).

Príklad formulára:

<form action="submit.php" method="POST">
  <label for="meno">Meno:</label>
  <input type="text" id="meno" name="meno"><br><br>

  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email"><br><br>

  <input type="submit" value="Odoslať">
</form>

• <label>: Značka pre textový popis vstupného poľa. Používanie <label> zlepšuje prístupnosť.
• <input>: Vstupné pole pre údaje. Atribút type definuje typ vstupu (napr. textové pole, e-mailové pole, heslo atď.).
• <submit>: Tlačidlo na odoslanie formulára.

Typy vstupných polí

Vstupné polia sú rôznych typov, ktoré umožňujú zhromažďovať rôzne druhy údajov od používateľov. Pozrime sa na najbežnejšie používané typy.

Textové pole (type="text")

Používa sa na zadanie obyčajného textu. Najčastejšie sa používa pre meno, priezvisko, adresu atď.

<input type="text" name="meno">

E-mailové pole (type="email")

Toto vstupné pole je špeciálne navrhnuté na zadanie e-mailovej adresy. Prehliadače vykonávajú základnú validáciu e-mailových adries.

<input type="email" name="email">

Heslo (type="password")

Vstupné pole pre heslo. Zadané znaky sa zobrazujú ako bodky alebo hviezdičky.

<input type="password" name="heslo">

Tlačidlá (type="submit" a type="reset")

• submit: Tlačidlo na odoslanie formulára.
• reset: Tlačidlo na resetovanie hodnôt vo formulári.

<input type="submit" value="Odoslať">
<input type="reset" value="Resetovať">

Zaškrtávacie políčka (type="checkbox")

Používa sa na výber viacerých možností.

<input type="checkbox" name="hobby" value="sport"> Šport
<input type="checkbox" name="hobby" value="citanie"> Čítanie

Prepínače (type="radio")

Prepínače umožňujú vybrať len jednu možnosť z viacerých.

<input type="radio" name="pohlavie" value="muz"> Muž
<input type="radio" name="pohlavie" value="zena"> Žena

Rozbaľovací zoznam (<select>)

Rozbaľovací zoznam umožňuje používateľovi vybrať jednu alebo viac možností z ponuky.

<select name="krajina">
  <option value="slovensko">Slovensko</option>
  <option value="cesko">Česko</option>
  <option value="polsko">Poľsko</option>
</select>

Pole na viac riadkov (<textarea>)

Používa sa na zadanie dlhšieho textu alebo komentára.

<textarea name="komentar" rows="4" cols="50"></textarea>

Validácia údajov

Validácia je dôležitá na zabezpečenie, že používateľ zadal správne údaje. HTML5 podporuje základnú validáciu pomocou atribútov, ako sú required, minlength, maxlength, a ďalšie.

Príklad validácie:

<form action="submit.php" method="POST">
  <label for="meno">Meno:</label>
  <input type="text" id="meno" name="meno" required minlength="3"><br><br>

  <label for="vek">Vek:</label>
  <input type="number" id="vek" name="vek" min="18" max="99"><br><br>

  <input type="submit" value="Odoslať">
</form>

• required: Zabezpečuje, že pole nemôže zostať prázdne.
• minlength a maxlength: Definujú minimálny a maximálny počet znakov, ktoré môže používateľ zadať.
• min a max: Pre čísla definujú povolený rozsah hodnôt.

Prístupnosť formulárov

Dôležité je vytvárať formuláre, ktoré sú prístupné pre všetkých používateľov vrátane tých, ktorí používajú čítačky obrazovky alebo iné technológie. Používajte značky <label> na správne prepojenie popisov s vstupnými poľami. Atribút for v <label> musí zodpovedať atribútu id v príslušnom vstupnom poli.

Príklad prístupného formulára:

<form action="submit.php" method="POST">
  <label for="meno">Meno:</label>
  <input type="text" id="meno" name="meno" required><br><br>

  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email" required><br><br>

  <input type="submit" value="Odoslať">
</form>

Úloha pre vás

Na základe toho, čo ste sa naučili o formulároch, vytvorte HTML dokument, ktorý obsahuje formulár so vstupnými poľami pre:

• Meno a priezvisko (textové polia).
• E-mailovú adresu.
• Zaškrtávacie políčka pre výber viacerých záľub.
• Rozbaľovací zoznam s výberom krajiny.
• Tlačidlo na odoslanie formulára.

Záver 6. časti

V tejto časti sme sa naučili, ako vytvárať formuláre v HTML, aké typy vstupných polí existujú a ako ich správne používať. Formuláre sú nevyhnutným prvkom pre interakciu používateľov s webovými stránkami, či už ide o registrácie, prihlasovanie alebo zber údajov.

Pokračujte v seriáli:

• 7. diel: HTML5 a nové prvky.

V nasledujúcej časti sa budeme venovať novým prvkom v HTML5, ktoré prinášajú viac možností pre štruktúrovanie webových stránok a zlepšenie prístupnosti a výkonu.