Formulär I

1. Inledning

I detta avsnitt skall vi lära oss mer om formulär och vi kommer att skapa några sådana. Först kommer vi att tala om email-baserade formulär och i avsnitt 6 kommer vi att börja nosa på mer CGI-baserade. Dock kommer jag inte att gå in på programmering i ex. Perl, utan det kan bli dina egna självstudier efter denna kurs.

Genom att använda sig av formulär på våra sidor kan vi tillföra interaktivitet och kommunikation mellan oss webbsideinnehavare och våra läsare. Detta är många gånger något som eftersträvas. Det kan handla om feedback, om bokning av resor, hotellrum m.m. eller online-köp av någon produkt. Har du någon gång ansökt om att få en URL hos ex. passagen eller registrerat någon sida hos Altavista, har du redan kommit i kontakt med detta ämne.

Fördelen med att använda formulär är att vi på ett lättare sätt kan samla in den information som vi vill ha och det blir lättare för kunden att veta vilka uppgifter som behövs. Om vi bara använder oss av mail-funktionen, kan svaren bli lite "osorterade" och kan innehålla "lite vad som helst". Men med formulär kan vi styra informationsflödet på ett helt annat sätt. Vi skapar olika fält som kunden får fylla i och vi får den information vi behöver. Till skillnad från e-mail kan svaren bli korta och koncisa.

För att få ett formulär att se bra ut, lägger vi det inom en eller flera tabeller. Men för att få det se snyggt ut, använder vi css. Se mer i avsnittet Formulär II med CSS.

2. Begränsningar!

Problemet med E-mail baserade formulär är att de fungerar dåligt i Internet Explorer, men bättre i Netscape. Vill du att formulären skall fungera i båda webbläsarna, måste du skriva cgi-baserade.

3. Formulär 1

Vi använder oss först och främst av koden <form> </form>. Denna innebär att vi skapar ett formulär och koden placeras inom body sektionen.

Vi skall nu skapa ett formulär, där vi undersöker vad läsarna tycker om våra sidor. Syftet är att göra våra sidor ännu bättre eller att anpassa dem till läsarnas intressen. Vi skapar textfält för namn, adress och e-postadress. Vi infogar en kryssruta, där de kan ange om de vill ha information när sidan uppdateras. Vi skapar också ett större fält där de kan skriva in kommentarer eller hälsningar. Till sist skapar vi små knappar för att besökarna skall kunna sända iväg uppgifterna.

Så här kan vårt första formulär se ut:

Och så här ser koden ut för detta formulär:

<html> <head> <title>Formulär 1</title> </head> <body bgcolor="#99ccff" text="#000000"> <form action="mailto:din@email.se" method="post" enctype="text/plain"> <table border="0"> <tr> <td>Namn:</td> <td><input type="text" name="namn" maxlength="30" size="23"></td> </tr> <tr> <td>Gatuadress</td> <td><input type="text" name="gatuadress" maxlength="30" size="23"></td> </tr> <tr> <td>Postnummer:</td> <td><input type="text" name="postnummer" maxlength="6" size="23"></td> </tr> <tr> <td>Postort:</td> <td><input type="text" name="postort" maxlength="30" size="23"></td> </tr> <tr> <td>E-postadress:</td> <td><input type="text" name="e-postadress" maxlength="30" size="23"></td> </tr> </table> <table border="1"> <tr> <td><br><input type="checkbox" name="namn" checked>Ja, Tack. Informera mig om dina uppdateringar av denna sida!</td> </tr> <tr> <td><br>Kommentar om innehållet på sidorna. Hur kan de bli bättre:</td> </tr> <tr> <td><textarea name="Respons" maxlenght="5000" cols=46 rows=5 wrap="soft"> </textarea></td> </tr> <tr> <td><p align="center"><input type="submit" value="Skicka"><input type="reset" value="Radera"></p></td> </tr> </table> </form> </body> </html>

4. Förklaring till ovanstående kod

Vi började med att ange <form action="mailto:din@email.se" method="post" enctype="text/plain">. form är koden för formulär och action med adressen visar vart informationen skall sändas. Här skriver du senare in din egen E-mailadress. method="post" anger jag att webbsidan är aktiv och skickar informationen. Jag kan ange method="get" också och då menar jag istället att CGI programmet sjävt hämtar informationen på webbsidan. Men använd helst "post".

