Blogg

Formulär

Om man jobbar med dynamiska hemsidor i serverspråk och vill att besökarna ska kunna skriva t.ex. kommentarer använder man sig utav formulär. Men även om man bara jobbar med statiska sidor i XHTML så kan det komma till användning.

Det finns olika formulär typer man kan använda sig utav när man bygger ett kommentar formulär eller liknande.

För att man ska kunna posta formuläret, måste man ha sina fält inom en <form></form> tagg. Som ser ut såhär:

<form method="post" action="sidan_som_tar_emot_formuläret.asp">

</form>

Method – Visar hur vi vill skicka formuläret. Om du använder method="get" skickas formuläret i en s.k. querystring och visas i adressfältet. Medans method="post" skickas dolt.

Action – Där skriver du i vilken sida man ska skicka formuläret till, för att ta hand om det som skickas via ett formulär behöver du använda dig av ett serverspråk som ASP eller PHP.

Vi fortsätter med fälten som ska vara inom <form></form>.

<input type="text" value="Text" name="text" />

Type – Definerar vilket typ av fält det ska vara.

Value – Används om du vill ha en viss text stående i fältet.

Name – Bestämmer namnet på just det fältet.

<input type="password" value="Lösenord" name="text" />

Password genererar ett fält för lösenord.

<input type="submit" name="submit" value="Skicka" />

Detta blir en knapp som du kan skicka formuläret, som det står skicka på.

Om du vill ha ett fält för längre texter använder du dig av <textarea> såhär:

<textarea rows="5" cols="20" name="textarea">Om du vill ha en text i text-arean</textarea>

Cols – bestämmer den synliga bredden på text-arean.

Rows – bestämmer den synliga höjden av rader på text-arean.

Ett helt formulär

Nu när du vet vad ett formulär består av, ska ni nu få se hur ett enkelt formulär ser ut i sin helhet.

<form method="post" action="skicka.asp">
    <p>Namn:<br />
    <input type="text" name="namn" /></p>

    <p>Hemsida:<br />
    <input type="text" value="http://" name="hemsida" /></p>


    <p>Inlägg:<br />
    <textarea name="inlagg" rows="5" cols="20"></textarea></p>

    <p><input type="submit" name="submit" value="Skicka " /></p>
</form>

Styla ditt formulär med CSS

Ett ostylat formulär kan se olika ut beroende vad man har för operativsystem/tema. Så om du vill att det ska likadant ut hos dom flesta och anpassa den till din design på hemsidan är det bara att använda CSS.

Den standard kod jag använder för formulär ser ut såhär:

input, textarea { 
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
padding: 3px;
color: #000000;
font-size: 14px; 
width: 300px;
background-color: #e4e4e4;
border: 1px solid #3fb2ee;
}

Om man vill ge flera element samma stil, anger man flera selectorer och avkiljer dom med ett , (komma) som vi har gjort i koden. Alla våra <input> och <textarea> taggar får samma stil.

Font-family – Vi ger fälten typsnittet Verdana

Padding – Vi ger 3px luft mellan texten och fältens kant.

Color – Ger texten e svart (#000000) färg.

Font-size – Texten blir 14px

Width – Bredden på fälten blir 300px

Background-color – Fältens bakgrundsfärg blir ljusgrå (#e4e4e4)

Border – Kanten på fälten blir 1px bred och solid, i en blå färg (#3fb2ee)

Exempel

Formulär utan css
Fromulär med css
Koden för skicka_formular.asp

Kategori: XHTML-CSS     2 Kommentarer