Gör snygga formulär

Du har sett det många gånger på Internet – bland annat på SupportData.Nets webbplats. Formulär, där du skall fylla i namn eller något annat, föregås av en text som förklarar vad som skall skrivas i formuläret. Det brukar se ut ungefär så här:

Det här kan göras snyggare – du behöver inte ha den förklarande texten framför formuläret. I stället kan du lägga in den i själva formuläret och göra så att den förklarande texten försvinner när besökaren skall skriva in sin egen text.

Jag tänker visa två metoder för att göra detta. Den första fungerar i både Netscape och Internet Explorer, men det gör inte den andra. Formuläret fungerar dock i alla fall, även i Netscape.

Om du inte vet hur man använder formulär, har du ingen större glädje av det här. Därför kommer jag att visa hur du utnyttjar formulären så att besökarna kan skicka e-post till dig.

Så här ser formulären ut – jag har delat upp de båda fälten på två formulär. De två fälten kan också användas tillsammans i ett enda formulär. Pröva dem.

När du klickar i namnfältet försvinner den text som redan står där. Om du sedan klickar någon annanstans, utan att skriva något i fältet, kommer texten "Skriv ditt namn här" tillbaka. Skriver du in något, kommer din text att stå kvar. Den här metoden fungerar i båda webbläsarna.

Meddelandefältet fungerar olika beroende på om du använder Internet Explorer eller Netscape.

I Internet Explorer försvinner texten "Lämna meddelanden här" när du för muspekaren över fältet. Om du flyttar bort muspekaren igen, utan att skriva något, kommer texten tillbaka.

I Netscape måste du själv markera den ursprungliga texten och ta bort den. Den här skillnaden mellan de stora webbläsarna behöver man egentligen inte bry sig om. När metoden man har använt inte fungerar, visas meddelandefältet som standard i stället.

onFocus, onBlur, onMouseover och onMouseout
Vi åstadkommer det här genom att använda händelsehanterare. I det övre formuläret utnyttjar vi onFocus och onBlur, i det nedre onMouseOver och onMouseOut. Det går naturligtvis bra att göra tvärtom i stället eller bara använda det ena paret i båda fälten.

onFocus
Den här händelsehanteraren används för att tala om vad som skall hända när något får fokus, i det här fallet när muspekaren klickar på något.

onBlur
Den här händelsehanteraren används för att tala om vad som skall hända när något tappar fokus, i det här fallet när muspekaren klickar utanför det som hade fokus.

Alla formulärfält måste läggas in mellan FORM-taggar. Inom dessa kan du sedan definiera olika typer av formulärfält. Vi börjar med grundkoden för att skapa de båda fälten ovan i ett gemensamt formulär:

<FORM>
<INPUT type="text" name="Namn" size="30" value="Skriv ditt namn här">
<TEXTAREA name="Kommentar" rows="2" cols="30" wrap="virtual">Lämna meddelanden här</TEXTAREA>
</FORM>

Det här ger de båda fälten med texterna inskrivna, men ingenting annat. Det finns ingen kod som säger vad som skall göras med fälten.

Raden som börjar <INPUT type="text"...> definierar en enkel textruta med en rad. Den blir 30 tecken lång och innehåller den text som anges i "value". Denna text är rutans "defaultValue", vilket vi snart skall utnyttja. Rutan har ett namn, som vi behöver senare när vi skall göra något vettigt av den.

Nästa rad, som börjar med <TEXTAREA...>, ger ett textfält där du kan ange både hur många rader som skall visas (rows) och vilken teckenbredd (cols) rutan skall ha. Textfältet har dessutom ett namn (name) som vi skall använda senare. Allt du skriver in mellan de båda TEXTAREA-taggarna kommer att visas i rutan och är textfältets "defaultValue".

Nu ändrar vi koden så att funktionen blir som i de båda exemplen ovan:

<FORM>
<INPUT type="text" name="Namn" onFocus="if (this.value==this.defaultValue) this.value='';"
onBlur="if (this.value=='') this.value=this.defaultValue;" size="30" value="Skriv ditt namn här">
<TEXTAREA name="Kommentar" rows="2" cols="30" wrap="virtual"
onMouseover="if (this.value==this.defaultValue) this.value='';"
onMouseout="if (this.value=='') this.value=this.defaultValue;">Lämna meddelanden här </TEXTAREA>
</FORM>

