Jak budete vytvářet HTML formulář?

Pro vytvoření HTML formuláře použiji prvek <form>. Uvnitř budou umístěny ovládací prvky, jako jsou textová pole (<input type="text">), pole pro heslo (<input type="password">), zaškrtávací políčka (<input type="checkbox">), radiobuttony (<input type="radio">), rozbalovací seznamy (<select> a <option>), textové oblasti (<textarea>) a tlačítka odeslání (<button type="submit"> nebo <input type="submit">).

Každý prvek formuláře bude mít atribut name pro identifikaci na serverové straně a obvykle i atribut id pro spojení s popiskem (<label>).

Atributy <form>:

• action: URL, kam budou data formuláře odeslána.
• method: Metoda HTTP požadavku pro odeslání dat (GET nebo POST).
• enctype: Typ kódování dat při odeslání (například multipart/form-data pro nahrávání souborů).

Příklad jednoduchého formuláře:

<form action="/submit-form" method="post">
  <label for="username">Uživatelské jméno:</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">Zapamatovat si mě</label><br><br>

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

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

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

Validace formuláře může být realizována jak na straně klienta (s využitím HTML5 validace, JavaScriptu), tak na straně serveru.

HTML5 validace:

• required: Pole je povinné vyplnit.
• minlength, maxlength: Minimální a maximální délka textového pole.
• min, max: Minimální a maximální hodnota pro číselná pole.
• type s různými hodnotami (email, url, number, date atd.) pro automatickou validaci prohlížečem.
• pattern: Regulární výraz pro validaci vstupu.

Příklad s HTML5 validací:

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

  <label for="zipcode">PSČ (5 číslic):</label><br>
  <input type="text" id="zipcode" name="zipcode" pattern="\d{5}"><br><br>

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

Pro stylování formuláře se používá CSS. Pro složitější logiku nebo asynchronní odeslání dat se používá JavaScript. Pro zvýšení přístupnosti formuláře se používají odpovídající ARIA atributy a správná struktura HTML.