84 besökare online
Drömvävaren webbshop

webdesign och HTML

Förutsättningar för att följa guiden

Den här guiden är en direkt fortsättning på guiden Formulär - forms » och om du vill veta mer om formulär börjar du med den guiden. Exemplen visar CSS-koden men ger inga detaljerade beskrivningar om vad koden innebär. Om du inte har grundkunskaper i CSS börjar du med guiden CSS - grunder »

Alla formulär i denna guide använder både attributen NAME och ID (trots att XHTML förordar att endast "id" ska användas). Anledningen är att "name" används av programkod som tex PHP och javascript. Om bara "id" används är risken stor att funktionerna blir felaktiga och det kan vara en bra idé att använda både "name" och "id" under en övergångsperiod .

Alla formulärexempel i denna guide använder doctype XHMTL 1.0 Transitional - läs mer i guiden Dokumenttyp - doctypes XML och XHTML »

TIPS! Du kan konvertera dina dokument från HTML till XHTML (eller tvärtom).
Läs mer i Dreamweaver-guiden XHTML ersätter HTML konvertera dokument till XHTML »

 

CSS-formatering med ID, CLASS eller STYLE

Du kan ange CSS-formatering inom <HEAD> i dokumentet med attributet CLASS eller till element med angiven ID. Om du vill ange formateringen direkt i elementet kan du använda STYLE.

CSS-formateringen som visas i denna guide kan du i en extern CSS-mall eller direkt i dokumentet. Läs mer om detta i guiden CSS grunder » (avsnittet "CSS i extern mall eller i dokumentet").

Här visas tre exempel på CSS-formatering med olika metoder som ger samma resultat.

Formatering med STYLE

Om du vill formatera enstaka element kan du göra detta direkt i elementet. Här formateras FIELDSET med attributet STYLE:

<html>
<head>
</head>
<body>

<form name="kontaktform" id="kontaktform" method="post" action="">
<fieldset style="width: 450px; padding: 20px">

</fieldset>
</form>
</body>
</html>

 

Formatering med CLASS

Om du vill ange samma formatering på flera element i samma dokument så anger du en CLASS där du själv väljer ett class-namn. Class-namnet ska inledas med en punkt i mallen (men inte i elementet). Du kan tillämpa classen på flera olika typer av element i samma dokument. I exemplet nedan formateras elementet FIELDSET och vi har valt form_fieldset som class-namn:

<html>
<head>
<style type="text/css">
<!--
.form_fieldset { width: 450px; padding: 20px; }
-->
</style>
</head>
<body>

<form name="kontaktform" id="kontaktform" method="post" action="">
<fieldset class="form_fieldset">

</fieldset>
</form>
</body>
</html>

 

Formatering med ID

Om du tilldelar formuläret <FORM> ett unikt ID så kan du tillämpa CSS-formateringen på olika element i formuläret. ID-namnet ska inledas med tecknet # i mallen (men inte i elementet). Till skillnad mot CLASS i exemplet ovan så ska ID bara användas en gång i varje dokument. Om du har flera formulär använder du olika ID-namn. I exemplet nedan formateras elementet FIELDSET och vi har valt kontaktform som ID-namn:

<html>
<head>
<style type="text/css">
<!--
#kontaktform fieldset { width: 450px; padding: 20px; }
-->
</style>
</head>
<body>

<form name="kontaktform" id="kontaktform" method="post" action="">
<fieldset>

</fieldset>
</form>
</body>
</html>

 

 

FIELDSET och LEGEND

Kantlinjen som inramar innehållet i FIELDSET kan variera beroende på vilken webbläsare som används. Internet Explorer visar en grå linje med runda hörn och Firefox visar en svart linje utan runda hörn.

Exemplet nedan är hämtat från avsnittet "Tillgänglighet med LEGEND och FIELDSET" i guiden Formulär  forms » och är oformaterat.