På fyra ställen i koden har jag efter this.value== med rött markerat det som är två enkla citationstecken direkt efter varandra. Här ser det i Netscape 4 (där TT-taggen inte fungerar) ut som dubbla citationstecken. Det är viktigt att du använder rätt sort.

Likhetstecken: Skilj mellan = och ==
I javaskript betyder = inte "lika med" utan "skall ha värdet" – name="Namn" betyder alltså "name skall ha värdet Namn".

"Lika med" anges i stället med dubbelt likhetstecken - this.value==this.defaultValue betyder "this.value är lika med this.defaultValue".

if (this.value==this.defaultValue) this.value='';
När fältet aktiveras (onFocus = när man klickar i det; onMouseOver = när muspekaren förs över fältet) undersöks om fältets innehåll – thisValue – är detsamma som defaultValue. I så fall byts detta mot innehållet mellan de båda enkla citationstecknen, det vill säga mot ingenting – fältet töms.

Om this.Value inte är lika med this.defaultValue när fältet aktiveras, händer däremot ingenting. Det du har skrivit in i fältet får stå kvar.

if (this.value=='') this.value=this.defaultValue;
När fältet upphör att vara aktivt (onBlur = när man klickar utanför fältet; onMouseOut = när muspekaren lämnar fältet) undersöks om fältet är tomt. I så fall läggs defaultValue tillbaka i fältet.

Om thisValue däremot innehåller någonting, händer ingenting. Det du har skrivit in i fältet får stå kvar.

Händelsehanterarna onFocus och onBlur fungerar i både Netscape och Internet Explorer, medan onMouseOver och onMouseOut i det här faller bara fungerar i Internet Explorer.

Men fortfarande händer inget annat med formuläret än att det går att skriva in text i det. Det skall vi ändra på nu, genom att utöka formuläret en del:

<FORM method="post" action="mailto:helledal@algonet.se?subject=Jag lär mig JavaScript" enctype="text/plain">
<INPUT type="text" name="Namn" onFocus="if (this.value==this.defaultValue) this.value='';"
onBlur="if (this.value=='') this.value=this.defaultValue;" size="30" VALUE="Skriv ditt namn här"><BR>
<INPUT type="text" name="Epost" onFocus="if (this.value==this.defaultValue) this.value='';"
onBlur="if (this.value=='') this.value=this.defaultValue;" size="30" value="Skriv din epostadress"><BR>
<TEXTAREA name="Kommentar" rows="2" cols="30" wrap="virtual"
onMouseOver="if (this.value==this.defaultValue) this.value='';"
onMouseOut="if (this.value=='') this.value=this.defaultValue;">Lämna meddelanden här </TEXTAREA><BR>
<INPUT type="submit" value="Skicka!"><INPUT type="reset" value="Radera">
</FORM>

Här blev det mycket på en gång, men det ser värre ut än det är. 

Det första tillägget ligger i den inledande FORM-taggen. Här talar jag om hur formuläret skall användas: Innehållet skall postas till min e-postadress med texten "Jag lär mig JavaScript" i ämnesraden. När du använder koden på din egen hemsida byter du förstås mot din egen e-postadress och anger ditt eget ämne.

Efter <INPUT ...> lade jag till ett <BR> för att få en radbrytning. Jag har gjort likadant med alla textrutorna.

Därefter kommer en ny rad med <INPUT ...>. Den har fått namnet "Epost" och defaultValue är "Skriv din epostadress", men för övrigt är den identisk med den första

Efter TEXTAREA kommer en ny <INPUT ...> där type="submit", det vill säga skicka. Det ger en knapp som skickar formuläret. Texten på knappen anges i "value". 

På samma rad har jag fortsatt med ytterligare en <INPUT ...>, den här gången av typen "reset". Det ger en knapp som tömmer textfälten helt och lägger tillbaka deras defaultValue.

När besökaren på sidan har skrivit in namn och e-postadress, och kanske fyllt på med ett eller annat meddelande, och sedan klickar på knappen "Skicka!", går ett e-brev i väg till den mottagare som finns angiven i action="mailto". På ämnesraden i brevet står det "Jag lär mig JavaScript". Själva innehållet i brevet, när det kommer fram till mig, kan se ut så här:

Namn=Sune
Epost=kung.sune@hovet.mo
Kommentar=Vi leve! Tvåfalt leve vi!

Här kommer alltså namnen på de olika fälten in; vi använde "Namn", "Epost" och "Kommentar".

Och slutligen: Fyll gärna i det här formuläret och skriv en kommentar. Det är roligt att veta att du orkade läsa så här långt!

© SupportData.Net