Formuláře

<!-- Klasický POST formulář -->
<form action="/kontakt" method="POST">
  <label for="jmeno">Jméno:</label>
  <input type="text" id="jmeno"
    name="jmeno" required>
  <button type="submit">Odeslat</button>
</form>

<!-- AJAX odeslání -->
<form id="myForm" novalidate>
  <!-- pole... -->
  <button type="submit">Odeslat</button>
</form>

<script>
document.getElementById('myForm')
  .addEventListener('submit', async (e) => {
    e.preventDefault();
    const data = new FormData(e.target);

    try {
      const res = await fetch('/api/kontakt', {
        method: 'POST',
        body: data
      });
      if (res.ok) alert('Odesláno!');
    } catch (err) {
      console.error(err);
    }
  });
</script>

<!-- Upload souboru -->
<form method="POST"
  enctype="multipart/form-data">
  <input type="file" name="foto">
  <button type="submit">Nahrát</button>
</form>

<!-- Text -->
<input type="text" name="jmeno"
  placeholder="Vaše jméno" required>

<!-- Email -->
<input type="email" name="email"
  autocomplete="email">

<!-- Heslo s min délkou -->
<input type="password" name="heslo"
  minlength="8" required>

<!-- Číslo s rozsahem -->
<input type="number" name="mnozstvi"
  min="1" max="99" value="1">

<!-- Datum -->
<input type="date" name="datum"
  min="2024-01-01">

<!-- Checkbox -->
<input type="checkbox" id="souhlas"
  name="souhlas" required>
<label for="souhlas">
  Souhlasím s podmínkami
</label>

<!-- Radio skupina -->
<input type="radio" id="muz"
  name="gender" value="muz">
<label for="muz">Muž</label>

<input type="radio" id="zena"
  name="gender" value="zena">
<label for="zena">Žena</label>

<!-- Upload (jen obrázky) -->
<input type="file" name="foto"
  accept="image/*" multiple>

<!-- Slider -->
<input type="range" name="hlasitost"
  min="0" max="100" value="50">

<!-- Barva -->
<input type="color" name="barva"
  value="#F75B9E">

<!-- Skryté pole (CSRF token) -->
<input type="hidden" name="csrf"
  value="abc123xyz">

<!-- Pattern validace (IČO 8 číslic) -->
<input type="text" name="ico"
  pattern="[0-9]{8}"
  title="IČO musí mít 8 číslic">

<!-- Metoda 1: for + id -->
<label for="email">Email:</label>
<input type="email"
  id="email" name="email">

<!-- Metoda 2: obalení (bez id) -->
<label>
  Heslo:
  <input type="password" name="heslo">
</label>

<!-- Checkbox — obalení = velká plocha -->
<label>
  <input type="checkbox" name="novinky">
  Přihlásit k odběru novinek
</label>

<!-- Povinné pole -->
<label for="email">
  Email
  <span aria-hidden="true"
    style="color:red">*</span>
</label>
<input type="email" id="email"
  required aria-required="true">

<!-- Skrytý label (visually hidden) -->
<label for="search" class="sr-only">
  Hledat na webu
</label>
<input type="search" id="search"
  placeholder="Hledat...">

<style>
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
</style>

<!-- Základní select -->
<label for="kraj">Kraj:</label>
<select id="kraj" name="kraj" required>
  <option value="">
    -- Vyberte kraj --
  </option>
  <optgroup label="Čechy">
    <option value="PH">Praha</option>
    <option value="JC">Jihočeský</option>
    <option value="JM" selected>
      Jihomoravský
    </option>
  </optgroup>
  <optgroup label="Morava">
    <option value="MS">
      Moravskoslezský
    </option>
  </optgroup>
</select>

<!-- Multiple výběr -->
<label for="jazyky">Jazyky:</label>
<select id="jazyky" name="jazyky[]"
  multiple size="4">
  <option value="cs">Čeština</option>
  <option value="en">Angličtina</option>
  <option value="de">Němčina</option>
  <option value="sk">Slovenština</option>
</select>
<small>Ctrl+klik = více možností</small>

<!-- Vlastní stylování -->
<style>
select {
  appearance: none;
  background-image: url("data:image/svg+xml,...");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2rem;
}
</style>

<!-- Základní textarea -->
<label for="zprava">Zpráva:</label>
<textarea
  id="zprava"
  name="zprava"
  rows="5"
  required
  maxlength="1000"
  placeholder="Napište nám..."
></textarea>

<!-- Textarea s počítadlem znaků -->
<label for="popis">Popis:</label>
<textarea id="popis" name="popis"
  maxlength="500"
  oninput="updateCount(this)"
></textarea>
<small id="count">0 / 500</small>

<script>
function updateCount(el) {
  document.getElementById('count')
    .textContent =
    `${el.value.length} / ${el.maxLength}`;
}
</script>

<!-- Auto-resize výšky -->
<textarea id="autosize"
  oninput="this.style.height='auto';
    this.style.height=this.scrollHeight+'px'"
  style="overflow:hidden"
></textarea>

<!-- CSS -->
<style>
textarea {
  width: 100%;
  resize: vertical; /* nebo: none */
  min-height: 100px;
  font-family: inherit;
  font-size: 1rem;
}
</style>

<!-- Submit -->
<button type="submit">Odeslat</button>

<!-- JS akce (type="button" nutné!) -->
<button type="button"
  onclick="toggleMenu()">
  Menu ☰
</button>

<!-- Ikonové tlačítko -->
<button type="button"
  aria-label="Smazat položku">
  <svg aria-hidden="true">
    <use href="#icon-delete"></use>
  </svg>
</button>

<!-- Loading stav -->
<button type="submit" id="submitBtn">
  Odeslat
</button>

<script>
document.querySelector('form')
  .addEventListener('submit', (e) => {
    const btn = document.getElementById(
      'submitBtn'
    );
    btn.disabled = true;
    btn.textContent = 'Odesílám...';
  });
</script>

<!-- Toggle tlačítko -->
<button
  type="button"
  aria-pressed="false"
  id="darkBtn"
  onclick="
    const p = this.getAttribute('aria-pressed');
    this.setAttribute('aria-pressed', p !== 'true');
  "
>
  Tmavý režim
</button>

<!-- Dvě submit tlačítka, různé akce -->
<button type="submit"
  formaction="/ulozit">
  Uložit
</button>
<button type="submit"
  formaction="/publikovat">
  Publikovat
</button>

<!-- Radio skupina -->
<fieldset>
  <legend>Pohlaví</legend>
  <label>
    <input type="radio"
      name="gender" value="muz">
    Muž
  </label>
  <label>
    <input type="radio"
      name="gender" value="zena">
    Žena
  </label>
  <label>
    <input type="radio"
      name="gender" value="jine">
    Jiné
  </label>
</fieldset>

<!-- Adresová sekce -->
<fieldset>
  <legend>Doručovací adresa</legend>
  <label for="ulice">Ulice:</label>
  <input type="text" id="ulice"
    name="ulice" autocomplete="street-address">
  <label for="mesto">Město:</label>
  <input type="text" id="mesto"
    name="mesto" autocomplete="address-level2">
</fieldset>

<!-- Disabled fieldset -->
<fieldset disabled>
  <legend>Fakturační údaje</legend>
  <!-- všechna pole zakázána -->
  <input type="text" name="firma">
</fieldset>

<!-- CSS: bez rámečku -->
<style>
fieldset {
  border: none;
  padding: 0;
  margin: 0 0 1.5rem;
}
legend {
  font-weight: 700;
  margin-bottom: 0.75rem;
}
</style>