Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt

Design bei Formularen und automatisches Feedback

Wenn man Standardformulare in HTML verwendet, sieht das Design schlicht und einfach nach 1980 aus. Mit ein paar Zeilen CSS kann man ein ansehnliches Design zaubern.

Im folgenden Tutorial wollen wir von Standard-HTML-Formular zu folgendem Aussehen:

Formulardesign über CSS
Formulardesign über CSS

Gehen wir es Schritt für Schritt an.

Wir haben unser Standard-HTML-Aufbau für ein Formular (mit oben abgebildeten Feldern):

<form>

<h2>Ihre Wünsche</h2>    

<p>
<label for="Vorname">Vorname</label>
<input type="text" id="Vorname" name="Vorname" autofocus>
</p>

<p>
<label for="Nachname">Nachname</label>
<input type="text" id="Nachname" name="Nachname">
</p>

<p>
<label for="Anfrage">Ihre Anfrage</label>
<textarea name="Anfrage" rows="6" cols="60"></textarea>
</p>    

<p>
<input type="submit" value="absenden">   
</p>

</form>

Genau über dieses Formular erhalten wir den linken Teil in der Abbildung.

Design von Formularen über CSS – Schrift

Geben wir unserem Formular eine moderne Schrift. Dazu nutzen wir einfach eine serifenlose Schrift:

body {
    font-family: sans-serif;
}

Schrift auch für textarea mit sans-serif

Interessant ist der Effekt, dass die Schrift in den input-Feldern übernommen wurde, aber nicht im textarea. Im Textarea wird standardmäßig eine dicktengleich Schrift verwendet:

im Textarea wird standardmäßig eine dicktengleich Schrift verwendet
im Textarea wird standardmäßig eine dicktengleich Schrift verwendet

Also geben wir unserem textarea die Anweisung font-family: inherit; mit – somit erbt (engl. „inherit“).

body {
    font-family: sans-serif;
}

textarea
{
    font-family: inherit;    
}

Formular mit Hintergrundfarbe und Begrenzung

Unser Formular soll eine Hintergrundfarbe (hellgrau) bekommen, damit die Formularfelder besser sich im Fenster abheben und einen Rahmen:

form {
    border: 1px solid black;
    width: 90%;
    background-color: whitesmoke;
    margin: 0 auto;
    padding: 0 1em;
}

Formularbereich mit Rahmen und Hintergrundfarbe
Formularbereich mit Rahmen und Hintergrundfarbe

Beschriftungen (label) oberhalb der Eingabefelder

Unsere Beschriftungen, die in den HTML-TAG label stecken, sollen die komplette Breite einnehmen display: block; und nicht so herausstechen. Dazu bekommen diese eine kleine Schriftgröße und ein dunkelgrau als Schriftfarbe.

form label {
    display: block;
    font-size: 0.8em;
    color: darkslategrey;
    padding-left: 3px;    
}
Beschriftung oberhalb der Formularfelder
Beschriftung oberhalb der Formularfelder

Eingabefelder komplette Breite und größere Schrift

Unsere Eingabefelder bekommen die komplette Breite zugewiesen (was bei immer mehr Handynutzer Sinn macht) und eine größere Schrift:

Der entsprechende CSS-Code:

input,
textarea
{
    width: 100%;
    font-size: 1.1em; 
    padding: 4px;
    font-family: inherit;
    font-weight: lighter;
    border-radius: 0.3em;
}  

Das bisherige Ergebnis (mit eingaben in den Eingabefeldern):

Eingabefelder über komplette Breite (ideal für Handynutzer)
Eingabefelder über komplette Breite (ideal für Handynutzer)

Feedback, in welchem Feld man sich aktuell befindet

Damit man schnell visuell sieht, in welchem Feld man sich befindet, geben wird dem aktiven Eingabefeld eine orange Umrandung. Die nicht aktiven Felder bekommen die Anweisung border:1px solid gray; - das aktive border:1px solid orange;

Damit das überhaupt funktioniert, benötigen wir die CSS-Anweisung outline: none;.

Unser erweiterter CSS-Code:

input,
textarea
{
    width: 100%;
    font-size: 1.1em; 
    padding: 4px;
    font-family: inherit;
    font-weight: lighter;
    border-radius: 0.3em;

    border:1px solid gray;
    outline: none;
}    

input:focus,
textarea:focus { 
    border:1px solid orange;
}

Somit haben wir folgendes Aussehen:

aktives Formularfeld mit Umrandung
aktives Formularfeld mit Umrandung

Button zum Absenden angepasst und Feedback bei Mausberührung

Unser Button soll noch im Design angepasst werden und dem Besucher ein Feedback geben, wenn dieser mit der Maus darüberfährt:

input[type=submit] {
    background-color: limegreen;
    cursor: pointer;
    width: 14em;
    padding: .3em 0;
    border-radius: 0.7em;
}

input[type=submit]:hover {
    background-color: yellow;
    box-shadow: 2px 2px 2px grey;
}
Absende-Button per CSS angepasst
Absende-Button per CSS angepasst

Und mit Mausberührung:

Formulardesign leicht gemacht
Formulardesign leicht gemacht

kompletter Code

Mit ein paar Zeilen CSS können wir ein schönes Design für Formular erstellen. Folgend der komplette Code:

<body>

<h1>Design: Formulare</h1>

<form>

<h2>Ihre Wünsche</h2>    

<p>
<label for="Vorname">Vorname</label>
<input type="text" id="Vorname" name="Vorname" autofocus>
</p>

<p>
<label for="Nachname">Nachname</label>
<input type="text" id="Nachname" name="Nachname">
</p>

<p>
<label for="Anfrage">Ihre Anfrage</label>
<textarea name="Anfrage" rows="6" cols="60"></textarea>
</p>    

<p>
<input type="submit" value="absenden">   
</p>

</form>

Und der komplette CSS-Code:

body {
    font-family: sans-serif;
}

textarea
{
    font-family: inherit;    
}

form {
    border: 1px solid black;
    width: 90%;
    background-color: whitesmoke;
    margin: 0 auto;
    padding: 0 1em;
}

form label {
    display: block;
    font-size: 0.8em;
    color: darkslategrey;
    padding-left: 3px;    
}

input,
textarea
{
    width: 100%;
    font-size: 1.1em; 
    padding: 4px;
    font-family: inherit;
    font-weight: lighter;
    border:1px solid gray;
    outline: none;
    border-radius: 0.3em;
}    

input:focus,
textarea:focus { 
    border:1px solid orange;
}

input[type=submit] {
    background-color: limegreen;
    cursor: pointer;
    width: 14em;
    padding: .3em 0;
    border-radius: 0.7em;
}

input[type=submit]:hover {
    background-color: yellow;
    box-shadow: 2px 2px 2px grey;
}

Viel Spaß beim Anpassen des Formulars an die eigenen Bedürfnisse.

Weiterempfehlen • Social Bookmarks • Vielen Dank

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Vielen Dank für Ihre Hilfe

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details