NinetNet    HTML    Formulär    Snygga till formuläret med CSS

  skriv ut    

Snygga till formuläret med CSS

Med CSS kan du förändra utseendet på ditt formulär så att det passar med designen på din sida. Själva Css-koden kan skrivas i en extern css-fil, i sidans huvud eller med inline-style direkt i formuläret.

Formulär utan CSS 

Formulär med CSS och beskrivning 

Stil på Knappar 

Knappar med egen bild 

Bakgrundsbild i formulärfälten 

Transparent formulär 

TuttiFrutti - Formulär... 

Uppställning med CSS 

Formulär utan CSS


Här är ett exempel på ett formulär utan css. Funktionerna i formuläret är lagda i en tabell för att snygga till uppställningen. Vill du undvika tabeller finns en variant för att ställa upp formuläret med bara CSS längre ner.


Så här ser koden till formuläret och tabellen ut:

<form>

<table border="0" cellpadding="3" cellspacing="0">
<tr>
<td valign="top">
<label for="namn">Namn:</label></td>
<td valign="top">
<input type="text" id="namn" name="namn" size="35"></td>
</tr>

<tr>
<td valign="top">
<label for="email">E-post:</label></td>
<td valign="top">
<input type="text" id="email" name="email" size="35"></td>
</tr>

<tr>
<td valign="top">
<label for="meddelande">Meddelande:</label></td>
<td valign="top">
<textarea id="meddelande" name="meddelande" cols="35" rows="5"></textarea></td>
</tr>

<tr>
<td>&nbsp;</td>
<td><input type="submit" value="Skicka">&nbsp;&nbsp;
<input type="reset" value="Rensa"></td>
</tr>
</table>

</form>


 Till Toppen 

Formulär med CSS och beskrivning


Så här kan samma formulär som ovan se ut med lite CSS-formatering:



• Textrutorna här är inte lika breda som i det tidigare exemplet. Det beror på att de styrs av teckensnittets bredd.

Css-koden

Css-koden skrivs in i sidans huvud mellan <head> och </head> (en extern sidmall fungerar också):

<style type="text/css">
<!--

