Formulare mit CSS gestalten (Teil 2)
Bei Teil 2 soll es darum gehen, wie man das Aussehen von Formularen bestimmen kann und welche Möglichkeiten es gibt Formulare möglichst zugänglich zu machen.
Nach obenFestlegung der Dimensionen
Um die Größe eines Input- oder Textfeldes festzulegen bedarf es eigentlich nur die Angaben von width und height. Damit der Text etwas Platz zu den Rändern des Input-Feldes hat, kann man noch ein padding hinzufügen:
input
{
width: 200px;
height: 20px;
padding: 2px 4px;
}
Nach obenFormulardesign
Die Festlegung der äußeren Gestalt von Input- und Text- und Selectfeldern erfolgt mit der Angabe der gängigen Eigenschaften für Rahmen, Schrift und Hintergrund. Hier eine kleines Beispiel:
input
{
width: 200px;
height: 20px;
padding: 2px 4px;
border: 1px solid black;
background: grey;
color: #333;
}
Weitere Möglichkeiten sind text-align, margin zum positionieren und font für Schriftformatierungen.
Wie man Formulare positioniert kann man im ersten Teil in Erfahrung bringen.
Nach obenMaßnahmen zur Steigerung der Zugänglichkeit
Um eine Formular nicht von der Steuerung mit der Maus abhängig zu machen, kann man die Elemente mit Tabindizes und Accesskeys ausstatten, damit sie auch per Tastatur direkt zu bedienen sind. Zwar kann man auch ohne Tabindex sich "durchtabben", jedoch werden auch alle Links auf der Seite miteinbezogen. Durch den Tabindex und auch Accesskeys kann man also Prioritäten festlegen, was es zum Beispiel motorisch eingeschränkten Benutzern einige Mühen ersparen sollte, da man direkt zu wesentlichen Abschnitt springen kann.
Beispiel für das Tabindex-Attibut. Dieses Inputfeld ist das erste Element, das nach Drücken der Tabulatortaste angewählt wird:
<input type="text" name="Vorname" tabindex="1" />
Beispiel für einen Accesskey. Dieser Sendebutton wird durch die Tastenkombination von ALT+S (Windows) oder CTRL+S (Mac)betätigt:
<input name="abschicken" type="submit" value="abschicken" id="send" accesskey="S" />
Schließlich kann man auch noch für die Formularelemente ein paar Pseudoklassen definieren, um die Übersichtlichkeit oder das Design zu verbessern. Genaueres kann man hier erfahren.
Nach obenBeispiel
Um sich das Beispiel anzuschauen geht's hier zur Demo.