Fieldset-Tag in HTML

Ein Fieldset-Tag in HTML hilft uns dabei, bestimmte Elemente, einige verwandte Elemente, an einem Ort zusammenzuführen, normalerweise in einem Formular. Das

Tag gruppiert unsere verwandten Elemente basierend auf Logik. Wenn das Fieldset-Tag verwendet wird, erstellt es einen Block oder eine Grenze um unsere oben genannten verwandten Elemente. Dieses Tag hilft dabei, Formularabschnitte in mehrere logische Abschnitte zu unterteilen.

Mit anderen Worten: Das

Das Tag hilft dabei, ein Layout zu definieren und so ein Formular zu organisieren und in logische Felder zu unterteilen, ohne Tabellen oder andere Mittel wie Unterteilungen zu verwenden. Das Fieldset-Tag hat einen

Tag, der zum Definieren eines Textes verwendet wird, z. B. eine Beschriftung für den fragmentierten Abschnitt.

Wie lautet die Syntax für die Verwendung von

Element?

Es ist eigentlich einfach,

Tag oder Element. Wie bei allen anderen HTML-Tags ist auch das

Auch das Tag hat ein öffnendes Tag und ein schließendes Tag. Das öffnende Tag wird als

geschrieben. und das schließende Tag hat den üblichen Schrägstrich vor dem Tag-Namen, z. B.

. Sehen Sie sich die Syntax für das

an. Tag.

Syntax:

<form>
<fieldset>
</fieldset>
</form>

Sehen Sie sich einen einfachen Codeauszug an, der ein Beispiel für

und unten:

<form>
<fieldset style="background:#e1eff2;">
<legend>Personal Information:</legend>
<div><label>Name:</label><input type="text"></div>
<div><label>Email:</label><input type="text"></div>
<div><label>DOB:</label><input type="text"></div>
<div><label>Place:</label><input type="text"></div>
</fieldset>
</form>

Ausgabe:

Wie oben besprochen, ist das

Das im obigen Code verwendete Element stellt eine Gruppierung im HTML-Formular bereit. Beachten Sie die Beschriftung oben im Feldsatz, der mit

erstellt wurde. Element.

Eine weitere gute Verwendung von

und Das Element gehört zum Eingabetyp „Kontrollkästchen“ oder „Radio“, insbesondere wenn es schwierig wird, einen gemeinsamen Kontext für verschiedene Optionen bereitzustellen, und ist mit jeder einzelnen Option verknüpft.

Attribute des Fieldset-Tags in HTML

Das

Das Element unterstützt viele globale Attribute, die die unten genannten zusätzlichen Attribute unterstützen.

1. deaktiviert

Das Attribut „disabled“ verwendet „disabled“ als Wert. Wenn dieses Attribut verwendet wird, gibt es an, dass die Gruppe von Elementen, für die dieses Attribut verwendet wird, deaktiviert werden soll.

Unten finden Sie einen Beispielcodeauszug, der das Fieldset-Element mit einem seiner Attribute, „disabled“, verwendet.

Code:

<fieldset style="background:#e1eff2;" disabled="disabled">
<legend>Personal Information:</legend>
<div><label>Name:</label><input type="text"></div>
<div><label>Email:</label><input type="text"></div>
<div><label>DOB:</label><input type="text"></div>
<div><label>Place:</label><input type="text"></div>
</fieldset>

Ausgabe:

Beachten Sie, dass alle untergeordneten Elemente deaktiviert sind, d. h. nicht bearbeitet werden können, da wir den Attributwert für „disabled“ auf „disabled“ setzen.

2. Formular

Das Attribut „form“ wird verwendet, um einen oder mehrere Bezeichner verschiedener Formen einzuschließen. Es definiert diese Bezeichner, zu denen unsere Gruppe verwandter Elemente gehören wird oder zu denen sie gehört. Das Attribut „form“ verwendet Formular-IDs, um die Formulare zu definieren. Wenn mehr als eine Formularkennung vorhanden ist, werden diese alle eingeschlossen und durch Leerzeichen getrennt.