form label { font-family: Verdana; color: #000000; font-size: 11px }

form input { font-family: Verdana; color: #000000; font-size: 11px; background-color: #CCCC99; border: 1px solid #000000 }

form textarea { font-family: Verdana; color: #000000; font-size: 11px; background-color: #CCCC99; border: 1px solid #000000; padding: 5px }

form {
scrollbar-face-color: #CCCC99;
scrollbar-highlight-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-3dlight-color: #CCCC99;
scrollbar-darkshadow-color: #CCCC99;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #CCCC99
}

-->
</style>

Förklaring

Formuläret får automatiskt ovanstående formatering. Så här funkar det:


form label { font-family: Verdana; color: #000000; font-size: 11px } Används för att den beskrivande texten ska visas med teckensnittet Verdana i svart och med storleken 11px.
form input { font-family: Verdana; color: #000000; font-size: 11px; background-color: #CCCC99; border: 1px solid #000000 } Används för att texten som skrivs in i textrutorna ska visas med teckensnittet Verdana i svart och med storleken 11px. Bakgrundsfärgen ska vara: #CCCC99. Kanten runt rutorna ska vara svart, heldragen och visas med en pixels bredd. Knapparna får automatiskt samma utseende.
form textarea { font-family: Verdana; color: #000000; font-size: 11px; background-color: #CCCC99; border: 1px solid #000000; padding: 5px } Används för att texten som skrivs in i meddelanderutan ska formateras på samma sätt som textrutorna ovan - men med "padding: 5px" skapas lite "luft" runt texten.
Vill du ha ett speciellt utseende på bäddringslisterna lägger du till nedanstående i koden. Men de kommer bara att få det här utseendet för dem som surfar med Internet Explorer. Vill du inte formatera bläddringslisterna tar du bara bort den här biten i CSS-koden.
form {
scrollbar-face-color: #CCCC99;
scrollbar-highlight-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-3dlight-color: #CCCC99;
scrollbar-darkshadow-color: #CCCC99;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #CCCC99
}
 Har du redan formaterat själva sidan med eget utseende på bläddringslisterna kommer formuläret automatiskt att visas med dem om du inte anger ngt annat.

 Till Toppen 

Stil på Knappar

Det kan ju hända att du vill ha ett annat utseende på knapparna än resten av "input-fälten" i formuläret.

Om du bara vill stajla knapparna kan du skapa en klass som du skriver in i stilmallen - men om du har formaterat resten av formuläret med CSS kan du som i exemplen nedan använda inline-style direkt i HTML-koden. De olika kantstilarnas utseende varierar något beroende på webläsare.




Exempel 1



  


Så här ser koden till skicka-knappen ut:

<input type="submit" value="Skicka" style="font-family: Verdana; color: #000000; font-size: 11px; background-color: #F0E68C">



Exempel 2



  


Så här ser koden till radera-knappen ut:

<input type="reset" value="Radera" style="font-family: Verdana; color: #000000; font-size: 11px; background-color: #F0E68C; border: 3px ridge #F0E68C">



Exempel 3



  


Så här ser koden till skicka-knappen ut:

<input type="submit" value="Skicka" style="font-family: Verdana; color: #000000; font-size: 11px; background-color: #F0E68C; border: 3px outset #F0E68C">


 Till Toppen 

Knappar med egen bild

Om du läst avsnittet om formulär vet du att det är lätt att ersätta "Submit-knappen" med en egen bild. Vill du ersätta både Submit och Reset måste du använda CSS. Bilden placeras då som bakgrundsbild i en "box" med samma mått som bilden. Det görs enklast genom att skapa en egen klass för knapparna. Så här kan det se ut:




Exempel 1

  



Så här ser bilden ut:



Och så här ser CSS-koden ut:

.knappar {
font-family: Verdana; color: #000000; font-size: 11px;
background-color: transparent;
background-image: url(din_knapp.gif);
width: 98px; height: 18px; border: none;
}

• Teckensnittet på knapparna blir: Verdana i svart och med storleken 11px.

• Bakgrundsfärgen ska vara transparent för att det ska fungera i flertalet webläsare.

• Sökvägen till bilden anges med: "background-image: url(din_knapp.gif)".

• Med: "width" och "height" anges bildens storlek.

• Ingen kant: border: none!



Så här skrivs klassen in i HTML-koden på sidan:

<input class="knappar" type="submit" value="Skicka">

<input class="knappar" type="reset" value="Radera">


Exempel 2

Så här ser bilderna ut:

  



Och så här ser CSS-koden ut:

.submitknapp {
background-color: transparent;
background-image: url(submit_knapp.gif);
width: 98px; height: 18px; border: none; }

.resetknapp {
background-color: transparent;
background-image: url(reset_knapp.gif);
width: 98px; height: 18px; border: none; }

• Bakgrundsfärgen ska vara transparent för att det ska fungera i flertalet webläsare.

• Sökvägen till bilderna anges med: "background-image: url(xxx_knapp.gif)".

• Med: "width" och "height" anges bildernas storlek.

• Ingen kant!



Så här skrivs klassen in i HTML-koden på sidan:

<input class="submitknapp" type="submit" value="&nbsp;">

<input class="resetknapp" type="reset" value="&nbsp;">


 Till Toppen 

Bakgrundsbild i formulärfälten

Man kan också infoga en bakgrundsbild i formulärfälten...



Så här ser CSS-koden ut:

<style type="text/css">
<!--

form label { font-family: "Comic Sans MS"; color: #014D73; font-size: 12px; }

form input { font-family: "Comic Sans MS"; color: #014D73; font-size: 11px; background-image: url(bg.gif); border: 1px solid #014D73; }

form textarea { font-family: "Comic Sans MS"; color: #014D73; font-size: 11px; background-image: url(bg.gif); border: 1px solid #014D73; padding: 5px; }

-->
</style>

• Koden till formuläret är densamma som i tidigare exempel.

• Formuläret får automatiskt ovanstående formatering.

• Sökvägen till bilderna anges med: "background-image: url(bg.gif)".



 Till Toppen 

Transparent formulär

Det går också bra att i stället för bakgrundsfärg eller bild i formulärfälten välja att bakgrunden ska vara transparent, vilket kanske kan passa bra om man har en bakgrundsbild på sidan.

Så här ser CSS-koden ut:

<style type="text/css">
<!--

form label { font-family: Verdana; color: #333333; font-size: 11px; }

form input { font-family: Verdana; color: #333333; font-size: 11px; background-color: transparent; border: 1px solid #7F9DB9; }

form textarea { font-family: Verdana; color: #333333; font-size: 11px; background-color: transparent; padding: 5px; border: 1px solid #7F9DB9; }

 -->
</style>

• Transparensen anges med: "background-color: transparent".

• Koden till formuläret är densamma som i tidigare exempel.

• Formuläret får automatiskt ovanstående formatering.



 Till Toppen 

TuttiFrutti - Formulär...

Man kan också styra utseendet på kontrollerna i formuläret genom att skapa olika klasser. På så sätt kan man variera utseendet riktigt ordentligt - om man händelsevis skulle få lust till det. Så här kan det se ut:




Inte så snyggt, kanske... Men du fattar principen, va? Koden till formuläret är densamma som i tidigare exempel.

Så här ser CSS-koden ut:

<style type="text/css">
<!--

.label1 { font-family: "Times New Roman"; font-size: 12px; color: blue; font-weight: bold; }
.text1 { font-family: "Times New Roman"; font-size: 12px; color: red; font-weight: bold; background-color: pink; border: 2px dotted green; }

.label2 { font-family: Verdana; font-size: 12px; color: green; font-weight: bold; }
.text2 { font-family: Verdana; font-size: 12px; color: blue; font-weight: bold; background-color: yellow; border: 6px double red; }

.label3 { font-family: "Comic Sans MS"; font-size: 14px; color: red; font-weight: bold; }
.textarea { font-family: "Comic Sans MS"; font-size: 11px; color: green; font-style: italic; background-color: white; border: 2px dashed blue; }

.knapp1 { font-family: Arial; font-size: 12px; color: red; font-weight: bold; background-color: tan; border: 3px ridge yellow; }
.knapp2 { font-family: Arial; font-size: 12px; color: white; font-style: italic; background-color: black; border: 3px inset green; }

-->
</style>

Så här skrivs klasserna in på sidan:

<form>

<label class="label1" for="namn">Namn:</label>
<input class="text1" type="text" id="namn" name="namn" size="35" value="Kalle Anka">

<label class="label2" for="email">E-post:</label>
<input class="text2" type="text" id="email" name="email" size="35" value="kalle.anka@ankeborg.com">

<label class="label3" for="meddelande">Meddelande:</label>
<textarea class="textarea" id="meddelande" name="meddelande" cols="35" rows="5"></textarea>

<input class="knapp1" type="submit" value="Skicka">
<input class="knapp2" type="reset" value="Rensa">

 </form>


 Till Toppen 

Uppställning med CSS

Om man kodar sin sida efter lite striktare standard vill man ofta undvika att styra sidans layout med tabeller. Men det går utmärkt att snygga till formulärets uppställning med "bara" CSS. Nedan följer två exempel.




Exempel 1

Så här ser CSS-koden ut:

<style type="text/css">
<!--

form { padding: 10px; }

form label { font-family: Verdana; color: #000000; font-size: 11px; }

form input { font-family: Verdana; color: #000000; font-size: 11px; border: 1px solid #000000; background-color: #eaeaea; }

form textarea { font-family: Verdana; color: #000000; font-size: 11px; border: 1px solid #000000; background-color: #eaeaea; }


form p { width: 340px; text-align: right; clear: both; margin: 0px 0px 10px 0px; }

form label { float: left; }

form input { margin-left: 10px; }

form textarea { margin-left: 10px; }

-->
</style>


Och så här ser HTML-koden ut:

<form>

<p><label for="namn">Namn:</label>
<input type="text" id="namn" name="namn" size="35"></p>

<p><label for="email">E-post:</label>
<input type="text" id="email" name="email" size="35"></p>

<p><label for="meddelande">Meddelande:</label>
<textarea id="meddelande" name="meddelande" cols="35" rows="5"></textarea></p>

<p><input type="submit" name="skicka" value="Skicka"><input type="reset" name="rensa" value="Rensa"></p>

</form>


Exempel 2

Så här ser CSS-koden ut:

<style type="text/css">
<!--

form { padding: 10px; }

form label { font-family: Verdana; color: #000000; font-size: 11px; }

form input { font-family: Verdana; color: #000000; font-size: 11px; border: 1px solid #000000; background-color: #eaeaea; }

form textarea { font-family: Verdana; color: #000000; font-size: 11px; border: 1px solid #000000; background-color: #eaeaea; }

.kontroll { width: 340px; clear: both;}
.left { width: 100px; float: left; padding-bottom: 5px; }
.right { width: 240px; float: right; padding-bottom: 5px; }

-->
</style>


Och så här ser HTML-koden ut:

<form>

<div class="kontroll">
<div class="left">
<label for="namn">Namn:</label>
</div>
<div class="right">
<input type="text" id="namn" name="namn" size="35">
</div>
</div>

<div class="kontroll">
<div class="left">
<label for="email">E-post:</label>
</div>
<div class="right">
<input type="text" id="email" name="email" size="35">
</div>
</div>

<div class="kontroll">
<div class="left">
<label for="meddelande">Meddelande:</label>
</div>
<div class="right">
<textarea id="meddelande" name="meddelande" cols="35" rows="5"></textarea>
</div>
</div>

<div class="kontroll">
<div class="left">&nbsp;</div>
<div class="right">
<input type="submit" name="skicka" value="Skicka"> 
<input type="reset" name="rensa" value="Rensa">
</div>
</div>

</form>


 Till Toppen 
  Formulär