Einführung
Das HTML <fieldset>-Tag wird verwendet, um HTML-Elemente zusammenzuschließen, und es kann helfen, strukturierte und gut strukturiertes Dokument zu erstellen. Und das Verwenden des <fieldset>-Tags kann die verwandten Felder in einem Formular gruppieren, um die Formulareingaben in einer organisiertereren Weise anzuzeigen.
In diesem Lab werden wir demonstrieren, wie Sie das <fieldset>-Tag verwenden können, um strukturierte und organisierte Formulare zu erstellen.
Hinweis: Sie können im
index.htmlprogrammieren und lernen, wie Sie HTML in Visual Studio Code schreiben. Klicken Sie bitte auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.
HTML-Seite erstellen
Erstellen Sie eine Datei namens index.html und schreiben Sie die grundlegende Struktur der HTML-Seite.
<!doctype html>
<html>
<head>
<title>Creating a Form with Fieldset Tag</title>
</head>
<body></body>
</html>
Formular mit Fieldset erstellen
Fügen Sie ein Formularelement in den HTML-Body hinzu und verwenden Sie dann das <fieldset>-Tag, um verwandte Formulareingabefelder zu gruppieren. Wir werden auch das label-Tag zu den Formularelementen hinzufügen, um der Eingabefeld einen Beschreibungstext hinzuzufügen.
<form>
<fieldset>
<legend>User Details</legend>
<label for="fname">First Name:</label>
<input type="text" id="fname" name="firstname" /><br /><br />
<label for="lname">Last Name:</label>
<input type="text" id="lname" name="lastname" /><br /><br />
<label for="email">Email:</label>
<input type="email" id="email" name="email" /><br /><br />
</fieldset>
<fieldset>
<legend>Account Details</legend>
<label for="uname">Username:</label>
<input type="text" id="uname" name="username" /><br /><br />
<label for="pass">Password:</label>
<input type="password" id="pass" name="password" /><br /><br />
</fieldset>
<input type="submit" value="Submit" />
</form>
Der obige Code erstellt ein Formular, das in zwei Fieldsets strukturiert ist. Das erste Fieldset gruppiert die persönlichen Daten des Benutzers, und das zweite Fieldset gruppiert die Account-Details. Sie werden vielleicht bemerken, dass wir das label-Tag verwendet haben, um einigen Kontext für die Felder bereitzustellen.
CSS hinzufügen
Wir können das Fieldset mit CSS gestalten, um es ein passendes Design zu geben. Wir können einen Rahmen, eine Hintergrundfarbe und etwas Innenabstand hinzufügen, um das Fieldset besser aussehen zu lassen.
<style>
fieldset {
padding: 10px;
border: 1px solid #c0c0c0;
border-radius: 4px;
margin: 5px;
background-color: #f8f8f8;
}
</style>
Öffnen Sie die HTML-Datei in Ihrem Browser, um das Formular anzuzeigen und zu testen.
Zusammenfassung
Das Fieldset-Tag erstellt ein strukturiertes und gut organisiertes Dokument. Es ist nützlich bei der Erstellung von Formularen. Verwenden Sie die Label-Tags, um Kontext für die Eingabefelder bereitzustellen. Das Fieldset-Tag gruppiert verwandte Formulareingabefelder und fügt einen Rahmen um die verwandten Felder hinzu. Schließlich liefert die CSS-Stilgebung dem Fieldset ein Design, das es besser aussehen lässt.
