HTML-Formulare gehören zum Kern jeder Website, wirken beim Bauen aber oft sperrig. Sie bringen nicht nur eigene Elemente und Attribute mit, sie verwischen auch die Grenze zwischen statischem Inhalt und Interaktion. Damit durchkreuzen Formulare häufig die Erwartung, mit der Nutzer deiner Website oder Anwendung begegnen, und werden zur Geduldsprobe. Diese vier Best Practices helfen dir als Entwickler oder Designer, Formulare zu bauen, die eingängiger sind und weniger nerven.
Beschrifte deine Feldgruppen im HTML-Formular
Ein fieldset ohne Namen ist schwer zu rechtfertigen. Der Code oben wird besser, sobald wir das fieldset mit dem Element legend betiteln. Die Beschriftung sitzt dann auf dem Rahmen des fieldset, das standardmäßig einen Rahmen hat.
<fieldset>
<legend>Adresse de facturation</legend>
<span>Nom</span><input type="text" name="nom"/>
<span>Prénom</span><input type="text" name="prenom"/>
<span>Adresse</span><input type="text" name="adresse"/>
<span>Complément d'adresse</span><input type="text" name="adresse2"/>
<span>Ville</span><input type="text" name="ville"/>
<span>Département</span><input type="text" name="departement"/>
<span>Pays</span><input type="text" name="pays"/>
</fieldset>⚠️ Setz in deinen HTML-Formularen auf label
Ein span zur Beschriftung der Eingabefelder ist nicht falsch, aber das Tag label ist dafür schlicht gemacht.
<fieldset>
<legend>Adresse de facturation</legend>
<label>Nom</label><input type="text" name="nom"/>
<label>Prénom</label><input type="text" name="prenom"/>
<label>Adresse</label><input type="text" name="adresse"/>
<label>Complément d'adresse</label><input type="text" name="adresse2"/>
<label>Ville</label><input type="text" name="ville"/>
<label>Département</label><input type="text" name="departement"/>
<label>Pays</label><input type="text" name="pays"/>
</fieldset>Gib den Labels das Attribut for
Mit dem Attribut for verknüpfst du ein <label> mit einem <input>. Die id des Feldes, auf das du zeigen willst, muss dabei mit dem Wert von for übereinstimmen.
<fieldset>
<legend>Adresse de facturation</legend>
<label for="nom">Nom</label><input id="nom" type="text" name="nom"/>
<label for="prenom">Prénom</label><input id="prenom" type="text" name="prenom"/>
<label for="adresse">Adresse</label><input id="adresse" type="text" name="adresse"/>
<label for="adresse2">Complément d'adresse</label><input id="adresse2" type="text" name="adresse2"/>
<label for="ville">Ville</label><input id="ville" type="text" name="ville"/>
<label for="departement">Département</label><input id="departement" type="text" name="departement"/>
<label for="pays">Pays</label><input id="pays" ype="text" name="pays"/>
</fieldset>Gruppiere die Optionen eines select mit optgroup
optgroup ist ein wenig bekanntes Element, mit dem sich Auswahlmöglichkeiten einrücken und mit einer Überschrift versehen lassen. Wichtig: Auch hier ist das Attribut label entscheidend.
<select>
<optgroup label="France">
<option>Paris</option>
<option>Lille</option>
<option>Lyon</option>
</optgroup>
<optgroup label="Espagne">
<option>Madrid</option>
<option>Bercelone</option>
<option>Valence</option>
</optgroup>
</select>Fazit
Mit diesen Kniffen strukturierst du deine HTML-Formulare besser und formatierst sie leichter, damit deine Nutzer schneller damit zurechtkommen. Wenn dir der Artikel gefallen hat, lies auch meinen Beitrag über die HTML-Fehler, die du vermeiden solltest.
