Formulär

Allt som du hittills har gjort på hemsidan, med undantag för gästboken och länken till din e-postadress, har handlat om att lämna ut information till andra. Nu skall vi vända på det. 

Dina besökare skall få möjligheten att tala om för dig direkt - utan att gå via gästboken - vad de tycker om din hemsida, och kanske beställa sådant som du vill sälja eller på något annat sätt dela med dig av.

Det här gör du med formulär - vilket låter tråkigt men i själva verket är både lätt och roligt. Vi börjar direkt med ett formulär:

Ditt namn:

Din e-postadress:

Vad tycker du om HTML-skolan?
Bästa på svenska!
Bra, men Nisses är bättre.
Tja, jag fattar ju noll, så den är väl inte så väldigt bra.
Urusel, det är bara envisheten som gör att jag har hängt med så här långt.

Nedan får du gärna motivera ditt tyckande närmare och kanske föreslå förbättringar.

Om du fyller i det här formuläret och klickar på Skicka, kommer formuläret att skickas med e-post till mig. E-brevet som jag får kan se ut så här (beroende på vad du har prickat i och skrivit):

Om HTML-skolan

Namn=Nisses kompis
E-postadress=nisses.kompis@algonet.se
tyckande=Bra
Motivering=Jag ville ju framför allt lära mig hur man får hästar att hoppa tvärs över webbläsarfönstret!

Allt som händer i det här formuläret - utom det besökaren fyller i - styrs av HTML-koden.Därför skall vi titta på den nu, komplett med tabell och allt - förklaringarna kommer efteråt.

<TABLE BORDER="0" WIDTH="610" CELLSPACING="0" CELLPADDING="3">
<FORM METHOD="post" ACTION="mailto:helledal@algonet.se?subject=Om HTML-skolan" ENCTYPE="text/plain">
<TR>
<TD WIDTH="303">
<P>Ditt namn: <INPUT TYPE="text" NAME="Namn" SIZE="30"></TD>
<TD WIDTH="302">
<P>Din e-postadress: <INPUT TYPE="text" NAME="E-postadress" SIZE="30"></TD>
</TR>
<TR>
<TD COLSPAN="2" WIDTH="605">
<P>Vad tycker du om HTML-skolan?<BR>
<INPUT TYPE="radio" NAME="tyckande" VALUE="Bäst!">Bästa på svenska!<BR> 
<INPUT TYPE="radio" NAME="tyckande" VALUE="Bra">Bra, men Nisses är bättre.<BR>
<INPUT TYPE="radio" NAME="tyckande" VALUE="Sämre">Tja, jag fattar ju noll, så den är väl inte så väldigt bra.<BR>
<INPUT TYPE="radio" NAME="tyckande" VALUE="Sämst">Urusel, det är bara envisheten som gör att jag har hängt med så här långt.</P> 
</TD>
</TR>
<TR>
<TD COLSPAN="2" WIDTH="605">
<P>Nedan får du gärna motivera ditt tyckande närmare och kanske föreslå förbättringar.<BR>
<TEXTAREA NAME="Motivering" ROWS="10" COLS="69"> 
</TEXTAREA><BR> 
<INPUT TYPE="submit" VALUE="Skicka!"><INPUT TYPE="reset" VALUE="Radera"> 
</TD>
</TR>
</FORM>
</TABLE> 

Här har du nu flera nya HTML-taggar. Jag börjar med att förklara dem, uppifrån och ned.

• <FORM> ... </FORM>
  De här taggarna anger att det som ligger mellan dem är ett formulär. I den inledande FORM-taggen finns flera attribut.
  
  De attribut som inte finns med i koden ovan förklaras i stället i Slå upp: HTML.
• METHOD="..."
  Anger vad som skall hända med innehållet i formuläret. Här är det post, det vill säga skicka till adressen som anges i ...
• ACTION="..."
  ... där jag har angett min e-postadress föregången av "mailto:"
