.
1. Inledning
2. Gör ett formulär för e-post
3. Att tänka på
4. Några fler funktioner
5. Ytterligare möjligheter i HTML 3.2
Formulär fanns med redan i HTML 2.0 och har sedan dess kommit att bli en mycket använd funktion. 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.
Denna sida handlar alltså i första hand om e-post-formulär. Men jag förklarar också några andra användningsområden. På en särskild sida berättar jag mer om de funktioner som tillkommit i HTML 4.0.
Observera! Formulär är ganska komplicerade att göra och att få att fungera. Webläsarna tolkar koden olika och försöker i många fall att skicka formuläret genom ditt e-postprogram, som då öppnas när du försöker skicka formuläret. Enda sättet att undvika det är att använda sig av olika scripts, som aktiverar ett särskilt e-postprogram på den server där sidorna ligger. Men sådana är ganska avancerade och tas inte upp här.
På liknande sätt kommer du här inte att få lära dig hur man skapar ett tackbrev till den som skickar formuläret. Sådant åstadkommer man med javascripts eller med nyss nämnda serverfunktion.
Ett tips till dig som ändå vill ha ett formulär är att lägga upp en instruktion till den som skall använda det. Där kan stå t.ex:
Innan du fyller i formuläret...Jag har här använt ett vanligt e-postformulär. När du skickar det vill din webläsare öppna ditt e-postprogram. |
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:
<PRE>
<FORM method="post"
action="mailto:[email protected]" enctype="text/plain">
Ditt namn:
<INPUT type="text" name="Namn:" size="25">
Din e-postadress:
<INPUT type="text" name="E-post:" size="40">
Vad tycker du om
mina sidor?
<INPUT type="radio" name="val" value="Helbra!">Helbra
<INPUT type="radio" name="val" value="Halvbra">Halvbra
<INPUT type="radio" name="val" value="Kvartsbra">Dålig
Motivera gärna vad du tycker i
fältet nedan!
<TEXTAREA name="Motivering:" rows="4" cols="60">
</TEXTAREA>
<INPUT type="submit"
value="Skicka!"><INPUT type="reset" value="Radera">
</FORM>
</PRE>
Först och främst har jag använt <PRE>-elementet. Detta är för att slippa skriva radbrytningar, d.v.s <BR>, som annars skulle behövas för att få formuläret att presenteras riktigt. Med <PRE>-elementet får man också en mer överskådlig kod.
Sedan ser du att formuläret börjar med anropet <FORM>, som talar om för webläsaren att "Här skall det vara ett formulär!" Elementet har sedan några attribut och värden för de funktioner man vill att formuläret skall ha:
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 webläsaren att "Här skall du stoppa in någonting":
Nu reserverar webläsaren en tom rad (tack vare type="text"), 25 tecken lång (tack vare size="30"), på vilken besökaren kan skriva in sitt namn. Du kan ange större tal än 25, men det blir ganska lagom med 25. När meddelandet sedan skickas till mottagaren, vars e-postadress angetts i <FORM>, kommer denne att kunna se vem som skickat meddelandet. För att vara extra tydlig skall jag säga att besökaren på sidan bara ser texten "Ditt namn:" och en tom rad. Mottagaren av meddelandet ser däremot texten "Namn:" och avsändarens namn, om denne skrivit det. Webläsaren är den ende som ser <INPUT type="text" name="Namn:" size="25">.
Nästa rad lyder: Din e-postadress: <INPUT type="text" name="E-post:" size="40">. Den är alltså identisk med den förra, med det undantaget att den är till för att ange besökarens/avsändarens e-postadress. Alla fält måste förresten 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
<INPUT type="radio" name="val" value="Halvbra">Halvbra|
<INPUT type="radio" name="val" value="Kvartsbra">Dålig
Den text som inte skrivs innanför några taggar kommer att synas på skärmen när formuläret presenteras i webläsaren. Det är alltså ganska viktigt att skriva saker så att besökaren förstår varför hon eller han skall klicka på knapparna. 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 webläsaren vilken sorts knappar den skall visa. Det finns även checkbox (se avsnitt 4. nedan).
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 här:
Man måste alltid avsluta denna funktion med </TEXTAREA>. Jag har sett att många skriver text mellan de båda TEXTAREA-elementen, men eftersom det inte alltid fungerar (webläsaren ignorerar det), brukar jag hoppa över det.
‰terstår bara två funktioner, nämligen "Skicka!" och "Radera". Som du nu kanske har förstått skapas båda knapparna med <INPUT>-element med olika värden:
Om det bara finns ett enda textfält räcker det i vissa fall med att besökaren trycker på [Return]-knappen, för att texten skall skickas. Har man fler än ett textfält måste man däremot ha en 'Submit'-knapp.
Avslutningarna </FORM> och </PRE> är naturligtvis viktiga.
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 m.m och vips! har du ett e-postformulär!
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.
Namn=Petter+Niklasson&[email protected]&val=helbra&Kommentar
=Din+sida+=E5r+bra
Vilket kanske blir lite tröttsamt i längden. Du undviker en del konstigheter med attributet 'enctype', som jag visade ovan. 'Enctype' står för 'Encryption Type' och hjälper din browser och ditt e-postprogram att förstå att det som skickas är helt vanlig text.
Det åstadkommer man alltså med '?' och 'subject', men inget extra citationstecken skall användas. (Den här funktionen har jag hittat på HTML Goodies sida om formulär.)
Ok, nu vet du lite om vad man kan göra med formulär i HTML 3.2. Det finns emellertid några fler funktioner, 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...
Ett rullgardinsformulär
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>:
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å?
Detta skrivs alltså innanför <FORM>-elementen, tillsammans med dialogrutor för namn och e-post. Denna funktion är naturligtvis bra för långa listor, som man inte vill ha drällande över hela sidan. Man kan inte lägga in länkar i stället för text. För att skapa en rullgardin med klickbara länkar måste man använda sig av s.k 'java applets', som jag tänker ta upp på en kommande resurssida.
selected
Anger vilket värde som skall vara förvalt i rullgardinen. Skrivs inne i <OPTION>. Det förvalda värdet visas sedan i fönstret. Exempel:
<OPTION selected>Franska
checked
Motsvarande funktion finns naturligtvis för radio- och checkboxkontrollerna. Skrivs i <INPUT>:
<INPUT type="checkbox" name="val" value="Helbra!" checked>Helbra
size
Detta attribut har jag redan nämnt, men för rullgardinsmenyer kan man på detta sätt tala om 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"> i exemplet ovan ger:
multiple
Används för rullgardinsmenyer och innebär att besökaren kan välja fler än ett alternativ, genom att hålla nere ctrl-tangenten och klicka på fler alternativ. Skrivs <SELECT name="information" multiple> och ser ut så här:
(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!)
maxlength
Attributet 'maxlength' använder 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="25" maxlength="60">
Skojiga Trix
Man kan om man vill byta ut 'Submit'-knappen med egenhändigt tillverkade bilder (med lagom storlek). (Men det fungerar inte alltid och det går inte att skapa någon Reset-knapp på det här sättet.) Skrivs:
<INPUT type="image" src="Bild.gif" border=0>
Men det är bäst att du kollar noga att det fungerar först. Border-attributet är dessutom inte riktigt korrekt, så bli inte besviken om webläsaren ignorerar det.
Man kan också göra 'Submit'- och 'Reset'-knapparna till klickbara länkar, t.ex:
<TABLE border="0">
<TD>
<FORM method="link"
action="http://www.news.com">
<INPUT type="submit"
value="NYHETER!">
</FORM>
</TD>
<TD>
<FORM method="link" action="http://www.altavista.com/">
<INPUT type="submit" value="Altavista">
</FORM>
</TD>
</TABLE>
Som blir:
Här har jag lagt knapparna i en tabell, för att vara säker på att de hamnar bredvid varandra. Det händer ibland att weblä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.
Attributet 'type' kan, förutom de ovan nämnda text, checkbox, radio, submit och reset, även ha värdena password och hidden. Båda kan vara bra att känna till, men blir inte användbara förrän man använder ett formulär för att köra ett (cgi-) program på servern. Hur man gör det kommer jag att återkomma till inom kort.
password är väl egentligen bara aktuellt när man kör formuläret mot ett program på servern och vill att bara de med lösenord skall kunna göra det. Genom att lägga till attributet 'value' kan man få ett antal tecken att visas i textraden innan besökaren skriver något. Tecknen visas som stjärnor eller asterisker. Poäng: Man visar att här krävs ett lösenord och hur många tecken det innehåller. Skrivs:
<INPUT type="password" value="12345" name="password">
hidden ger ett dolt textfält, som inte syns på skärmen. Används för att hålla reda på innehållet i olika formulär, framförallt då man kör program på servern som genererar nya formulär. Men om du använder olika formulär kan du ju skriva:
<INPUT type="hidden" value="XXXXXXX" name="YYYYY">
där XXXXXXX anger den sida eller den URL där formuläret ligger och YYYYY talar om om det är en URL eller något annat, som vanligt. När det här kommandot läggs in som en extra rad och skickas tillsammans med resten av texten underlättar den alltså för dig: du ser vilket formulär som fyllts i.
Texten är lånad från
www.jonasweb.nu,
men redigerad av
.