Grupowanie pól: fieldset i legend

Formularze - HTML i CSS: pierwsze strony (HTML/CSS/JS)

Duże formularze dzielimy na części. Znacznik <fieldset> obrysowuje grupę pól ramką, a <legend> wpisuje w tę ramkę jej tytuł. Przycisk type="reset" czyści wszystkie pola formularza i przywraca wartości startowe. Atrybut required oznacza pole obowiązkowe - przeglądarka pilnuje go przy próbie wysłania. Formularze z grupami często pojawiają się w arkuszach egzaminu INF.03. Wypełnij pola, a potem kliknij "Wyczyść".

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <title>Grupy pól</title>
</head>
<body>
  <h1>Karta uczestnika</h1>
  <form>
    <fieldset>
      <legend>Dane osobowe</legend>
      <label for="imie">Imię:</label>
      <input type="text" id="imie" name="imie" required><br>
      <label for="wiek">Wiek:</label>
      <input type="number" id="wiek" name="wiek" min="10" max="19">
    </fieldset>
    <fieldset>
      <legend>Rozmiar koszulki</legend>
      <input type="radio" id="s" name="rozmiar" value="S">
      <label for="s">S</label>
      <input type="radio" id="m" name="rozmiar" value="M" checked>
      <label for="m">M</label>
      <input type="radio" id="l" name="rozmiar" value="L">
      <label for="l">L</label>
    </fieldset>
    <button type="button">Zapisz</button>
    <button type="reset">Wyczyść</button>
  </form>
</body>
</html>

Ładowanie interaktywnego edytora... Jeśli się nie pojawi, włącz JavaScript.

Wszystkie lekcje kursu HTML i CSS: pierwsze strony · Zaloguj się, aby zapisać postęp na koncie.