Home  |  Zu den Webtipps


Webtipp No.10
Mit einem einfachen, kleinem JavaScript und einiger Mini CSS - Anweisungen kann man ein gewöhnliches Formular aufwerten.
Keine Angst, hört sich komplizierter an als es ist. Profis schreiben ein CSS - Style in den Headbereich und rufen dann diese Anweisungen per CLASS oder ID - Anweisung auf. Wir wollen aber gleich in den Inputzeilen die CSS-Styles screiben. Das ist, für Anfänger, besser nachzuvollziehen.
 
1.Das normale Formular wie es jeder kennt
Beschreibung:
Als Beispiel dienen 3 Inputzeilen für Vormame,Name, Adresse, Email, Homepage und ein Textarea für Mitteilungen. Also das gewöhnliche Allerweltsformular.
Beispiel 1: Der HTML - Code für ein normales Emailformular.
<form name="Kontakt" action="Mailto:trems@web.de" method=POST enctype="text/plain" >
<input type="hidden" name="redirect" value="http://wwwe511.de" >
<input type="hidden" name="subject" value="Kontakt" >
<input type="hidden" name="admin" value="trems@web.de" >
<table align="center" border="0" cellpadding="5" cellspacing="2">
<tr valign="top" height="25">
<td align="right">Vorname</td>
<td ><input type="text" name="VName" value="" size="20" MaxLength="20" ></td>
</tr>
<tr valign="top" height="25">
<td align="right">Name</td>
<td ><input type="text" name="Name" value="" size="20" MaxLength="20" ></td>
</tr>
<tr valign="top" height="25">
<td align="right">E-Mail</td>
<td ><input type="text" name="EMail" value="" size="20" MaxLength="20" ></td>
</tr>
<tr valign="top" height="25">
<td align="right">Homepage</td>
<td ><input type="text" name="Homepage" value="" size="20" MaxLength="20" ></td>
</tr>
<tr valign="top" height="25">
<td align="right">Ihr Text</td>
<td ><textarea cols="30" rows="5" name="Text"></textarea></td>
</tr>
<tr>
<td align="center">
<input type="submit" name="next" value="Abschicken">
<input type="reset" name="next" value="Zurücksetzen"></td>
</tr>
</table>
</form>
</td>
</tr>
</table>´
Und so sieht das in Natura aus
Beispiel 1:
Vorname
Name
E-Mail
Homepage
Ihr Text
 




2.Das aufgepeppte Formular sieht nun so aus:
Beschreibung:
Als Erstes wird im Headbereich dieses kurze JavaScript geschrieben.
In JEDER Inputzeile und der Textareazeile, im Bodybereich, wird das dieses kurze Script eingefügt. Das Script bewirkt, das die Schrift in den Eingabefelden, bei Klick, verschwindet.
Das gesamte Script, als HTML- Seite, steht ganz unten.
Nun zu den CSS - Anweisungen. In JEDER Inputzeile kommt zusätzlich dieses CSS - Teil:

Damit werden die Hintergrundfarbe, die Textfarbe, Textgröße und die Rahmenfarbe um die Inputzeile festgelegt. Sie können hier experimentieren und die CSS - Styles Ihren Wünschen entsprechend anpassen. Das war's. Und nun viel Spass beim Webworken.
Beispiel 2:
Die gesamte HTML - Seite für dasgestylte Formular

<form name="Kontakt" action="Mailto:trems@web.de" method=POST enctype="text/plain" >
<input type="hidden" name="redirect" value="http://wwwe511.de">
<input type="hidden" name="subject" value="Kontakt" >
<input type="hidden" name="admin" value="trems@web.de" >
<table style="border:2px solid red;" bgcolor="gold" align="center" border="0" cellpadding="5" cellspacing="2">
<tr valign="top" height="25">
<td >
<input onFocus="doClear(this)" style="background-color: #FFFF00; color: black; font-size: 12px; border:1px solid #FF0000;"type="text" name="VName" value="Ihr Vorname" size="35" MaxLength="20">
</td>
</tr>
<tr valign="top" height="25">
<td >
<input onFocus="doClear(this)" style="background-color: #FFFF00; color: black; font-size: 12px; border:1px solid #FF0000;"type="text" name="Name" value="Ihren Nachnamen" size="35" MaxLength="20" >
</td>
</tr>
<tr valign="top" height="25">
<td >
<input onFocus="doClear(this)" style="background-color: #FFFF00; color: black; font-size: 12px; border:1px solid #FF0000;"type="text" name="EMail" value="Ihre Mailadresse" size="35" MaxLength="20" >
</td>
</tr>
<tr valign="top" height="25">
<td >
<input onFocus="doClear(this)" style="background-color: #FFFF00; color: black; font-size: 12px; border:1px solid #FF0000;" type="text" name="Homepage" value="Ihre Homepage" size="35" MaxLength="50" >
</td>
</tr>
<tr valign="top" height="25">
<td >
<textarea onFocus="doClear(this)" style="background-color: #FFFF00; color:black; font-size: 12px; border:1px solid #FF0000;" cols="30" rows="9" name="Text">
Ihre Mitteilungen an Mich</textarea>
</td>
</tr>
<tr>
<td align="center">
<input style="background-color: #FFDF00; color: #000000; font-size: 12px; border:1px solid #FF0000;" type="submit" name="next" value="Abschicken" >
<input style="background-color: #FFBF00; color: #000000; font-size: 12px; border:1px solid #FF0000;" type="reset" name="next" value="Zurücksetzen" >
</td>
</tr>
</table>
</form>


  all © by eckhard trems - www.trems.de    Zu den Webtipps  |   Home  |   Kontakt/Impressum