• ENCTYPE="..:"
  Gör att meddelandet skickas som vanlig text - det här attributet kan man ofta utesluta men det skadar inte att ha med det.
• <INPUT>
  INPUT-taggen har ingen sluttagg. Den definierar vilka kontroller som skall användas i formuläret. Även INPUT-taggen innehåller flera attribut. Se även Slå upp: HTML.
• TYPE="..."
  Anger vilken typ av inmatningskontroll som skall användas. Värdet här kan vara radio, button, text, password, checkbox, submit, reset, file, hidden eller image. Längre ned förklarar jag de typer som används i det här avsnittet - läs vidare i Slå upp: HTML.
• NAME="..."
  Ger kontrollen ett namn. Det här värdet måste finnas med utom i TYPE="reset" och TYPE="submit".
• VALUE="..."
  Anger startvärdet på kontrollen. Om TYPE="radio" eller TYPE="checkbox", måste VALUE ha ett värde.
• <TEXTAREA> ... </TEXTAREA>
  Skapar ett område med flera rader där man kan skriva in text i formuläret. Även TEXTAREA har här en rad attribut. Det finns många fler attribut till TEXTAREA, de förklaras i Slå upp: HTML.
• NAME="..."
  Ger området ett namn
• ROWS="..:"
  Talar om hur många rader området skall bestå av
• COLS="..."
  Talar om hur många kolumner området skall bestå av

Jo, genom att du sätter in ?subject=Om HTML-skolan direkt efter e-postadressen, anges ett ämne på ämnesraden. Om du får mycket e-post blir det på så sätt mycket lättare att sortera posten.

Den första inmatningskontrollen i formuläret ovan var INPUT TYPE="text", som ger en enkel rad där besökaren kan fylla i något. Här behöver du inte ange något VALUE. Du sätter i stället NAME till det värde du vill skall visas i e-brevet. Exempel: NAME="E-post", NAME="Min älsklingsbok" eller NAME="Favoritglass".

I formuläret ovan använde vi oss av INPUT TYPE="radio". Det ger en rund knapp som egentligen heter alternativknapp men oftast kallas radioknapp. Det namnet har den fått från de gamla radioapparaterna, som fungerade så att man bara kunde ha en knapp i taget intryckt. Det är samma sak med alternativknappar - man kan bara markera en av dem.

Alternativknappar läggs oftast i grupper och alla knapparna i gruppen skall ha samma värde på NAME="...". Ovan är värdet NAME="tyckande".

Vi gör nu ytterligare ett formulär, men med möjligheten att markera flera alternativ. Då skall vi i stället sätta INPUT TYPE="checkbox", som ger en fyrkantig kryssruta. För att du i e-brevet som skickas med formuläret skall kunna se vilka rutor som besökaren prickade i, ger du varje INPUT TYPE="checkbox" ett eget värde i NAME=...".

Är du en överlevare?

Om jag blev strandsatt på en öde ö skulle jag vilja ha med mig följande:

Liam Neeson
Yul Brynner
Julia Caesar
Bärbar dator med solcell och internetkoppling via satellit
Mamma
En osänkbar båt

I vilket hav eller vilken sjö vill du ha din öde ö?

Ditt namn:

Din e-postadress:

Om du fyller i och skickar det här formuläret, kommer det att gå med e-post till mig. På ämnesraden kommer det att stå

På en öde ö

Beroende på vad du prickar i och skriver in kan innehållet se ut så här:

Yul=Ja
Dator=Ja
Fartyg=Ja
Vatten=Ulvsundasjön
Namn=Denita
E-postadress=ville.valle@viktor.se

Koden till det här formuläret är denna, med tabell och allt. Tabellen gör att formuläret visas snyggare, men du kan förstås ändra den som du vill:

<TABLE CELLSPACING="0" CELLPADDING="3" WIDTH="610">
<FORM METHOD="post" ACTION="mailto:helledal@algonet.se?subject="På en öde ö" ENCTYPE="text/plain">
<TD COLSPAN="2"><H2>Är du en överlevare?</H2>
<B>Om jag blev strandsatt på en öde ö skulle jag vilja ha med mig följande:</B></P>
<TR>
<TD COLSPAN="2" WIDTH="605">
<P><INPUT TYPE="checkbox" NAME="Liam" VALUE="Ja">Liam Neeson<BR>
<INPUT TYPE="checkbox" NAME="Yul" VALUE="Ja">Yul Brynner<BR>
<INPUT TYPE="checkbox" NAME="Julia" VALUE="Ja">Julia Caesar<BR>
<INPUT TYPE="checkbox" NAME="Dator" VALUE="Ja">Bärbar dator med solcell och internetkoppling via satellit<BR>
<INPUT TYPE="checkbox" NAME="Mamma" VALUE="Ja">Mamma<BR>
<INPUT TYPE="checkbox" NAME="Fartyg" VALUE="Ja">En osänkbar båt</P>
<P>I vilket hav eller vilken sjö vill du ha din öde ö?<BR>
<INPUT TYPE="text" NAME="Vatten" SIZE="40"></P></TD>
</TR>
<TR>
<TD WIDTH="303"><P>Ditt namn: <INPUT TYPE="text" NAME="Namn" SIZE="30"></P></TD>
<TD WIDTH="302"><P>Din e-postadress: <INPUT TYPE="text" NAME="E-postadress" SIZE="30"></P></TD>
</TR>
<TR> 
<TD COLSPAN="2"><P><INPUT TYPE="submit" VALUE="Skicka!"><INPUT TYPE="reset" VALUE="Radera"></P></TD>
</TR>
</FORM>
</TABLE>

Som du ser satte jag VALUE="Ja" på samtliga TYPE="checkbox". Det gör att inmatningen i e-posten visas som till exempel Yul=Ja. 

Allt annat i koden förklaras ovan under En rad nya HTML-taggar.

Vi skall ta ytterligare ett exempel på ett formulär. När besökaren klickar på knappen nedan öppnas hans eller hennes e-postprogram, med avsändar- och mottagarraderna ifyllda. På ämnesraden står det "Meddela mig när SupportData.Net uppdateras".

Besökaren behöver inte fylla i något alls, bara klicka på Skicka och skicka iväg e-brevet. Men eftersom e-postprogrammet öppnas får han eller hon litet inspiration till att skicka med några rader, och det är ju trevligt!

Som mottagare ser jag genast vad e-brevet handlar om, och kan sortera in avsändarens e-postadress i sändlistan för uppdateringar.

Koden till detta är kort och gott:

<FORM>
<INPUT TYPE="button" VALUE="Meddela mig när SupportData.Net uppdateras!" ONCLICK="parent.location='mailto:helledal@algonet.se?subject=Meddela mig när SupportData.Net uppdateras'">
</FORM>

Den här lilla kodsnutten kan du lätt anpassa efter dina egna behov! Det du skall ändra är markerat med rött.

Avsnittet "parent.location inleds med ett dubbelt citationstecken. Framför 'mailto: följer ett enkelt citationstecken. Efter uppdateras'" avslutas med båda dessa tecken i omvänd ordning, alltså först ' och sedan ".

Det spelar ingen roll om du börjar med ' eller ", men se till att enkla och dubbla citationstecken hamnar i par runt rätt avsnitt.

Innan vi överger Haj i Hjälmaren och Närkes Expressblad, kan du ta en titt på insändarsidan, där insändare skickas via formulär.

Innan du går till övningsuppgifterna bör du läsa i Slå upp: HTML om taggarna FORM, INPUT och TEXTAREA.

Gör först övningsuppgifterna och kunskapstestet. Sedan skall du skicka dina nya filer till servern.

© SupportData.Net