Notera att ID-namnet vi använder är "kontaktform" (som används i alla kommande formulär-exempel:

MEDDELANDE





Koden till exemplet:

<form name="kontaktform" id="kontaktform" method="post" action="">
<fieldset>
<legend>MEDDELANDE</legend>
<label for="namn">Namn:</label> <br />
<input type="text" name="namn" id="namn" /> <br />
<label for="epost1">E-postadress:</label> <br />
<input type="text" name="epost" id="epost" /> <br />
<label for="meddelande">Meddelande:</label> <br />
<textarea name="meddelande" id="meddelande" cols="30" rows="5"></textarea> <br />
<input type="submit" name="skicka" id="skicka" value="Skicka meddelandet" />
</fieldset>
</form>

 

FIELDSET, bredd och avstånd från till inramning

Bredden på FIELDSET och avstånd till innehållet anges med WIDTH och PADDING:

MEDDELANDE





Koden till exemplet:

<head>
<style type="text/css">
<!--
#kontaktform fieldset { width: 400px; padding: 20px 0px 20px 50px; }
-->
</style>
</head>

<form name="kontaktform" id="kontaktform" method="post" action="">
<fieldset>
<legend>MEDDELANDE</legend>
<label for="namn">Namn:</label> <br />
<input type="text" name="namn" id="namn" /> <br />
<label for="epost">E-postadress:</label> <br />
<input type="text" name="epost" id="epost" /> <br />
<label for="meddelande">Meddelande:</label> <br />
<textarea name="meddelande" id="meddelande" cols="30" rows="5"></textarea> <br />
<input type="submit" name="skicka" id="skicka" value="Skicka meddelandet" />
</fieldset>
</form>

OBS! Internet Explorer visar inte avståndet korrekt i överkant. Istället för ett avstånd mellan FIELDSET-boxen och innehållet så visas ett avstånd uppåt utanför boxen. Vi känner inte till någon enkel lösning på problemet...

 

 

Kantlinje för FIELDSET och textegenskaper för LEGEND

 

MEDDELANDE





Koden till exemplet:

<head>
<style type="text/css">
<!--
#kontaktform fieldset { width: 400px; padding: 20px 0px 20px 50px; border: 1px solid #99cc00; }
#kontaktform legend { color: #99cc00; letter-spacing: 5px; margin-left: 100px; }
-->
</style>
</head>

<form name="kontaktform" id="kontaktform" method="post" action="">
<fieldset>
<legend>MEDDELANDE</legend>
<label for="namn">Namn:</label> <br />
<input type="text" name="namn" id="namn" /> <br />
<label for="epost">E-postadress:</label> <br />
<input type="text" name="epost" id="epost" /> <br />
<label for="meddelande">Meddelande:</label> <br />
<textarea name="meddelande" id="meddelande" cols="30" rows="5"></textarea> <br />
<input type="submit" name="skicka" id="skicka" value="Skicka meddelandet" />
</fieldset>
</form>

 

 

Bakgrund till LEGEND

I exemplet nedan används dessutom en negativ vänstermarginal (margin-left: -30px;) till LEGEND för att rubriken inte ska följa samma vänsterkant som innehållet i FIELDSET:

Meddelande





Koden till exemplet:

<head>
<style type="text/css">
<!--
#kontaktform fieldset { width: 400px; padding: 20px 0px 20px 50px; border: 1px solid #99cc00; }
#kontaktform legend{ background-color: #e2ff8c; padding: 2px 2px 2px 3px; margin-left: -30px; letter-spacing: 3px; border: 1px solid #99cc00; }
-->
</style>
</head>

 

 

Bakgrund till FIELDSET

I exemplet nedan används dessutom en negativ vänstermarginal (margin-left: -30px;) till LEGEND för att rubriken inte ska följa samma vänsterkant som innehållet i FIELDSET:

Meddelande





Koden till exemplet:

<head>
<style type="text/css">
<!--
#kontaktform fieldset { width: 400px; padding: 20px 0px 20px 50px; border: 1px solid #99cc00; background-color: #e2ff8c; }
#kontaktform legend { background-color: #e2ff8c; padding: 2px 2px 2px 3px; margin-left: -30px; letter-spacing: 3px; border: 1px solid #99cc00; }
-->
</style>
</head>

OBS! Internet Explorer visar inte avståndet korrekt i överkant. Istället för ett avstånd mellan FIELDSET-boxen och innehållet så visas ett avstånd uppåt utanför boxen. Vi känner inte till någon enkel lösning på problemet...

 

 

Bild som bakgrund till FIELDSET

I exemplet nedan används dessutom en negativ vänstermarginal (margin-left: -30px;) till LEGEND för att rubriken inte ska följa samma vänsterkant som innehållet i FIELDSET:

Meddelande





Koden till exemplet:

<head>
<style type="text/css">
<!--
#kontaktform fieldset { width: 400px; padding: 20px 0px 20px 50px; border: 1px solid #99cc00; background-image: url(bakgrund1.jpg); }
#kontaktform legend { background-color: #e2ff8c; padding: 2px 2px 2px 3px; margin-left: -30px; letter-spacing: 3px; border: 1px solid #99cc00; }
-->
</style>
</head>

OBS! Internet Explorer visar inte avståndet korrekt i överkant. Istället för ett avstånd mellan FIELDSET-boxen och innehållet så visas ett avstånd uppåt utanför boxen. Vi känner inte till någon enkel lösning på problemet...

 

 

Textfält och textarea

Elementet INPUT används till flera typer av kontroller och i exemplet används input type="text" till textfälten och input type="submit" till skicka-knappen. Om vi använder vårt ID "kontaktform" tillsammans med elementet INPUT i mallen så kommer även skicka-knappen att omfattas av formatet. Här använder vi istället en CLASS som tillämpas på de två textfälten och knappen förblir oformaterad.

Kantlinje, avstånd till innehåll och textegenskaper

MEDDELANDE





Koden till exemplet:

<head>
<style type="text/css">
<!--
#kontaktform fieldset { width: 400px; padding: 20px 0px 20px 50px; border: 1px solid #99cc00; }
#kontaktform legend { color: #99cc00; letter-spacing: 3px; }
#kontaktform textarea { border: 1px solid #99cc00; padding: 5px; font-size: 11px; }
.input_text { border: 1px solid #99cc00; padding: 5px; font-size: 11px; letter-spacing: 2px; }
-->
</style>
</head>

<form name="kontaktform" id="kontaktform" method="post" action="">
<fieldset>
<legend>MEDDELANDE</legend>
<label for="namn">Namn:</label> <br />
<input type="text" name="namn" id="namn" class="input_text" /> <br />
<label for="epost">E-postadress:</label> <br />
<input type="text" name="epost" id="epost" class="input_text" /> <br />
<label for="meddelande">Meddelande:</label> <br />
<textarea name="meddelande" id="meddelande" cols="30" rows="5"></textarea> <br />

<input type="submit" name="skicka" id="skicka" value="Skicka meddelandet" />
</fieldset>
</form>

 

 

Bakgrundsfärg

MEDDELANDE





Koden till exemplet:

<head>
<style type="text/css">
<!--
#kontaktform fieldset { width: 400px; padding: 20px 0px 20px 50px; border: 1px solid #99cc00; }
#kontaktform legend { color: #99cc00; letter-spacing: 3px; }
#kontaktform textarea { border: 1px solid #99cc00; padding: 5px; font-size: 11px;
background-color: #E2FF8C; }
.input_text { border: 1px solid #99cc00; padding: 5px; font-size: 11px; letter-spacing: 2px; background-color: #e2ff8c; }
-->
</style>
</head>

 

 

LABEL

Om du även vill formatera textetiketterna och har använt LABEL kan du ange elementet i mallen. Här anges textegenskaper för etiketterna:

MEDDELANDE





Koden till exemplet:

<head>
<style type="text/css">
<!--
#kontaktform fieldset { width: 400px; padding: 20px 0px 20px 50px; border: 1px solid #99cc00; }
#kontaktform legend { color: #99cc00; letter-spacing: 3px; }
#kontaktform textarea { border: 1px solid #99cc00; padding: 5px; font-size: 11px;
background-color: #E2FF8C; }
.input_text { border: 1px solid #99cc00; padding: 5px; font-size: 11px; letter-spacing: 2px; background-color: #e2ff8c; }
#kontaktform label { font-size: 11px; letter-spacing: 2px; color: #99cc00; }
-->
</style>
</head>

 

 

Transparent bakgrund

Om du använt en bakgrundsfärg eller bakgrundsbild kan du göra formulärkontrollerna transparenta:

Meddelande





Koden till exemplet:

<head>
<style type="text/css">
<!--
#kontaktform fieldset { width: 400px; padding: 20px 0px 20px 50px; border: 1px solid #99cc00; background-image: url(bakgrund1.jpg); }
#kontaktform legend { background-color: #e2ff8c; padding: 2px 2px 2px 3px; margin-left: -30px; letter-spacing: 3px; border: 1px solid #99cc00; }
#kontaktform textarea { border: 1px solid #99cc00; padding: 5px; font-size: 11px; background-color: transparent;}
.input_text { border: 1px solid #99cc00; padding: 5px; font-size: 11px; letter-spacing: 2px; background-color: transparent; }
-->
</style>
</head>

 

 

Bakgrund med opacitet

Opacitet gör bakgrunden (och innehållet) delvis genomskinlig, läs mer i guiden CSS - effekter »

Meddelande





Koden till exemplet:

<head>
<style type="text/css">
<!--
#kontaktform fieldset { width: 400px; padding: 20px 0px 20px 50px; border: 1px solid #99cc00; background-image: url(bakgrund1.jpg); }
#kontaktform legend { background-color: #e2ff8c; padding: 2px 2px 2px 3px; margin-left: -30px; letter-spacing: 3px; border: 1px solid #99cc00; }
#kontaktform textarea { border: 1px solid #99cc00; padding: 5px; font-size: 11px;
opacity: 0.5; filter: alpha(opacity=50);}
.input_text { border: 1px solid #99cc00; padding: 5px; font-size: 11px; letter-spacing: 2px; opacity: 0.5; filter: alpha(opacity=50); }
-->
</style>
</head>

 

 

 

Kryssrutor och radioknappar

Kryssrutor och radioknappar har begränsade möjligheter när det gäller formatering och du kan aldrig vara säker på att ditt valda format visas korrekt då utseendet varierar i olika webbläsare.

Läs mer hos www.456bereastreet.com Öppnas i nytt fönster (Open in new window) och se hur olika browsers har sina egna tolkningar av hur en kryssruta och radioknapp ska se ut.

 

Bakgrundsfärg


FAVORITÅRSTID



FAVORITÅRSTID


Elementet INPUT används till flera typer av kontroller och i exemplet används input type="checkbox" till kryssrutor, input type="radio" till radioknappar och input type="submit" till skicka-knappen. Om vi använder vårt ID "kontaktform" tillsammans med elementet INPUT i mallen så kommer även skicka-knappen att omfattas av formatet. Här använder vi istället en CLASS som tillämpas på kryssrutor och radioknappar och skicka-knappen förblir då oformaterad.

Koden till exemplet:

<head>
<style type="text/css">
<!--
#kontaktform fieldset { width: 300px; padding: 20px 0px 20px 20px; }
.input_checkbox { background-color: #99cc00; }
.input_radio { background-color: #99cc00; }
-->
</style>
</head>


<form name="kontaktform" id="kontaktform" method="post" action="">
<label for="namn"></label><br />
<fieldset style="width: 300px;">
<legend>FAVORITÅRSTID</legend>
<input type="checkbox" name="favoritarstid" id="var" value="var" class="input_checkbox" />
<label for="var">VÅR</label><br />
<input type="checkbox" name="favoritarstid" id="sommar" value="sommar" class="input_checkbox" />
<label for="sommar">Sommar</label> <br />
<input type="checkbox" name="favoritarstid" id="host" value="host" class="input_checkbox" />
<label for="host">Höst</label><br />
<input type="checkbox" name="favoritarstid" id="vinter" value="vinter" class="input_checkbox"/>
<label for="vinter">Vinter</label>
</fieldset><br />

<fieldset style="width: 300px;">
<legend>FAVORITÅRSTID</legend>
<input type="radio" name="favoritarstid" id="var" value="var" class="input_radio" />
<label for="var">Vår</label><br />
<input type="radio" name="favoritarstid" id="sommar" value="sommar" class="input_radio" />
<label for="sommar">Sommar</label><br />
<input type="radio" name="favoritarstid" id="host" value="host" class="input_radio" />
<label for="host">Höst</label><br />
<input type="radio" name="favoritarstid" id="vinter" value="vinter" class="input_radio" />
<label for="vinter">Vinter</label>
</fieldset>
<br />
<input type="submit" name="skicka" id="skicka" value="Skicka meddelandet" />
</form>

 

 

Kantlinje


FAVORITÅRSTID



FAVORITÅRSTID


Koden till exemplet:

<head>
<style type="text/css">
<!--
#kontaktform fieldset { width: 300px; padding: 20px 0px 20px 20px; }
.input_checkbox { border: 1px solid #99cc00; }
.input_radio { border: 1px solid #99cc00; }
-->
</style>
</head>

 

 

LABEL

Om du även vill formatera textetiketterna och har använt LABEL kan du ange elementet i mallen. Här anges textegenskaper för etiketterna:


FAVORITÅRSTID



Koden till exemplet:

<head>
<style type="text/css">
<!--
#kontaktform fieldset { width: 300px; padding: 20px 0px 20px 20px; }
.input_checkbox { border: 1px solid #99cc00; }
#kontaktform label { font-size: 11px; letter-spacing: 2px; color: #99cc00; }
-->
</style>
</head>

 

 

Lista, dropdownlista

Formulärkontrollen SELECT har begränsade möjligheter när det gäller formatering och du kan aldrig vara säker på att ditt valda format visas korrekt då utseendet varierar i olika webbläsare.

Läs mer på www.456bereastreet.com Öppnas i nytt fönster (Open in new window)  och se hur olika browsers har sina egna tolkningar av hur en kryssruta och radioknapp ska se ut.

 

FAVORITÅRSTID

Koden till exemplet:

<head>
<style type="text/css">
<!--
#kontaktform fieldset { width: 300px; padding: 20px 0px 20px 20px; }
#kontaktform select { background-color: #e2ff8c; font-family: Verdana; font-size: 11px; }
-->
</style>
</head>


<form name="kontaktform" id="kontaktform" method="post" action="">
<fieldset>
<legend>FAVORITÅRSTID</legend>
<label for="favoritarstid"><br />
Välj din favoritårstid här:</label> <br />
<select name="favoritarstid" id="favoritarstid">
<option>Välj årstid här!</option>
<option value="var">Vår</option>
<option value="sommar">Sommar</option>
<option value="host">Höst</option>
<option value="vinter">Vinter</option>
</select>
</fieldset>
</form>

 

 

SUBMIT, knappar - buttons

Knapparna som används i formuläret kan du formatera och även ersätta med en egen knapp i form av en bild. Du kan aldrig vara säker på att ditt valda format visas korrekt då knapparnas utseende varierar i olika webbläsare.

Läs mer på www.456bereastreet.com Öppnas i nytt fönster (Open in new window) och se hur olika browsers har sina egna tolkningar av hur en knapp ska se ut.

Här används en CLASS för att ange formatet. Tillämpa classen till input type="submit" på samma sätt som du gjorde med input type="text" ovan i avsnittet INPUT och TEXTAREA »

Text

<head>
<style type="text/css">
<!--
.skicka_knapp { font-family: Georgia; font-size: 11px; }
-->
</style>
</head>

 

 

Textfärg

<head>
<style type="text/css">
<!--
.skicka_knapp { color: #cc0000; }
-->
</style>
</head>

 

 

Bakgrundsfärg

<head>
<style type="text/css">
<!--
.skicka_knapp { background-color: #cccc66; }
-->
</style>
</head>

 

 

Kantlinje

<head>
<style type="text/css">
<!--
.skicka_knapp { border: 1px dotted #cc0000; }
-->
</style>
</head>

 

 

Bildbakgrund

En bakgrundsbild kan användas till knappar av typen SUBMIT och RESET. Notera att storleken på bakgrundsbilden måste anges och att knappens bakgrund ska vara transparent för att bildbakgrunden ska synas.

<head>
<style type="text/css">
<!--
.skicka_knapp { background-image: url(button.gif); height: 23px; width: 106px;
background-color: transparent; border: none; }
-->
</style>
</head>

Du kan använda en bild (istället för en bakgrundsbild) genom att använda en knapp av typen IMAGE istället för SUBMIT men det fungerar då inte för knapp av typen RESET. Läs mer i guiden Formulär - forms »

 

 

Skuggor med bakgrundsbild

En innerskugga ger dina formulärkntroller mer djup. Exemplen nedan använder en GIF-bild som anges som bakgrundsbild. Läs mer om hur du använder bakgrundsbild som skugga och se fler exempel här »

MEDDELANDE





 

MEDDELANDE