Prinzip
Beispiel entnommen aus einem Formular von SELFHTML
1) Stylesheet
Dies ist ein Stylesheet von SELFHTML, das aber in diesem Beispiel nicht angewendet wird da dieses Stylesheet nicht mit diesem Beispiel verbunden ist.
<style type="text/css">
form { background-image:url(background.gif);
padding:20px; border:6px solid #ddd; }
td, input, select, textarea { font-size:13px;
font-family:Verdana,sans-serif; font-weight:bold; }
input, select, textarea { color:#00c; }
.Bereich, .Feld { background-color:#ffa;
width:300px; border:6px solid #ddd; }
.Auswahl { background-color:#dff; width:300px;
border:6px solid #ddd; }
.Check, .Radio { background-color:#ddff; border:1px
solid #ddd; }
.Button { background-color:#aaa; color:#fff;
width:200px; border:6px solid #ddd; }
</style>
2) Quelltext
Dieser Quelltext gibt einen Überblick über einige der wichtigsten Elemente eines Formulars.
SELFHTML verwendet in diesem Beispiel Tabellen.
SELFHTML verwendet in diesem Beispiel keine Labels zur Beschriftung.
<form action="http://de.selfhtml.org/cgi-bin/comments.pl"> <table border="0" cellpadding="3" cellspacing="0"> <tr> <td align="right">Vorname:</td> <td><input type="text" name="cs_vorname" class="Feld" size="30" maxlength="30"></td> </tr> <tr> <td align="right">Nachname:</td> <td><input type="text" name="cs_nachname" class="Feld" size="30" maxlength="40"></td> </tr> <tr> <td align="right" valign="top">Geschlecht:</td> <td> <input type="radio" class="radio" name="Geschlecht" value="m"> männlich<br> <input type="radio" class="radio" name="Geschlecht" value="w"> weiblich </td> </tr> <tr> <td align="right" valign="top">Eigenschaften:</td> <td> <input type="checkbox" class="Check" name="Eigenschaft" value="Raucher"> Raucher<br> <input type="checkbox" class="Check" name="Eigenschaft" value="Autofahrer"> Autofahrer<br> <input type="checkbox" class="Check" name="Eigenschaft" value="HTMLFreak"> HTML-Freak </td> </tr> <tr> <td align="right" valign="top"> Nächste Grossstadt:</td> <td> <select name="Grossstadt" class="Auswahl" size="1"> <option value="Hamburg">Hamburg</option> <option value="Berlin">Berlin</option> <option value="Frankfurt">Frankfurt</option> <option value="Muenchen">München</option> </select> </td> </tr> <tr> <td align="right" valign="top">Kommentar:</td> <td><textarea name="Text" class="Bereich" rows="7" cols="30"></textarea></td> </tr> <tr> <td align="right">Formular:</td> <td> <input type="submit" value="Absenden"> <input type="reset" value="Abbrechen"> </td> </tr> </table> </form>
3) Anzeige im HTML-Dokument
Die Formatierung erfolgt in diesem Beispiel nicht mit dem oben angegebenen Stylesheet, da dieses Stylesheet nicht mit dieser Datei und daher nicht mit diesem Beispiel verbunden ist.