Mit anderen Worten, dies ist ein Attribut, das seinen Wert vom „id“-Attribut von Formular-/Formularelementen übernimmt, um das Feldset zu dessen Teilen zu machen, selbst wenn das Feldset außerhalb des Formulars definiert ist.

Das Formularattribut wird nur in Opera 12 und früheren Versionen unterstützt.

3. Name

Das Attribut „Name“ definiert einen Namen für die gruppierten Elemente oder die einer Gruppe von Elementen beigefügten Elemente. Dieses Attribut verwendet „text“ als Wert. Dieser „Name“ wird nicht im Browser angezeigt; seine Verwendung ist auf die Arbeit von Skripten beschränkt.

Unten finden Sie ein Beispiel für einen Feldsatz mit dem Attribut „Name“.

Code:

<form>
<fieldset style="background:#e1eff2;" name="PersonalInformation" >
<legend>Personal Information:</legend>
<div><label>Name:</label><input type="text"></div>
<div><label>Email:</label><input type="text"></div>
<div><label>DOB:</label><input type="text"></div>
<div><label>Place:</label><input type="text"></div>
</fieldset>
<br />
<button type = "button" onclick="form.PersonalInformation.style.backgroundColor='LIGHTSALMON'"> Change background color of fieldset</button>
</form>

Ausgabe:

Beobachten Sie, während wir unserem Feldsatz ein Attribut, einen „Namen“ und einen Wert als „Persönliche Informationen“ gegeben haben; Es wird nicht im Browser angezeigt. Aber wir haben das Namensattribut des

Element im Hintergrund für Skriptarbeiten.

Wenn wir auf die Schaltfläche „Hintergrundfarbe des Feldsatzes ändern“ klicken, antwortet das Formular wie folgt:

HTML Fieldset-Tag im CSS-Styling

Wie jedes andere HTML-Element auch

Das Element kann auch für visuelle Effekte geändert werden. Die HTML-Tags oder -Elemente können eine oder mehrere Eigenschaften enthalten. Diese hinzugefügten Attribute oder Eigenschaften versorgen die Browser mit mehr Daten oder Informationen über die Auswirkungen der Elemente. Die Attribute bestehen im Allgemeinen aus einem Eigenschaftsnamen und dem zugewiesenen Wert, zum Beispiel;

<strong>style="color:black";</strong>

Die Eigenschaften, die verwendet werden können, um das Erscheinungsbild des

Dazu gehören unter anderem Schriftarten, Schriftfamilien, Größe und Stärke.

Below is another example using the above-mentioned properties. CSS can do wonders. Observe the before and after-effects.

Without CSS

Code:

<form>
<fieldset style="background:#e1eff2"; name="PersonalInformation" >
<legend>Personal Information:</legend>
<div><label>Name:</label><input type="text"></div>
<div><label>Email:</label><input type="text"></div>
<div><label>DOB:</label><input type="text"></div>
<div><label>Place:</label><input type="text"></div>
</fieldset>
<br />
<button type = "button" onclick="form.PersonalInformation.style.backgroundColor='LIGHTSALMON'"> Change background color of fieldset</button>
</form>

Output:

With CSS

Code:

<form>
<fieldset style="background:#e1eff2"; name="PersonalInformation" >
<legend>Personal Information:</legend>
<div><label>Name:</label><input type="text"></div>
<div><label>Email:</label><input type="text"></div>
<div><label>DOB:</label><input type="text"></div>
<div><label>Place:</label><input type="text"></div>
</fieldset>
<br />
<button type = "button" onclick="form.PersonalInformation.style.backgroundColor='LIGHTSALMON'"> Change background color of fieldset</button>
</form>

Output:

Conclusion

The and

tags are the most underused tags while creating web forms. The

tag allows every radio or checkbox or text box grouped together to be labeled as a whole while also being separately labeled. The

and

elements are helpful when assisting technology like JAWS is being used. It’s known that many screen readers read legend text first and then the label texts.

Das obige ist der detaillierte Inhalt vonFieldset-Tag in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!