Senare skrev vi Namn: <input type="text" name="namn" maxlength="30" size="23">. Här skapade vi det första textfätet, som våra besökare kan fylla i. Detta gjordes med input type="text". Med name="namn" ger vi en identitet åt det som besökarna skriver i textfältet. Då kommer uppgifterna som presenteras för oss inom detta fält, att bära detta ID. Så vi kan urskilja informationen mellan de olika fälten.

maxlenght bestämmer hur många tecken som är möjligt att skriva i rutan, så att vi inte får långa uppsatser. Vi inför alltså en liten begränsning. Med size talar vi om hur lång textrutan skall vara och om vi inte anger storlek, förutbestäms denna till en storlek av 20 tecken. Det är inte alltid lyckat med för små textrutor, utan de bör ha tillräcklig längd. Textrutor är alltid på en rad och lämpar sig därför till ex. personuppgifter.

<input type="checkbox" name="namn" checked>Ja, Tack. Informera mig om dina uppdateringar av denna sida!, skrev vi också. Här gjorde vi en kryssruta, som dessutom var förvald. Detta med attributet checked. Utlämnas detta, blir rutan inte förvald.

Med hjälp av <textarea name="Respons" maxlenght="5000" cols=46 rows=5> </textarea> kunde vi infoga en stor textruta, där våra läsare kan ge en egen skriflig respons. Jag valde att det som mest kan skrivas 5000 tecken i rutan och bestämde dess längd till cols=46 och höjden till rows=5.

wrap="soft" i koden för den stora textrutan. Med detta menar jag att den text besökarna skriver in, automatiskt skall börja på ny rad när utrymmet är slut. När jag som mottagare får meddelandet, syns all text som en rad. Det finns två alternativ till. Det andra alternativet är att ange wrap="hard". Fungerar som det första alternativet, men texten kommer också i detta utseende till mig. Det tredje alternativet är att ange wrap="off" och då löper texten på, utan att byta rad förrän besökaren trycker på enter. Detta är den förvalda inställningen, när jag inte anger någon sådan kod.

Om jag ville att det redan skulle stå en text i rutan när besökaren kom till formuläret, kan jag skriva: <textarea name="Respons" maxlenght="5000" cols=46 rows=5 wrap="soft"> Detta är en förvald text. Tag bort denna och skriv dina egna kommentarer.Med Vänlig Hälsning!</textarea>

Slutligen skapade vi knappar för att skicka iväg respektive radera ut formuläret. <input type="submit" value="SKICKA"><input type="reset" value="RADERA">. input type="submit" och "reset" går inte att ändra på, men däremot det som står vid value. Här har jag skrivit skicka och radera. De orden jag väljer, blir de som senare kommer att stå på knapparna. Jag kan välja andra ord också, men i detta fallet blev knapparna lika långa.

5. Ytterligare finesser med Formulär 2

Vi skapar ännu ett formulär, fast med lite andra egenskaper. Detta kan gått och väl ses som en fortsättning på ovanstående formulär.

Ovan skapade vi små textrutor. Vi kan förse dem med "droplister" och kalla dem för listrutor istället. Detta genom <select name="ämne"> med <option>Välj Operativsystemet osv. som alternativ. Vi avslutar med </select>. Här får besökaren väja vilket alternativ som passar bäst.

Istället för listrutor med dropplister kan vi göra listrutor, där alla alternativ visas eller bara ett antal av dem, så kallade multipel. Det senare alternativet är försett med en rullningslist. Detta sker genom koden <select name="ämne" multiple> <option>Välj Operativsystemet osv. </select>. Dropplisten kommer att vara synlig hela tiden.

Med: <select name="ämne" size=4><option>Välj Operativsystemet </select> blir det en listruta där endast 4 alternativ visades och vi får använda oss av rullningslisten, för att se alla alternativ. size styr inte längre listrutans storlek, utan hur många alternativ som skall vara synliga. Storleken anpassas istället till det största ordet.

Istället för kryssrutor skapa alternativknappar. Skillnaden är att de senare är runda, de står i en grupp och någon är alltid förkryssad. De används vid redovisning av olika alternativ som kunden skall ta ställning till. Ex. beställning med hel- eller halvpension, med eller utan frukost. Kryssrutorna behöver inte vara förkryssade alls. Alternativknapparna skapas med koden <input type="radio" name="namn" value="värde">. Kunden kan aldrig kryssa för 2 stycken, utan måste välja ett alternativ!

