Formulär II med CSS

1. Ett formulär

Ett formulär kan se ganska trist ut och för att få det snyggt, måste vi anväda CSS (Cascading Style Sheets). Utgångspunkten är avsnittet Formulär I och jag har utöver html använt just denna teknik med CSS i nedanstående forulär. Det är en väldig skillnad mellan de grå standardformulären jämfört med detta formulär.

2. Koden till formuläret

Denna kod har jag använt mig av för att skapa formulären.

<html> <head> <title>Formulär med CSS</title> <STYLE TYPE="text/css">  </STYLE> </head> <body> <form method="post" action="/cgi-bin/formmail.pl"> <input type="hidden" name="redirect" value="tack.html"> <input type="hidden" name="recipient" value="din@email.se"> <input type="hidden" name="_replyto"> <table border="0" width="398"> <tr> <td align="center">Sänd en kommentar:</td> </tr> </table> <table border="0"> <tr> <td align="left" valign="top">Namn:</td> <td align="left" valign="top"><input type="TEXT" name="namn" maxlength="30" size="23"></td> </tr> <tr> <td align="left" valign="top">E-postadress:</td> <td align="left" valign="top"><input type="TEXT" value="Frivilligt" name="e-postadress" maxlength="30" size="23"></td> </tr> <tr> <td align="left" valign="top">Sänd en kommentar:</td> <td align="left" valign="top"><textarea name="Respons" maxlenght="5000" cols="35" rows="5" wrap="soft"></textarea></td> </tr> </table> <table border="0" width="398"> <tr> <td align="center"><input type="SUBMIT" value="Skicka" style="font-family: Verdana; color: #000000; font-size: 8pt; border: 1 solid #000000; background-color: #cccccc"> <input type="RESET" value="Radera" style="font-family: Verdana; color: #000000; font-size: 8pt; border: 1 solid #000000; background-color: #cccccc"> </td> </tr> </table> </form> </body> </html>

3. Förklaring av koden

I avsnittet Formulär I förklarar jag allt vad en formulär innehåller, därför gör jag det inte nu utan koncentrerar mig kring vad jag gjort genom CSS. Jag har brukat två olika metoder för att infoga CSS i koden. Dels genom ange det i head och dels direkt i html-koden för skicka- och radera-knapparna.

För texten före formulärfälten, har jag genom att definiera <td> valt att sätta texten i typsnittet Verdana och till en storlek av 9 pt. Formulärfälten har jag genom input definierat texten till Verdana 9 pt samt att jag gjort en ram runt och skapat en bakgrundsfärg background-color: #eaeaea;. Samma värden finns för <textarea>. Om jag istället vill ha en streckad linje runt, väljer jag border: 1 dotted #000000; och för en dubbel linje border: 1 double #000000;. Läs vidare i avsnittet Kantlinjer med CSS.

För skicka och radera, som också är input, har jag definierat CSS i html-koden. Här jag jag valt en mörkare bakgrund och lite mindre bokstäver. När jag gör så här "annulerar" de värden jag angivit inom head för dessa fält.

Man kan också skapa en ram runt hela formuläret genom CSS. Genom att exempelvis sätta den inom en tabell eller att skapa en box, vilka du markerar en ram kring . Hur man gör detta finner du i avsnittet Kantlinjer med CSS.





kontakt	© Stefan Dahlén	Tisdag 7:e oktober 2008