Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

XHTML/CSS-Übungen: Formulare

Posted by sura1 - 4. Juli 2008

Bookmark and Share

Von der Wiege bis zum Grabe – Formulare, Formulare

In der analogen Welt geht es Ihnen wohl auch genauso wie mir. Wenn man den Satz „Bitte füllen Sie dieses Formular aus“ hört, stellen sich den meisten Menschen die Haare auf. Man wird von der Geburt bis zum Tode mit Forumlare richtiggehend belästigt.

Ganz anders im Web:

Im Internet basieren praktisch alle Interaktionen mit dem Besucher darauf.

Es gilt, Kommentare abzugeben, Anfragen oder Bestellungen abzuschicken oder mit dem Betreiber der Webseite Kontakt aufzunehmen (und vieles mehr).

Ich möchte Ihnen hier ein einfaches Formular vorstellen:

(Beispieldatei: (17,7KB zip-Datei) hier downloaden )

¶ Das Formular im HTML-Quelltext ¶

<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Transitional//EN“ „http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“&gt;

<html xmlns=“http://www.w3.org/1999/xhtml&#8220; lang=“de“ xml:lang=“de“>

<head>

<meta http-equiv=“Content-Type“ content=“text/html; charset=iso-8859-1″ />

<link href=“style.css“ rel=“stylesheet“ type=“text/css“ media=“screen“ />

<title>Kommentar-Formular</title>

</head>

<body>

<form action=“http://example.org/&#8220; method=“post“>

<div>

<span>Kommentar schreiben</span>

<label for=“name“>Name</label>

<input type=“text“ name=“name“ id=“name“ />

<label for=“e-mail“>E-Mail</label>

<input type=“text“ name=“e-mail“ id=“e-mail“ />

<label for=“homepage“>Homepage</label>

<input type=“text“ name=“homepage“ id=“homepage“ />

<label for=“kommentar“>Kommentar</label>

<textarea cols=“30″ rows=“15″ name=“kommentar“ id=“kommentar“></textarea>

<input type=“submit“ value=“Absenden“ id=“senden“ />

</div>

</form>

</body>

</html>

Sie haben hier die Möglichkeit, die obige html.datei als Word-Dokument herunterzuladen und ohne CSS zu testen.

Source: Beispiel-Quelltext als doc-datei herunterladen: formular_html

Dieser Quelltext erzeugt ohne den Einsatz von CSS folgendes Formular:

Zum Vergrößern auf die Grafik klicken!

„Das sieht doch etwas komisch aus!“ werden Sie sagen. Das stimmt. Mit einer kleinen Änderung im Quellcode sieht das Formular gleich besser aus:

<div>

<label for=“name“>Name</label>

<input type=“text“ name=“name“ id=“name“ />

</div>

<div>

<label for=“e-mail“>E-Mail</label>

<input type=“text“ name=“e-mail“ id=“e-mail“ />

</div>

<div>

<label for=“homepage“>Homepage</label>

<input type=“text“ name=“homepage“ id=“homepage“ /

</div>

<div>

<label for=“kommentar“>Kommentar</label>

<textarea cols=“30″ rows=“15″ name=“kommentar“ id=“kommentar“></textarea>

</div>

<div>

<input type=“submit“ value=“Absenden“ id=“senden“ />

</div>

Ersetzen Sie den ursprünglichen Quellcode mit dieser kleinen Korrektur, und das Formular sieht schon viel ansprechender aus.

Source: Beispiel-Quelltext als doc-datei herunterladen: formular1_html

Zum Vergrößern auf die Grafik klicken!

Das Formular jetzt sieht zwar einigermaßen aus, es fehlen jedoch noch die entsprechenden Formatierungen mit Cascading Style Sheets. (werden im ursprünglichen HTML-Quellcode (index.html) vorgenommen!)

a) Innen- und Außenabstände werden alle auf „0“ gesetzt:

* {

margin: 0;

padding: 0;

}

b) Formatierung von html und body

