Formulär i Html

1. Inledning

Ett formulär är en speciell del av ett dokument, som liknar ett vanligt pappersformulär, eller blankett, som man ibland också säger. Ett elektroniskt formulär kan alltså göras likadant, med kryssbara rutor och fält där man kan fylla i text.

De rutor man klickar på i det elektroniska formuläret kallas kontroller (controls). De medger alltså en viss grad av interaktivitet, genom att besökaren kan förändra vissa delar av sidan. Jag tänker här visa hur man åstadkommer detta, genom ett exempel där den vanliga e-postlänken ersätts med ett formulär.

Formulär som kodas enbart med Html aktiverar besökarens e-postprogram då det skickas. Vill man skapa formulär som går att skicka direkt från en webbsida måste man använda särskilda serverscript som aktiverar serverns e-postprogram. Det går jag inte igenom här. Läs då i stället mina sidor om programmering. Gå dit >

2. E-postformulär

För att du skall förstå vad det här handlar om visar jag först ett exempel på ett formulär för e-post. Därefter visar jag koden jag använt och sedan förklarar jag vad den betyder. Jag har inte aktiverat formuläret, dvs inte angett någon e-postadress, så du kommer att få ett felmeddelande om du försöker skicka det.

Och så här ser koden ut:

<FORM method="post" action="mailto:info@j-o-n-a-s-w-e-b.nu/" enctype="text/plain">
Ditt namn: <INPUT type="text" name="Namn:" size="30">
Din e-postadress: <INPUT type="text" name="E-post:" size="30">
<P>Vad tycker du om mina sidor?
<INPUT type="radio" name="val" value="Helbra!">Helbra :-D
<INPUT type="radio" name="val" value="Bra">Bra :-)
<INPUT type="radio" name="val" value="Halvbra">Halvbra :-|
<INPUT type="radio" name="val" value="Kvartsbra">Kvartsbra :-(
<P>Motivera gärna vad du tycker i fältet nedan!
<TEXTAREA name="Motivering:" rows="10" cols="30">
</TEXTAREA>
<INPUT type="submit" value="Skicka!"><INPUT type="reset" value="Radera">
</FORM>

Formuläret börjar med anropet <FORM>. Elementet har sedan några attribut och värden för de funktioner man vill att formuläret skall ha:

method talar om hur formuläret skall skickas. Här är värdet "post" som alltså betyder "som e-post."

action anger adressen till värdet man angett i "method". I det här fallet blir det en e-postadress. Skriv adressen direkt efter kolontecknet så blir det rätt. Inga mellanslag, alltså!

enctype är kanske lite överambitiöst att använda, men om man inte talar om att meddelandet skall vara vanlig text, händer det ibland att texten förvanskas.

Det som skrivs inne i <FORM>-elementet påverkar alltså hela formuläret. Nästa rad börjar med "Ditt namn:" varpå följer ett element, <INPUT>, som säger åt webbläsaren att "Här skall du stoppa in någonting".

Då reserverar webbläsaren en tom rad (tack vare type="text"), 30 tecken lång (tack vare size="30"), på vilken besökaren kan skriva in sitt namn.

När meddelandet sedan skickas till mottagaren, vars e-postadress angetts i <FORM>, kommer denne att kunna se vem som skickat meddelandet. Mottagaren av meddelandet ser texten "Namn:" och avsändarens namn.

Nästa rad i formuläret är identisk med den första, med det undantaget att den är till för att ange besökarens/avsändarens e-postadress. Alla fält måste ha ett namn, d.v.s ett "name"-attribut. Enda undantag är "Reset"-knappen (se nedan vad det är), eftersom det bara kan finnas en sådan.

Nästa rad igen är inledningen på ett kommando för knappar. Hela uttrycket lyder:

Vad tycker du om mina sidor?
<INPUT type="radio" name="val" value="Helbra!">Helbra :-D
<INPUT type="radio" name="val" value="Bra">Bra :-)
<INPUT type="radio" name="val" value="Halvbra">Halvbra :-|
<INPUT type="radio" name="val" value="Kvartsbra">Kvartsbra :-(

Den text som skrivs i formuläret som vanlig text kommer att synas på skärmen när formuläret presenteras i webbläsaren.

Själva knapparna bestäms med <INPUT> igen, samt kommandon för typ (type), namn (name) och värde (value). Type talar om för webbläsaren vilken sorts knappar den skall visa.

Attributet "name" använder man för att förstå vad besökaren klickat på, när meddelandet kommer per post. Det kommer att stå t.ex val=Helbra! och då förstår man att besökaren klickat i den rutan. Värdet i "Value" blir det som syns på skärmen, så att besökaren vet vilken knapp han skall klicka på.

Sedan kommer en ny text: "Motivera gärna vad du tycker i fältet nedan!" och ett nytt element: <TEXTAREA>. Kommandona är:

• name="Motivering:" som talar om för adressaten att det är ett meddelande. Visas t.ex Motivering: följt av avsändarens meddelande.
• rows="10" anger antal rader som besökaren har till sitt förfogande.
• cols="50" anger på motsvarande sätt antalet kolumner.

Attributet maxlength kan du använda om du om du inte vill att ett textfält skall kunna innehålla fler än ett visst antal tecken. Du bestämmer hur många själv. Skrivs:

<INPUT type="text" name="E-post:" size="30" maxlength="30">

"Skicka!"- och "Radera"- knapparna skapas båda knapparna med INPUT-element med dessa värden:

• type="submit" value="Skicka!" anger att klickar man på den här knappen så skall meddelandet skickas till adressen i <FORM>. Och på knappen skall det stå "Skicka".
• type="reset" value="Radera" beordrar webbläsaren att radera alla textutrymmen och knapptryckningar igen. (Radering sker också så fort sidan laddas in på nytt.) Skriver man inget "value" kommer det att stå "Submit" respektive "Reset" på knapparna.

Om det bara finns ett enda textfält räcker det i vissa fall med att besökaren trycker på Enter/Retur-knappen, för att texten skall skickas. Har man fler än ett textfält måste man däremot ha en "Submit"-knapp.

Tips!
Du kan klippa ut hela formuläret ovan och klistra in det på din sida. Ändra värdena så att det står din e-postadress.

Du kan också lägga in formuläret i en tabell för att styra layouten. Du kan t.ex få textfälten att visas med en rak vänsterkant. Det går också att styra formuläret med en stilmall.

3. Några fler attribut

Det finns några fler attribut, som kan vara bra att känna till:

checkbox

Man kan använda värdet "checkbox" i stället för "radio". Det skrivs:

<INPUT type="checkbox" name="val" value="Helbra!">Helbra
<INPUT type="checkbox" name="val" value="Bra">Bra

Och blir:

Skillnaden mellan runda och fyrkantiga knappar är att när man använder de runda kan man bara fylla i ett fält, men när man använder fyrkantiga knappar kan flera fält vara ifyllda samtidigt.

De runda knapparna kallas för "radio buttons" (radioknappar) för att gamla radioapparater funkade så: när man tryckte in en knapp för en ny kanal hoppade den första ut...

readonly

<INPUT type="checkbox" name="exempel" value="exempel" checked readonly>

Hur den stumma knappen kommer att se ut blir olika i olika webbläsare, men jag gissar att den kommer att bli gråfärgad/skuggad. Här är exemplet igen, men klarar din webbläsare av det?

Attributet fungerar även i TEXT-, PASSWORD- och TEXTAREA-elementen.

disabled

Fungerar ungefär som readonly, men gör i stället så att en kontroll inte går att fylla i och inte heller kommer med när formuläret skickas. Visar troligen kontrollen eller fältet som gråfärgat/skuggat. Skrivs:

<INPUT type="checkbox" name="exempel_1" value="exempel_1" disabled>

Klarar din webbläsare att visa detta på rätt sätt? Exempel:

tabindex

<INPUT type="text" name="Text_1" rows="1" cols="15" tabindex="1">

Klarar din webbläsare att visa detta på rätt sätt? Exempel:

accesskey

Detta attribut används för att besökaren skall kunna fylla i formuläret med hjälp av tangentbordskommandon i stället för med musklick. En "accesskey" är ett tecken ur den teckenuppsättning man använder.

Med attributet kan man tilldela en "accesskey" till ett element, d.v.s man kan skapa kortkommandon för olika fält. Ett textfält som fått bokstaven R som accesskey aktiveras när man trycker [Alt] + [R] (Windows) eller [Cmd] + [R] (Mac) på tangentbordet.

Man kan hjälpa besökaren att förstå vilken accesskey ett fält eller en kontroll har, genom att göra nyckelbokstäverna understrukna eller i fetstil. Skrivs då:

<INPUT type="checkbox" name="exempel_1" value="Bra" accesskey="B"></B>ra

Klarar din webbläsare att visa detta på rätt sätt? Exempel:

hidden

Hidden ger ett dolt textfält, som inte syns på skärmen. Det används för att skicka data till servern, t.ex från vilken sida formuläret skickas. Du kan skriva:

<INPUT type="hidden" value="Startsidan" name="Omröstningen">

Denna information kommer alltså att skickas till mottagaren, men den som fyller i uppgifterna ser dem aldrig.

4. BUTTON och några finesser

Det finns förskräckligt många kommandon för formulär, t.ex OPTGROUPOPTGROUP, ISINDEX, LABEL, FIELDSET, LEGEND och BUTTON. Här tänker jag bara säga något om det sistnämnda och hänvisar till Html- och Xhtml-standarderna för den som vill veta mer.

BUTTON används på samma sätt som <INPUT>, men ger lite större variation, genom att knapparna har annat utseende och går att styra bättre.

Knapparnas utseende förändras med attributet "type":

• submit (=default) ger en submit-knapp.
• reset ger en reset-knapp.
• button är en ny funktion och ger en ny sorts knapp som går att använda till mer än att skicka.

Här är exempel på de tre knapparna. Först koden:

<FORM>
<INPUT type="submit" name="exempel_1" value="Skicka"> Submit-knapp i INPUT
<BUTTON type="submit" name="exempel_2" value="Skicka"> Submit-knapp i BUTTON </BUTTON>
<BUTTON type="button" name="exempel_3" value="Skicka igen"> Button-knapp i BUTTON </BUTTON>
<BUTTON type="reset" name="exempel_4" value="Ångra"> Reset-knapp i BUTTON </BUTTON>

</FORM>

Så här blir det då i din webbläsare:

Knapparnas utseende kan förändras genom att man lägger in bilder inne i knapparna (snarare än att man byter ut knapparna med bilder). Man fyller så här:

<BUTTON type="submit" name="submit"><IMG src="Skicka.gif" alt="Skicka!"></BUTTON>

Man lägger alltså en bild inne i knappen, eller kanske rättare sagt, bilden förvandlas till en knapp. Jag använde i exemplet <IMG> men egentligen skall man använda <OBJECT> i stället. Då kan man också lägga in ett ljud, så att det låter när man trycker på knappen!

Vill man inte använda BUTTON kan man alltså byta ut skicka-knappen mot en bild. Det fungerar inte alltid och det går inte att skapa någon Reset-knapp på det här sättet. Skrivs så här:

<INPUT type="image" src="Bild.gif" border=0>

Man kan också göra "Submit"- och "Reset"-knapparna till klickbara länkar genom kommandot:

<FORM method="link" action="http://www.jonasweb.nu/" target="_blank">
<INPUT type="submit" value="Jonas Webresurs ">
</FORM>

Som blir:

Det händer ibland att webbläsare lägger till ett frågetecken efter URL:en, med följd att länken inte fungerar. Detta kan eventuellt avhjälpas genom att man lägger till en slash "/" efter adressen.

Med target="_blank" öppnas länken i ett nytt fönster.

5. Rullgardinsmenyer

Ett formulär som är en rullgardin eller "pop-up box" fungerar som de två andra formulären, men skapas med hjälp av elementen SELECT och OPTION, som skrivs innanför FORM-elementen:

Vilket språk vill du ha information på?
<SELECT name="information">
<OPTION>Svenska
<OPTION>Engelska
<OPTION>Tyska
<OPTION>Franska
<OPTION>Sanskrit
<OPTION>Klingon
</SELECT>

Vilket skapar följande rullgardinsmeny:

Vilket språk vill du ha information på?

Man kan inte lägga in länkar i stället för text. För att skapa en rullgardin med länkar, en .sk "jumpmeny", måste man använda sig av scripts, som jag visar på en sida i sektionen med JavaScript. Läs mer >

selected används om något värde skall vara förvalt i rullgardinen och skrivs i OPTION. (checked är en motsvarande funktion för radio- och checkboxkontrollerna.)

size anger hur många alternativ som skall visas på skärmen (de övriga måste bläddras fram med en rullningslist, som dyker upp automatiskt).

<SELECT name="information" size="4">

ger:

multiple innebär att besökaren kan välja fler än ett alternativ, genom att hålla nere ctrl-tangenten och klicka på fler alternativ.

<SELECT name="information" multiple>

blir:

Jag har här angett size="3" för det vänstra formuläret och size="1" för det högra. Sätter du size="1" kan det kanske vara svårt att förstå hur man väljer. Pröva dig fram!