Ein Formular ist dazu da, um z.B. ein Feedback
zu geben oder etwas zu bestellen. Der User kann persönliche
Daten wie Namen und Mailadresse übersenden, auch kurze
Texte und verschiedene vordefinierte Auswahlen durch anklicken
übermitteln. Die Daten werden dann per Mail an ein Script
verschickt (CGI/Perl). Man kann diese selber Programmieren,
oder es gibt Anbieter (z.B. hier
oder hier),
die ein Script zur Verfügung stellen. Die Darstellung
so eines Formulares ganz ganz schlicht und einfach sein, oder
optisch etwas hermachen. Eine gute Möglichkeit bietet
die Darstellung mit CSS.
Hier eine einfache Darstellung mit HTML: (Dieses Formular
wird ausnahmsweise als Grafik dargestellt, weil ich auf all
meinen Seiten ein CSS eingebaut habe und somit die Darstellung
anders wäre.
Der HTML-Code:
|
<HTML>
<HEAD>
<TITLE> Befehle in HTML </TITLE>
</HEAD>
<BODY>
<form name="form1"
method="post" action="">
<table width="400" border="1"
cellspacing="1" cellpadding="1">
<tr>
<td width="29%" height="20"> </td>
<td width="71%" height="20">Kontaktformular</td>
</tr>
<tr>
<td width="29%">Ihren Namen</td>
<td width="71%">
<input type="text" name="name"
size="35">
</td>
</tr>
<tr>
<td width="29%">Ihren Vornamen</td>
<td width="71%">
<input type="text" name="name2"
size="35">
</td>
</tr>
<tr>
<td width="29%">Ihre Mailadresse</td>
<td width="71%">
<input type="text" name="mail"
size="35">
</td>
</tr>
<tr>
<td width="29%"> </td>
<td width="71%">
<input type="submit" name="Abschicken"
value="Senden">
<input type="reset" name="Abschicken2"
value="Löschen">
</td>
</tr>
</table>
</form>
</BODY>
</HTML>
|
Dann möchte Euch Beispiele zeigen, wie man mit CSS
Formulare gestalten kann.
(Die Farben können natürlich nach Bedarf geändert
werden.)
1. Formulare mit CSS mit Tabellen und mit gepunkteten Linien
und farbigen Formular-Buttons
Dieses Formular funktioniert hier nicht, es ist mit keinem
Script verknüpft. Es dient nur zur Demonstration.
Hier den gesamten HTML-Code:
|
<form action="" method="post"
name="mail" id="mail">
<table width="430" cellspacing="1"
cellpadding="1" border="0" bgcolor="#828282">
<tr>
<td align="right" class="normal"
colspan="2">
<h3 class="form3" align="center">Kontaktformular</h3>
</td>
</tr>
<tr>
<td align="right" class="normal">Ihr
Name: </td>
<td align="left">
<input class="formfeld2" type="text"
name="name2" id="name" size="40">
</td>
</tr>
<tr>
<td align="right" class="normal">Ihr
Vorname: </td>
<td align="left">
<input class="formfeld2" type="text"
name="name" id="name" size="40">
</td>
</tr>
<tr>
<td align="right" class="normal">Ihre
E-Mail: </td>
<td align="left">
<input class="formfeld2" type="text"
name="name" id="name" size="40">
</td>
</tr>
<tr>
<td valign="top" align="right"
class="normal">Ihr Kommentar:</td>
<td align="left">
<textarea class="textarea2" name="textarea2"
rows="5" cols="39"></textarea>
</td>
</tr>
<tr>
<td></td>
<td align="left">
<input class="button2" type="submit"
name="senden" id="senden" value="Senden">
<input class="button2" type="reset"
name="reset" id="reset" value="Löschen">
</td>
</tr>
</table>
</form>
|
Die Definitionen habe ich in einer externen
CSS-Datei definiert, die Elemente für dieses Formular
sind:
|
.form3 {
font-size: 1.1em;
color: #00000;
text-align: center;
margin: 10px 0px 20px;
padding: 0px;
}
|
|
.formfeld2 {
background-color: #666666;
border : 2px #a9a9a9 dotted;
FONT-SIZE: 9pt; COLOR: #FFFFFF;
FONT-FAMILY: "Trebuchet MS", Arial,
Verdana;
}
|
|
|
.textarea2 {
background-color: #666666;
border : 2px #a9a9a9 dotted;
margin-top : 2px;
margin-right : 2px;
margin-bottom : 2px;
margin-left : 2px;
FONT-SIZE: 9pt; COLOR: #FFFFFF;
FONT-FAMILY: "Trebuchet MS", Arial,
Verdana;
}
|
|
|
.button2 {
background-color : #666666;
border : 2px #a9a9a9 dotted;
margin-top : 2px;
margin-right : 2px;
margin-bottom : 2px;
margin-left : 2px;
FONT-SIZE: 9pt; COLOR: #FFFFFF;
FONT-FAMILY: "Trebuchet MS", Arial,
Verdana;
}
|
|
2. Formulare mit CSS ohne Tabellen
Dieses Formular ist mit keinem Script verknüpft.
Es dient nur zur Demonstration.
Der HTML-Code:
|
<div class="formbox">
<h3 class="form3">Newsletter-</h3>
<form action="">
<div class="formreihe"> <span class="formlabel">Name:</span>
<span class="formfeld">
<input type="text" size="34"
name="text" />
</span></div>
<div class="formreihe"> <span class="formlabel">E-Mail:</span>
<span class="formfeld">
<input type="text" size="34"
name="text2" />
</span> </div>
<div class="formreihe">
<p><span class="formlabel">Interessen:</span>
<span class="formfeld">
<textarea cols="34" rows="6"
name="textarea">Für welchen Thema
interessierst du dich besonders?</textarea>
</span></p>
<p><span class="formfeld">
<input type="radio" name="abo"
value="rein" checked />
bestellen<br />
<input type="radio" name="abo"
value="raus" />
abbestellen </span> </p>
</div>
<div class="formreihe">
<p><span class="formlabel"> </span>
<span class="formfeld">
<input type="submit" value="Senden"
name="submit" />
<input type="reset" value="Löschen"
name="submit2" />
</span></p>
<p> </p>
<p> </p>
</div>
</form>
</div>
|
Diese Definitionen habe ich in einer externen
CSS-Datei definiert, die Elemente für dieses Formular
sind:
|
.formreihe {
clear: both;
padding: 2px 0px;
}
.formlabel {
float: left;
width: 100px;
text-align: right;
padding-top: 3px;
padding-right: 5px;
}
.formfeld {
float: right;
width: 300px;
text-align: left;
}
.formbox {
width: 405px;
background-color: #828282;
border: 1px solid #828282;
}
textarea {
font-weight: normal;
font-family: Trebuchet MS, Arial, Verdana;
color:#FFFFFF;
background-color:#666666;
margin:2px;
border-style:outset;
border-color: #828282;
}
.form3 {
font-size: 1.1em;
color: #00000;
text-align: center;
margin: 10px 0px 20px;
padding: 0px;
}
|
* ~ * ~ *
3. Formulare mit farbigen Auswahlfeldern und eigenen Buttons
Der HTML-Code:
|
<form action="">
<table border="0" cellpadding="5"
cellspacing="0" bgcolor="#215293"
width="430">
<tr>
<td align="right"> </td>
<td> <font size="4">Kontaktformular</font></td>
</tr>
<tr>
<td align="right">Ihr Name:</td>
<td>
<input class="formfeld3" type="text"
name="name1" id="name" size="35">
</td>
</tr>
<tr>
<td align="right">Ihr Vorname:</td>
<td>
<input class="formfeld3" type="text"
name="name2" id="name" size="35">
</td>
</tr>
<tr>
<td align="right">Ihre E-Mail:</td>
<td>
<input class="formfeld3" type="text"
name="mail2" id="name" size="35">
</td>
</tr>
<tr>
<td align="right">Grafik auswählen:</td>
<td>
<select name="auswahlliste" size="1"
style="background-color: #7B9ED8; color: #FFFFFF;">
<option>Grafik 1</option>
<option>Grafik 2 </option>
<option>Grafik 3 </option>
</select>
</td>
</tr>
<tr>
<td align="right"> </td>
<td>
<input type="image" src="pi8/formb1.jpg"
width="94" height="28" "submit"
name="senden2" id="senden" value="Senden">
<input type="image" src="pi8/formb2.jpg"
width="94" height="28" "reset"
name="reset2" id="reset" value="Löschen">
</td>
</tr>
</table>
<h4> </h4>
</form>
|
Die Elemente in der externen
CSS-Datei für das Formular und die Buttons.
|
.formfeld3 {
background-color: #7B9ED8;
border : 2px #a9a9a9;
margin-top : 2px;
margin-right : 2px;
margin-bottom : 2px;
margin-left : 2px;
FONT-SIZE: 9pt; COLOR: #FFFFFF; FONT-FAMILY: "Trebuchet
MS", Arial, Verdana;
}
|