html {

background: #1B3582;

color: #5978A5;

font: 68.75%/1.1 verdana, arial, helvetica, sans-serif;

}

body {

padding: 30px;

}

c) Positionierung von <form> und <span>

form, span {

position: absolute;

}

form {

margin: 8em;

}

Durch die Festlegung von margin: 8em wird das Formular von der linken oberen Ecke mehr in die Seitenmitte gesetzt. Sie können den Seitenabstand zu Übungszwecken je nach Belieben austauschen.

d) Floaten von <label>, <input> und <textarea> und Formatierung derselben:

label, input, textarea {

float: left;

}

label {

clear: left;

padding-top: .5em;

width: 100px;

}

Durch das Floaten sind die einzelnen Elemente des Formulars nun untereinander angeordnet.

e) Formatierung der div-Box, des Eingabefeldes und des Kommentarfeldes

input, textarea {

border: 0;

color: #193076;

font: 1em/1.0 verdana, arial, helvetica, sans-serif;

margin-bottom: 1em;

padding: 5px 9px 3px;

}

input {

background: url(bilder/eingabefeld.gif);

height: 15px;

width: 212px;

}

textarea {

background: url(bilder/kommentarfeld.gif);

height: 220px;

width: 325px;

}

div {

background: #FFF url(bilder/ecke.gif) top left no-repeat;

overflow: hidden;

padding: 1em;

width: 470px;

}

span {

color: #FFF;

font-size: 2em;

line-height: 1.0;

left: 120px;

top: -1.5em;

}

#senden {

background: url(bilder/bestaetigung.gif) center right no-repeat;

color: #193076;

height: 2.5em;

margin-left: 100px;

padding: 5px 0;

text-decoration: underline;

width: 343px;

}

Das Eingabefeld und das Kommentarfeld erhalten eine eigene Hintergrund-Grafik (eingabefeld.gif und kommentarfeld.gif).

Die div-Box bekommt in der linken oberen Ecke auch eine kleine Grafik (ecke.gif). Dadurch kommt es hier zu einer Abrundung der Ecke und zu einer optischen Aufwertung.

Im Eingabefeld input#senden wird auf der rechten Seite die Grafik bestaetigung.gif (sieht toll aus!) eingesetzt.

Das HTML-Element <span> habe ich mit color:#fff und  font-size: 2em positioniert. Außerdem habe ich der Überschrift „Kommentar abgeben“ eine linken Seitenabstand von 120px zugeteilt.

Das fertige Stylesheet sieht dann folgendermaßen aus:

* {

margin: 0;

padding: 0;

}

html {

background: #1B3582;

color: #5978A5;

font: 68.75%/1.1 verdana, arial, helvetica, sans-serif;

}

body {

padding: 30px;

}

form, span {

position: absolute;

}

form {

margin: 8em;

}

label, input, textarea {

float: left;

}

label {

clear: left;

padding-top: .5em;

width: 100px;

}

input, textarea {

border: 0;

color: #193076;

font: 1em/1.0 verdana, arial, helvetica, sans-serif;

margin-bottom: 1em;

padding: 5px 9px 3px;

}

input {

background: url(bilder/eingabefeld.gif);

height: 15px;

width: 212px;

}

textarea {

background: url(bilder/kommentarfeld.gif);

height: 220px;

width: 325px;

}

div {

background: #FFF url(bilder/ecke.gif) top left no-repeat;

overflow: hidden;

padding: 1em;

width: 470px;

}
span {

color: #FFF;

font-size: 2em;

line-height: 1.0;

left: 120px;

top: -1.5em;

}

#senden {

background: url(bilder/bestaetigung.gif) center right no-repeat;

color: #193076;

height: 2.5em;

margin-left: 100px;

padding: 5px 0;

text-decoration: underline;

width: 343px;

}

(Beispieldatei: (17,7KB zip-Datei) hier downloaden )

Das fertige Kommentar-Formular sieht danach so aus:

(Bitte auf die Grafik klicken!)

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

 
%d Bloggern gefällt das: