webmatze.de

Profi Tipps für einen erfolgreichen Internetauftritt

CSS Formular Design – Textfelder

| Keine Kommentare

Eines der wichtigsten Elemente in Webseiten sind mit Sicherheit Formulare. Sie helfen dem Benutzer mit der Seite zu interagieren, indem er Daten eingeben und diese an den Server zur Verarbeitung senden kann. Formulare werden also überall dort eingesetzt, wo Eingaben vom Benutzer notwendig sind.

Jedoch sehen die normalen Formularelemente, so wie sie von HTML bereitgestellt werden, recht unspektakulär aus. Im Folgenden möchte ich ein paar Tipps und Tricks zeigen, wie man Formulare ansprechender und schöner gestalten kann. Alles was dazu benötigt wird sind ein paar Kenntnisse in HTML und CSS (Cascading Style Sheets).

Textfelder anpassen

Die wohl am häufigsten verwendeten Elemente in Formularen sind einfache Textfelder. Sie dienen zur Eingabe von Text und sehen standardmäßig wie folgt aus:

  1.  
  2. <input type="text" name="textfeld">
  3.  

Um dieses Textfeld nun an die eigenen Wünsche anzupassen, kann man dem Input Tag das Attribut style hinzufügen. Hier werden nun die CSS Formatierungen vorgenommen. Möchte man zum Beispiel die Länge des Feldes verändern, kann man width verwenden.

  1.  
  2. <input type="text" name="textfeld" style="width:300px">
  3.  

Weitere Möglichkeiten wären, die Hintergrundfarbe zu ändern:

  1.  
  2. <input type="text" name="textfeld" style="background:#9BCCCA">
  3.  

Oder die Farbe des Textes innerhalb des Feldes:

  1.  
  2. <input type="text" name="textfeld" style="color:#336666">
  3.  

Und schließlich kann man auch noch den Rahmen des Textfeldes den eigenen Wünschen anpassen. Wie wäre es zum Beispiel mit einer farbigen, durchgängigen Linie?

  1.  
  2. <input type="text"
  3. name="textfeld" style="border: #336666;
  4. border-style: solid; border-top-width: 2px; border-right-width: 2px;
  5. border-bottom-width: 2px; border-left-width: 2px"
  6. >
  7.  

Doch bei so vielen Stilattributen ist es sinvoller den Stil in eine separate Styledefinition im HEAD Bereich der HTML Datei zu schreiben.

  1.  
  2. .rahmen {
  3. border: #336666;
  4. border-style: solid;
  5. border-top-width: 2px;
  6. border-right-width: 2px;
  7. border-bottom-width: 2px;
  8. border-left-width: 2px;
  9. }
  10. </style>
  11.  

Dieser Stil wird dann über das class Attribut dem Input Tag zugeordnet.

  1.  
  2. <input type="text" name="textfeld" class="rahmen">
  3.  

Wenn man nun alles eben Erlernte zusammenpackt, kann man Formulare gestalten die wie das folgende aussehen.

Name
Vorname
Passwort
 

So, ich hoffe jetzt habt ihr genug Anregungen bekommen, um euch individuelle Textfelder zu gestalten.

Diese Artikel könnten dich auch interessieren: