|
HTML-SKOLAN:
Formulär
Interaktivitet inbyggd i koden. Med ett
formulär på din hemsida kan besökare kommunicera med dig.
Text: Annica Tiger
Dessa förkunskaper behövs:
Grundläggande kunskaper i att använda markeringsspråker
HTML
Har du inte det?
En bra bok för en nybörjare är
"Lättpocket om att göra en egen hemsida" av Jesper Ek, Paginas förlag. Du
kan även besöka Annica Tigers HTML nybörjarguide på:
http://www.atiger.pp.se/
De flesta vill erbjuda sina besökare att via ett formulär kunna skicka
kommentarer eller att kunna beställa något från hemsidan. En gästbok är
faktiskt ett sådant exempel. Det vanligaste är att använda ett
mailto-formulär, dock med begränsningen med det är att det inte fungerar i
alla webläsare såsom Internet Explorer 3.0. Då finns som alternativ att
via andras servrar, (gratis tjänster) se relaterade länkar, kunna göra ett
formulär som baseras på ett cgi-script.
En del Internetleverantörer
tillhandahåller färdiga script som är lätta att anpassa efter egna behov.
Om du kan köra cgi-script på den server där du har din hemsida
(kontrollera med din Internetleverantör), är det givetvis bäst att använda
ett eget script, se relaterade länkar. I nästa version av
markeringspråket, enligt rekomendationen html 4.0, finns många utökningar
när det gäller formulär, se relaterade länkar nedan.
FORM
Ett formulär börjar alltid med taggen <FORM>
samt avslutas med den obligatoriska sluttaggen
</FORM>.
Attributet ACTION anger hur formuläret ska hanteras. METHOD anger hur
formuläret ska "skickas", vilket protokoll som ska användas, GET eller
POST.
MAILTO-formulär
I ett "mailto-formulär" kan en
besökare på din hemsida göra beställningar eller lämna kommentarer som
sedan skickas till dig med vanlig e-post. För att göra ett sådant skriver
du
<FORM ACTION="mailto: din@email.se" METHOD="post" ENCTYPE=
"text/plain">
Informationen i det postade formulär skickas sedan
till den i ACTION angivna e-mail adressen. ENCTYPE användes i
mailto-formulär för att formuläret ska bli läsbart med tanke på å, ä och ö
och radbrytningar.
SCRIPT
Ett formmail-formulär pekar mot scriptet
som hanterar informationen som skickas in till servern.
<FORM
ACTION=" http://www. url.se/cgibin/script.pl" METHOD="post"> Hur
formuläret ska behandlas, vart det ska skickas och så vidare, anges med
TYPE="hidden". Denna information är dock ej synlig i själva formuläret,
endast i källkoden.
<INPUT TYPE="hidden"
NAME="recipient"VALUE="din@email.se">
Är du osäker på sökvägen på
just din server kontakta din Internetleverantör eller nätverksansvarig. Du
kan ge formuläret ett förbestämt subject, vilket innebär att ärenderaden
fylls i automatiskt.
<INPUT TYPE="hidden" NAME="subjekt" VALUE="
FEEDBACK">
eller skicka besökarna till en tack sida efter ifyllandet
av formuläret.
<INPUT TYPE="hidden" NAME="redirect" VALUE="
http://url.se/tack.html">
Läs noga scriptets medföljande
instruktionsfil (Readme. txt) och anvisningar.
TEXT
<INPUT TYPE=TEXT
NAME="namn">
Detta ger ett textfält på en rad, vars namn är bestäms
av attributet NAME. Du kan till exempel styra fältets utseende med olika
attribut. Storleken, bredd i antal tecken, anges med SIZE. Normalt ryms
det omkring 250 tecken, men detta kan begränsas via MAXLENGTH, där antal
tillåtna tecken anges. Förtryckt text inne i fältet skapas med
VALUE.
<INPUT TYPE=TEXT NAME= "text" size=10 MAXLENGTH= 50
VALUE="Fyll i här!">
PASSWORD
Är en variant av TEXT, men inskrivna
tecken visas som * i fältet.
<INPUT TYPE=PASSWORDNAME="password">
SELECT
Används för att skapa listor och menyer
så att besökaren kan välja ett eller flera alternativ. Du namnger
elementet med NAME. En rullgardinsmeny skapas genom att man utesluter
värdet SIZE eller anger det till 1.
I exemplet nedan har SIZE angivits
till 3, då visas en lista. Varje möjligt val definieras med OPTION. Vill
du ha något/några val bestämda i förhand anges detta med SELECTED. Genom
att i en lista ange attributet MULTIPLE kan besökaren göra flera val genom
att samtidigt hålla ner ctrl-tangenten.
<SELECT NAME="info" size=3
MULTIPLE>
<OPTION
SELECTED>Köpa
<OPTION>Byta
<OPTION>Sälja
</SELECT>
CHECKBOX
En liten ruta som besökaren kan
"bocka" i, kan förekomma ensam men placeras ofta i en grupp av alternativ.
Flera alternativ kan väljas samtidigt till skillnad mot RADIO-knappar.
Attributet NAME används för att gruppera dem, du ger hela gruppen samma
namn. VALUE är valets värde som kommer att sändas iväg. Ska en eller flera
CHECKBOX vara förvalda används attributet CHECKED.
<INPUT
TYPE=CHECKBOX NAME="har" VALUE="bil" CHECKED> Bil
<INPUT
TYPE=CHECKBOX NAME="har" VALUE="cykel">Cykel
<INPUT TYPE=CHECKBOX
NAME="har" VALUE="mc"> MC
RADIO
Radioknappar anger flera valmöjligheter i
form av runda "knappar". Endast en kan förbli "intryckt" åt gången till
skillnad mot CHECKBOX. Du grupperar även dem med attributet NAME, dvs du
ger dem samma namn. Det val som kommer att visas är det som angivits i
VALUE. Vill du att en ska vara vald i förhand anges detta med
CHECKED.
<INPUT TYPE=RADIO NAME="val" VALUE="Bil" CHECKED>
Bil
<INPUT TYPE=RADIO NAME="val" VALUE="Traktor">
Cykel
<INPUT TYPE=RADIO NAME="val" VALUE="Lastbil"> MC
TEXTAREA
Skapar ett flera rader långt textfält
där besökaren kan skriva in en längre text. NAME anger textfältets namn.
Storleken på textfältet anges med hjälp av COLS (bredd antal tecken) samt
ROWS (antal rader). Om du vill att det ska stå något skrivet på förhand i
textfältet, anges detta som i exemplet nedan, med TEXTAREA start- och
sluttagg.
<TEXTAREA NAME="kommentar" COLS=20 ROWS= 5>
Förinskriven text:</TEXTAREA>
SUBMIT
För att besökaren ska kunna skicka iväg
sitt ifyllda formulär krävs en SUBMIT-knapp. Om du inte anger något annat
kommer det att stå "SUBMIT" på knappen, men med VALUE kan du skriva in en
egen text på knappen.
<INPUT TYPE=SUBMIT
VALUE="Skicka!">
Genom att ersätta SUBMIT med IMAGE kan den grå
knappen bytas ut mot valfri bild angiven i SRC. BORDER=0 tar bort bildens
"länkram" men är dock ej ett korrekt attribut att använda i elementet
INPUT. Men det blir snyggare utan denna "länkram" runt
bilden.
<INPUT TYPE=IMAGE SRC= "search.gif" BORDER=0>
RESET
Det är vanligt att ha en RESET-knapp
(eller ångra-knapp) bredvid SUBMIT-knappen. Med denna knapp kan besökaren
radera innehållet i formuläret och börja om från början om något blivit
fel. Även här kan knapptexten ändras från default Reset via VALUE till
önskad text. Tyvärr i html 3.2 så kan ej RESET ersättas med en
bild.
<INPUT TYPE=RESET VALUE="Radera!">
SNYGGA FORMULÄR
Det finns några knep för att få
till ditt formulär snyggt. Lägg formuläret i en tabell men tänk på att
lägg TABLE efter FORM, det innebär att du kan ha en tabell i ett
FORM-element men ej tvärtom. Att använda förformaterad text, PRE går
alldeles utmärkt för att skapa sina formulär.
Relaterade länkar
HTML 4.0 svensk
översättning
http://hem1.passagen.se/spring/
Gratis
formmail:
http://coder.com/code/
http://icg.resnet.upenn.edu/mailto.html
Gratis
formmail script:
http://worldwidemart.com/scripts/
Om
formulär samt CGI:
http://www.skolverket.se/skolnet/htmlkurs/part6.html
Koden till formulär-exemplet: <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE> Ett formulär-exempel</TITLE>
</HEAD>
<BODY BGcolor="#FFFFFF">
<FORM ACTION="mailto:atiger@swipnet.se" METHOD="post" ENCTYPE="text/plain">
<PRE>
Namn: <INPUT TYPE=TEXT NAME="namn">
E-mail:<INPUT TYPE=TEXT NAME="e-mail">
Mer information önskas om:
<SELECT NAME="info">
<OPTION>Köpa
<OPTION>Byta
<OPTION>Sälja
</SELECT>
Vad för fordon gäller det?:
<INPUT TYPE=CHECKBOX NAME="har" VALUE="bil"> Bil
<INPUT TYPE=CHECKBOX NAME="har" VALUE="cykel"> Cykel
<INPUT TYPE=CHECKBOX NAME="har" VALUE="MC"> MC
Vilket är viktigast?:
<INPUT TYPE=RADIO NAME="val" VALUE="bil CHECKED> Bil
<INPUT TYPE=RADIO NAME="val" VALUE="cykel"> Cykel
<INPUT TYPE=RADIO NAME="val" VALUE="MC"> MC
<TEXTAREA NAME="kommentar" COLS=25 ROWS=5>
Andra kommentarer:
</TEXTAREA>
<INPUT TYPE=SUBMIT VALUE="Skicka!"><INPUT TYPE=RESET VALUE="Radera!">
</PRE>
</FORM>
</BODY>
</HTML>
| 