HTML-Auszeichnungssprache - Formular

<form action="/Pfad/zum/Skript" method="post">
<Tabelle>
<tr>
<th>Name:</th>
<td><Eingabetyp="Text" Name="Name" /></td>
</tr>
<tr>
<th>E-Mail:</th>
<td><input type="text" name="email" /></td>
</tr>
<tr>
<th>&nbsp;</th>
<td><input type="senden" value="senden" /></td>
</tr>
</Tabelle>
</form>

Methode B: Keine Tische nötig, einfach zusammendrücken

<form action="/Pfad/zum/Skript" method="post">
<p>
Name: <input type="text" name="name" /><br />
E-Mail: <input type="text" name="email" /><br />
<input Typ="Senden" Wert="Senden" />
</p>
</form>

Die Verwendung eines einzelnen Absatzes und mehrerer <br />-Tags zur Trennung aller Elemente ist eine praktikable Methode, kann aber optisch etwas überladen wirken. Abbildung 5-2 zeigt die Wirkung der elften Version des Browsers:

Abbildung 5-2: Der Browser zeigt den Effekt von Methode B. Obwohl wir das Layout ohne Tabellen fertigstellen können, sieht es etwas überfüllt und hässlich aus. Gleichzeitig stoßen wir auch auf das Problem, dass die Formularelemente nicht perfekt ausgerichtet werden können.
Wir können dem <input>-Element mit CSS einen äußeren Patch hinzufügen, um das Gefühl der Überfüllung zu reduzieren. So:

Eingang{
Rand: 6px 0;
}

Der vorherige Abschnitt fügt oben und unten an jedem <input>-Element (einschließlich Name, E-Mail-Eingabefeld und Senden-Schaltfläche) einen 6-Pixel großen äußeren Patch hinzu, wodurch zusätzlicher Platz zwischen den Elementen entsteht. Genau wie in Abbildung 5-3:

Abbildung 5-3. Methode B nach dem Hinzufügen externer Patches zum Eingabeelement. Methode B selbst ist in Ordnung, kann aber feinabgestimmt werden, um die Form zu verbessern. Methode C verwendet diese Feinabstimmungstechniken ebenfalls, also schauen wir uns das mal an.

Methode C: Einfach und leichter zu verwenden

<form action="/Pfad/zum/Skript" id="diesesFormular" method="post">
<p><label für="name">Name:</label><br />
<Eingabetyp="Text" ID="Name" Name="Name" /></p>
<p><label for="email">E-Mail:</label><br />
<input type="text" id="email" name="email" /></p>
<p><Eingabetyp="Senden" Wert="Senden" /></p>
</form>

An Methode C gefallen mir einige Dinge. Erstens finde ich es bei einfachen Formularen wie diesem praktisch, jede Anweisung und jedes Formularelement in einen eigenen Absatz zu setzen. Der voreingestellte Abstand zwischen den Absätzen sollte ausreichen, damit der Inhalt auch ohne Formatierung gut lesbar ist. Wir werden später auch CSS verwenden, um den Abstand für die <p>-Tags im Formular festzulegen.
Wir sind sogar noch einen Schritt weitergegangen und haben dem Formular eine eindeutige ID = "diesesFormular" gegeben. Die genauen Abstände, die ich gerade erwähnt habe, können also ungefähr so ​​geschrieben werden:

#dieseForm p{
Rand: 6px 0;
}

Dies bedeutet, dass die obere und untere Polsterung der <p>-Tags in diesem Formular auf 6 Pixel eingestellt wird und damit die Browservorgabe für normale Absätze überschrieben wird.
Ein weiterer Unterschied zwischen Methode C und den beiden vorherigen Methoden besteht darin, dass jede Gruppe (Beschreibung und Eingabefeld) zwar in einem <p> platziert ist, wir sie aber trotzdem mit <br /> in eine separate Zeile setzen. Die Verwendung von <br /> zur Trennung der einzelnen Elemente kann das Problem unterschiedlicher Textlängen umgehen, das dazu führt, dass Eingabeelemente nicht perfekt ausgerichtet sind.
Abbildung 5-4 zeigt die Wirkung der Methode C in einem gängigen Browser unter Verwendung des zuvor für das <p>-Tag festgelegten Stils.

Abbildung 5-4. Der Browser zeigt den Effekt von Methode C unter Verwendung von CSS für das P-Tag an.
Der wichtigste Vorteil von Methode C ist neben den visuellen Effekten die verbesserte Benutzerfreundlichkeit.

