close

Úvod do Form HTML: Struktura, typy vstupů a příklady

HTML form je klíčovou součástí vývoje webu, která umožňuje uživatelům komunikovat s webem a odesílat data na server. Form se používají pro širokou škálu účelů, jako je shromažďování form informací o uživateli, zpracování uživatelských vstupů a umožnění uživatelských akcí na webových stránkách. V tomto článku prozkoumáme atributy a různé typy vstupních polí, vybraných prvků, textových oblastí a tlačítek běžně používaných v HTML form.

Vstupní pole

  • <input type="text">: Vytvoří pole pro zadávání textu, do kterého mohou uživatelé zadávat alfanumerické znaky.
  • <input type="password">: Zobrazí pole pro zadání hesla, které maskuje zadané znaky.
  • <input type="email">: Poskytuje ověření e-mailu pro vstupní pole, která vyžadují platnou e-mailovou adresu.
  • <input type="number">: Omezí vstup pouze na číselné hodnoty.
  • <input type="checkbox">: Představuje zaškrtávací políčko, které mohou uživatelé vybrat nebo zrušit.
  • <input type="radio">: Představuje přepínač, který uživatelům umožňuje vybrat jednu možnost ze skupiny možností.
  • <input type="file">: Umožňuje uživatelům vybírat a nahrávat soubory.
  • <input type="submit">: Zobrazí tlačítko, které form po kliknutí odešle.
  • <input type="reset">: Zobrazí tlačítko, které obnoví form výchozí stav.
  • <input type="date">: Poskytuje výběr data pro výběr dat.
  • <input type="time">: Umožňuje uživatelům zadávat časové hodnoty.

Vyberte Prvky

  • <select>: Vytvoří rozevírací nabídku s volitelnými možnostmi.
  • <option>: Definuje možnost v rozbalovací nabídce umístěné uvnitř <select> značky.
  • <optgroup>: Seskupuje související možnosti v rozbalovací nabídce.
  • <select multiple>: Umožňuje uživatelům vybrat více možností současně podržením klávesy Ctrl(nebo klávesy Command na Macu) při kliknutí.

Textové oblasti

<textarea>: Vytvoří víceřádkové textové vstupní pole, do kterého mohou uživatelé zadávat a upravovat delší bloky textu. Jeho velikost lze měnit a konfigurovat pomocí atributů, jako jsou rows a cols definovat jeho rozměry.

Tlačítka

<button>: Představuje tlačítko, které může spouštět různé akce v rámci form. Lze jej použít k odeslání form, pomocí form funkce JavaScriptu nebo k přechodu na jinou stránku.

Příklad použití:

<form action="/submit-form" method="post">  
  <label for="name">Name:</label>  
  <input type="text" id="name" name="name" required>  
    
  <label for="email">Email:</label>  
  <input type="email" id="email" name="email" required>  
    
  <label for="message">Message:</label>  
  <textarea id="message" name="message" rows="4" cols="50"></textarea>  
    
  <label for="newsletter">Subscribe to Newsletter:</label>  
  <input type="checkbox" id="newsletter" name="newsletter">  
    
  <label for="color">Favorite Color:</label>  
  <select id="color" name="color">  
    <option value="red">Red</option>  
    <option value="blue">Blue</option>  
    <option value="green">Green</option>  
  </select>  
    
  <button type="submit">Submit</button>  
</form>

Tento příklad ukazuje použití různých form prvků, včetně input polí, textarea, a tlačítka. Neváhejte a upravte prvky a atributy na základě vašich konkrétních požadavků. checkbox select dropdown submit form