Så här kan vi välja att vårt andra formulär skall se ut:

Och så här ser koden ut:

<html> <head> <title>Formulär 2</title> </head> <body bgcolor="#99ccff" text="#000000"> <form action="mailto:din@email.se" method="post" enctype="text/plain"> <table border="0"> <tr> <td>Namn:</td> <td><input type="text" name="namn" maxlength="30" size="23"></td> </tr> <tr> <td>E-postadress:</td> <td><input type="text" name="e-postadress" maxlength="30" size="23"></td> </tr> <tr> <td>Browser:</td><br> <td><select name="Browser"><br> <option>Välj Browser <option>Netscape 4.x <option>Internet Explorer 4.x <option>Internet Explorer 5.x <option>Internet Explorer 6.x <option>Annat <option>Vet ej </select></td> </tr> <tr> <td valign="top">Operativsystem:</td> <td> <select name="Välj Operativsystemet" multiple size ="4"> <option>Välj Operativsystemet <option>Windows 98 <option>Windows 2000 <option>Windows XP <option>Unix <option>Linux <option>MacOs <option>Annat <option>Vet ej </select</td> </tr> </table> <table border="0"> <tr> <td><br>Vill du få mina elektroniska nyhetsbrev?<br> <input type="radio" name="namn" value="Ja" checked>Ja<BR> <input type="radio" name="namn" value="Nej">Nej <BR> <input type="radio" name="namn" value="Vill prova 1 månad">Vill prova 1 månad<BR></td> </tr> <tr> <td><br><p align="center"><input type="submit" value="Skicka"><input type="reset" value="Radera"></p></td> </tr> </table> </form> </body> </html>

6. Cgi-baserat formulär och "Tack-sida"

Hur skapar jag ett formulär som också fungerar i Internet Explorer och hur gör jag för att besökarna skall komma till en tacksida när de sänt iväg formuläret?

Nu börjar vi nosa på något som kallas CGI-programmering och alla Internetoperatörer stöder inte att vi kör script på deras servrar. I dagsläget vet jag inte vilka operatörer som tillåter vad, men en absolut förutsättning är att du har tillgång till en mapp på servern som heter "cgi-bin". Har du ingen sådan hjälper det inte att skapa en...Ligger dina hemsidor på ett webbhotell, kan du med största sannolikhet använda CGI fullt ut.

Först gör vi "tack-sidan" genom vanlig HTML. Inget krångligt, här skall inga koder för formulär vara! Här står det t. ex. "tack för din förfrågan" eller "skall svara så snabbt som möjligt!". Denna sida döper vi till ex. tack.html och placeras i cgi-bin mappen. Själva formuläret nedan placeras dock inte i den mappen.

En kod för ett cgi-baserat formulär kan se ut så här:

<html> <head> <title>cgi-formulär</title> </head> <body bgcolor="#99ccff" text="#000000"> <form method=post action="/cgi-bin/formmail.pl"> <input type="hidden" name="redirect" value="tack.html"> <input type="hidden" name="recipient" value="din@email.se"> Namn: <input type="text" name="namn" maxlength="30" size="23"> osv...

Sedan skapar vi textrutor och annat precis som tidigare i avsnittet.

formmail.pl är ett perl-program som tar emot informationen från ditt formulär. Vad detta program heter, kan variera från server till server. Du måste själv ta reda på detta från dem du har dina sidor hos.

Med type="hidden" anger vi att informationen innanför taggarna inte skall vara synlig för besökarna. Själva tacksidan som skall komma fram, när besökarna sänt iväg formuläret. Nu har vi döpt denna till tack.html. Vi anger också till vilken adress uppgifterna skall sändas till (din@email.se).

Med redirect anger jag vart besökaren skall sändas efter att ha sänt iväg uppgifterna. Med recipient anger vi vem som är mottagaren av informationen.

Vilka möjligheter du har att använda denna typ av formulär m.m., är sådant du måste fråga din Internet-operatör.





kontakt	© Stefan Dahl�n	Tisdag 7:e oktober 2008