Formulafeld formatieren 01
    
WWW.WEB-TOOLBOX.NET
ZURÜCK SITEMAP  

 Eingabefelder formatieren 01

Eingabefelder und Textboxen in Formularen sollen in den verschiedenen Browsern möglichst gleich aussehen. Besonders die Breiten exakt darzustellen ist manchmal nicht so einfach. da hilft CSS.

Ansicht ohne CSS-Formatierung

Name: 
Ansicht mit CSS-Formatierung

Name: 



   Gestaltung von Formulafeldern mittels CSS

Beispiele für Formatierungen von Input-Elementen

Die Notierungen der CSS-Anweisungen habe ich gleich unterhalb der Demos plaziert. Die Anweisungen können sie als Inline-Anweisung oder über CSS-Unterklassen zuweisen. Eine Demo dazu finden sie weiter unten auf dieser Seite.

Vorsicht mit einer Randformatierung von mehr als einem Pixel Breite! Diese Angabe ist nicht ohne Tücken.

Im FF kann das die Textinhalte der Felder abschneiden, weil der Rand von der zur Verfügung stehenden Höhe subtrahiert wird. Der IE wird den Rand zur Elementhöhe hinzu addieren (den Rand außen anodnen).

Abhilfe schafft eine Angabe zur Zeilenhöhe mit 'line-height' (hier nicht eingesetzt).



Beispiel 01

font-family:Arial;
color:#000000;
font-size:12px;
border: 1px solid #008030;
background-color:#F4FFF4;
height:22px;
width:250px;
padding:3px;

Beispiel 02

font-family:Arial;
color:#8F8F8F;
font-size:12px;
font-weight:bold;
border:none;
border-bottom: 1px dotted #008030;
height:22px;
width:250px;
padding:3px;

Beispiel 03

font-family:Arial;
color:#BF0000;
font-size:12px;
border: 1px solid #E06060;
background-color:#FFFFFF;
height:22px;
width:250px;
padding:3px;

Beispiel 04

font-family:Arial;
#000000;
font-size:12px;
border: 1px solid #EED5FF;
background-color:#FFF0FF;
height:22px;
width:250px;
padding:3px;

Beispiel 05

font-family:Arial;
color:#0050A0;
font-size:12px;
border:none;
border-top: 1px solid #0050A0;
border-bottom: 1px solid #0050A0;
background-color:#FFFFFF;
height:22px;
width:250px;
padding:3px;

Beispiel 06

font-family:Arial;
color:#0050A0;
font-size:12px;
border:none;
border-top: 1px dotted #0050A0;
border-bottom: 1px dotted #0050A0;
background-color:#FFFFFF;
height:22px;
width:250px;
padding:3px;

Beispiel 07

font-family:Arial;
color:#FFFFFF;
font-size:12px;
border: 3px double #AFAFAF;
background-color: #5F5F5F;
padding:3px;
height:26px;
width:250px;

Beispiel 08

font-family:Arial;
color:#FFFFFF;
font-size:12px;
border:none;
background-color: #BF0000;
height:22px;
width:250px;
padding:3px;



  Inline oder global



1  mit Inline-Angaben:

Inline-Formatierungen direkt im <input>-Tag sind eine Alternative zur globalen Anweisungen und werden in der Regel für eine einzelne Anweisung genutzt.

Aufgabenstellung:

Für eine Code-Eingabe soll ein einzelnes <input>-Element zur besseren Hervorhebung unterschiedlich formatiert werden. Es wird ein Eingabefeld für 3 Zeichen benötigt.

<input style="border:1px solid #DF0000;color:#000000;width:30px;" ...
Bitte den Code 'abc' wiederholen:  



2  mit globalen CSS-Angaben:

CSS-Anweisungen im Head-Bereich der Seite oder in einer externen CSS-Datei festlegen. Formatierungen können sie generell für alle <input>-Elemente mit gleichen Eigenschaften festlegen oder zur besseren Differenzierung mehrere unterschiedliche Unterklassen notieren.

Aufgabenstellung:

Für eine Datumseingabe sollen <input>-Elemente unterschiedlich formatiert werden. Es werden Eingabefelder für 2 und 4 Zeichen benötigt.

Im HEAD-Bereich werden die CSS-Anweisungen festgelegt. Im BODY-Bereich erhalten die entsprechenden HTML-Tags das Attribut 'class'. Als Wert wird der Bezeichner / Name der Unterklasse eingetragen.

CSS-Angaben im Head: 
<style type="text/css">
<!--

.datum2
{
border: 1px solid #6D93E1;
background-color: #EFEFEF;
width:20px;
text-align:center;
}

.datum4
{
border: 1px solid #6D93E1;
background-color: #EFEFEF;
width:40px;
text-align:center;
}

-->
</style>
im Body für die Einträge Tag / Monat / Jahr:

<input class="datum2" type="text" value="24" ...
<input class="datum2" type="text" value="12" ...
<input class="datum4" type="text" value="2008" ...
Ergebnis :

Datum eintragen:  





30.05.2003   
NACH OBEN