Tag HTML <fieldset>

Definicja i zastosowanie

<fieldset> Tag <legend> jest używany do grupowania powiązanych elementów w formularzu.

<fieldset> Tag <legend> rysuje ramkę wokół powiązanych elementów.

<legend> Tag <fieldset> definiuje tytuł elementu.

Proszę zobacz również:

Podręcznik referencyjny HTML DOM:Obiekt Fieldset

Przykład

Przykład 1

Grupuj powiązane elementy w formularzu:

<form action="/action_page.php">
  <fieldset>
    <legend>Informacje osobiste:</legend>
    <label for="fname">Imię:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Nazwisko:</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="birthday">Birthday:</label>
    <input type="date" id="birthday" name="birthday"><br><br>
    <input type="submit" value="Wyślij">
  </fieldset>
</form>

Spróbuj sam

Przykład 2

Użyj CSS do ustawienia stylu dla <fieldset> i <legend>:

<html>
<head>
<style>
fieldset {
  background-color: #eeeeee;
}
legend {
  background-color: gray;
  color: white;
  padding: 5px 10px;
}
input {
  margin: 5px;
}
</style>
</head>
<body>
<form action="/action_page.php">
  <fieldset>
    <legend>Informacje osobiste:</legend>
    <label for="fname">Imię:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Nazwisko:</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">E-mail:</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="birthday">Urodziny:</label>
    <input type="date" id="birthday" name="birthday"><br><br>
    <input type="submit" value="Wyślij">
  </fieldset>
</form>
</body>
</html>

Spróbuj sam

Uwagi i komentarze

Uwaga:Tag <legend> służy do zdefiniowania tytułu elementu <fieldset>.

Atrybut

Atrybut Wartość Opis
disabled disabled Określa, które grupy elementów formularza powinny być wyłączone.
form form_id Określa, do którego formularza należy pole zbiorcze.
name Tekst Określa nazwę pola zbiorczego.

Globalne atrybuty

<fieldset> Tagi wspierają również Globalne atrybuty HTML。

Atrybuty wydarzeń

<fieldset> Tagi wspierają również Atrybuty wydarzeń w HTML。

Domyślne ustawienia CSS

Większość przeglądarek wyświetli wartości domyślne poniżej <fieldset> Element:

fieldset {
  display: block;
  margin-left: 2px;
  margin-right: 2px;
  padding-top: 0.35em;
  padding-bottom: 0.625em;
  padding-left: 0.75em;
  padding-right: 0.75em;
  border: 2px groove (wartość wewnętrzna);
}

Wsparcie przeglądarek

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Wsparcie Wsparcie Wsparcie Wsparcie Wsparcie