Link zu www.kneller-gifs.de

CSS: Breite von Formularelementen

Die Darstellungsbreite der Formular-Eingabefelder vom Typ "input" und "textarea" kann per size bzw. cols bestimmt werden. Bei Selectboxen und Buttons ist die Vorgabe einer Breite nicht vorgesehen. Sie ergibt sich dann einfach aus der Länge der darzustellenden Texte:

TypHTML-CodeDarstellung
Input-Feld<input type="text" size="22">
Textarea-Feld<textarea cols="20"></textarea>
Button (kurzer Text)<input type="button" value="text">
Button (langer Text)<input type="button" value="langer text">
Selectbox (kurze Einträge)<select><option>1</option></select>
Selectbox (lange Einträge)<select><option>langer text 1</option></select>

Um die Breite von Formularelementen zu steuern muß man CSS einsetzten. Dazu trägt im entsprechenden Formularelement als Attribut den gewünschten CSS-Style ein.

TypHTML-CodeDarstellung
Input-Feld<input type="text" style="width:100pt;">
Textarea-Feld<textarea style="width:100pt;"></textarea>
Button (kurzer Text)<input type="button" value="text" style="width:100pt;">
Button (langer Text)<input type="button" value="langer text" style="width:100pt;">
Selectbox (kurze Einträge)<select style="width:100pt;"><option>1</option></select>
Selectbox (lange Einträge)<select style="width:100pt;"><option>langer text 1</option></select>

Zu beachten ist, dass ältere Browser die Vorgabe als Mindestbreite ansehen und die Formularelemente bei Bedarf breiter darstellen, während aktuelle Browser die Vorgabe fest annehmen und zu lange Texte gnadenlos abschneiden.