<label>-Tag Die Verwendung des <label>-Tags zur Verbesserung der Formularnutzbarkeit erfordert zwei Schritte, und Methode C hat beide Schritte abgeschlossen. Der erste besteht darin, den <label>-Tag zu verwenden, um die Textbeschreibung mit dem entsprechenden Formularelement zu verbinden, sei es ein Textfeld, ein Textbereich, ein Optionsfeld, ein Kontrollkästchen usw. Methode C verwendet den <label>-Tag für die Titel „Name:“ und „E-Mail:“, um sie mit den Dateneingabeelementen zu verbinden.
Der zweite Schritt besteht darin, dem <label>-Tag das For-Attribut hinzuzufügen und die ID des entsprechenden Eingabefelds einzutragen.
Umschließen Sie beispielsweise in Methode C „Name:“ mit einem <label>-Tag und füllen Sie das for-Attribut dahinter mit demselben Wert wie die Eingabefeld-ID aus.

<form action="/Pfad/zum/Skript" id="diesesFormular" method="post">
<p><label für="name">Name:</label> <br />
<Eingabetyp="Text" ID="Name" Name="Name" /></p>
<p><label for="email">E-Mail:</label><br />
<input type="text" id="email" name="email" /></p>
<p><Eingabetyp="Senden" Wert="Senden" /></p>
</form>

Warum <label> verwenden?
Sie haben vielleicht schon von anderen gehört, dass Sie in einem Formular ein <label>-Tag verwenden sollten. Die wichtigste Frage ist, warum Sie das <label>-Tag verwenden sollten.
Durch die Herstellung einer Label/ID-Zuordnung können Screenreader das richtige Label für jedes Formularelement lesen, unabhängig von der Layoutmethode, was eine gute Sache ist. Gleichzeitig ist das <label>-Tag dazu gedacht, Formularfeldlabels zu kennzeichnen. Wenn wir dieses Tag verwenden, erklären wir die Bedeutung jedes Elements und stärken die Struktur des Formulars.
Ein weiterer Vorteil der Verwendung des <label>-Tags bei der Arbeit mit Einzelauswahl- und Mehrfachauswahlfeldern besteht darin, dass die meisten Browser den Wert des Elements auch ändern, wenn der Benutzer auf den Text innerhalb des <label> klickt. Dadurch kann ein größerer anklickbarer Bereich für das Eingabeelement erstellt werden, was Benutzern mit eingeschränkter Mobilität das Ausfüllen des Formulars erleichtert (Mark Pilgrim, „Dive Into Accessibility“, http://diveintoaccessibility.org/day_28_labeling_form_elements.html ).
Wenn wir beispielsweise ein Feld zur Mehrfachauswahl zum Formular hinzufügen, sodass der Benutzer die Option „Diese Informationen aufschreiben“ auswählen kann, können wir das Tag <label> folgendermaßen verwenden:

<form action="/Pfad/zum/Skript" id="diesesFormular" method="post">
<p><label für="name">Name:</label><br />
<Eingabetyp="Text" ID="Name" Name="Name" /></p>
<p><label for="email">E-Mail:</label><br />
<input type="text" id="email" name="email" /></p>
<p><input type="checkbox" id="merken" name="merken" />
<label for="remember">Diese Informationen merken?</label></p>
<p><Eingabetyp="Senden" Wert="Senden" /></p>
</form>

Durch diese Art der Markierung des Kontrollkästchens erhalten Sie zwei Vorteile: Bildschirmleseprogramme lesen den richtigen Beschreibungstext (in diesem Beispiel funktioniert dies sogar, wenn der Text nach dem Eingabefeld angezeigt wird) und der Bereich des Kontrollkästchens, der umgeschaltet werden kann, wird erweitert, sodass neben dem Kontrollkästchen selbst auch der Text enthalten ist (wird von den meisten Browsern unterstützt).
Abbildung 5-5 zeigt, wie dieses Formular im Browser aussieht. Wir markieren speziell den vergrößerten Bereich des Mehrfachauswahlfelds:

Abbildung 5-5. Ein Kontrollkästchen, das Text im Umschaltbereich enthält. Zusätzlich zu Formularen und Absätzen möchte ich eine weitere Möglichkeit zeigen, Formulare zu markieren, und zwar mithilfe einer Definitionsliste.

Vorherige Seite 1 2 3 4 Nächste Seite Gesamten Artikel lesen