Till Startsidan
JavaScript.nu hostas av Ballou.se

Skaffa webbhotell
Från 12 kr/månad.

100 kr rabatt för JavaScript.nu-
besökare.

JavaScript.nu / HTML-kurs / Formulär

Formulär

I detta kapitel:
Formulärkod
Formulär
Enradsfält
Lösenords-, dolda- och filfält
Stora fält
Rutor att kryssa i
Popup
Submit och reset
Submitbild
Exempel
TYPE-värden och attribut
Test


Som du säkert sett på många sidor kan man kontakta den som skapat sidan i fråga med ett formulär. Det fungerar så att du fyller i lite information och trycker på en submit-knapp så skickas informationen via ett e-mail till någon. På precis samma sätt kan man skapa formulär för en massa olika ändamål. Allt ifrån att svara på frågor som i formuläret längst ner på denna sida eller för att t.ex. logga in på en sida.

Vill du ha ett formulär på din sida där dina besökare kan maila dig via ett formulär så behöver du bara kopiera och klistra koden nedan till din sida så får du ett vackert formulär som besökaren kan fylla i och sedan skicka till din e-mail.

<FORM METHOD="post"
ACTION="http://www.javascript.nu/cgi4free/formmail/send.pl">
<INPUT TYPE="hidden" NAME="to"
VALUE="din_email@har.com">
<INPUT TYPE="hidden" NAME="subject"
VALUE="E-mail from mailform">
<INPUT TYPE="hidden" NAME="redirect"
VALUE="http://www.JavaScript.nu/">

<TABLE BORDER="0">
<TR><TD>Your e-mail:</TD>
<TD><INPUT TYPE="text" NAME="from"></TD></TR>
<TR><TD COLSPAN="2"><TEXTAREA COLS="39" ROWS="4" NAME="Meddelande">
</TEXTAREA></TD></TR>
<TR><TD COLSPAN="2"><INPUT TYPE="submit"
VALUE="Send Mail"></TD></TR>
</TABLE>
</FORM>
OBS: För att detta ska fungera måste du vara registrerad hos CGI4Free.
För att skapa formulär krävs att man använder sig av FORM-taggen. Där du vill ha ditt formulär skriver du först ett <FORM> och sedan flera andra taggar som skapar olika typer av fält, kryssrutor, listor etc. Vilka taggar du behöver för att skapa dessa fält ska du lära dig lite senare på denna sida. När du har lagt till alla fält du ska ha avslutar du ditt forumlär med </FORM>.

FORM kan ha flera olika attribut. De viktigaste är ACTION, TARGET och METHOD. ACTION talar om vart informationen man fyller i formuläret ska skickas. Antag att du har ett formulär som ska användas till en gästbok. När besökaren fyllt i sitt inlägg och ska posta det så skickas informationen först till ett script som lagrar det besökaren skrivit i gästboken, därefter visas hur gästboken ser ut (så att besökaren får bekräftat att hans inlägg gjorts). Det är i detta ACTION-attribut det anges vart scriptet finns som i vårt exempel lagrade besökarens gästboksinlägg.
Attributet METHOD bestämmer på vilket av två möjliga sätt informationen ska skickas. METHOD:s värde är GET eller POST.

FORM
FORM står för just "FORM" (=formulär) och infogar ett formulär på sidan.
Attribut
TARGET   Här väljer du i vilken ram sidan ska öppnas i. För mer information om TARGET, kolla under frames-sidorna.
ACTION   Här väljer du vart (till vilken fil) informationen man postar ska skickas.
METHOD   Är detta värde GET kan man se informationen man postat efter scriptets namn. Informationen finns lagrad i miljövariabeln QUERY_STRING.
Är detta värde POST skickas informationen som stdin till scriptet. Datans längd lagras i miljövariabeln CONTENT_LENGTH.


Den vanligaste typen av formulärfält är det vanliga enradsfältet. Där fyller man i en rad med information. Fältet får man fram med INPUT-taggen. Givetvis krävs det att man även har FORM-taggar på sin sida så att webbläsaren förstår att man har ett formulär på sidan. Ett exempel kan således vara:
<FORM>
<INPUT TYPE="TEXT" NAME="namnet">
</FORM>

Resultatet kommer att bli såhär:

I vårt fall använder vi INPUT för att skapa ett formulärobjekt. Med TYPE bestämmer vi dess typ, dvs. vad för slags objekt det ska vara. Vi bestämmer att värdet ska vara TEXT - dvs. ett litet fält där man fyller i text. Vi döper fältet till namnet. Namnet på objektet används av t.ex. ett script för att läsa av vad man fyllt i. Scriptet kan t.ex. kolla efter vad besökaren fyllt i i ett fält med hjälp av namnet som objektet har.

Ett exempel på hur man kan använda INPUT-taggen är:
<FORM>
<INPUT TYPE="text" NAME="kalle anka" VALUE="Hejsan" MAXLENGTH="10">
</FORM>

Resultatet blir nu (lägg märke att det står "Hejsan" från början och att du nu inte kan fylla i mer än 10 tecken i fältet):

INPUT (med TYPE="text")
INPUT (med TYPE="text") skapar ett textfält i ett formulär.
Attribut
VALUE   Ett förifyllt värde.
SIZE   Fältets storlek räknat i antal tecken.
NAME   Fältets namn.
MAXLENGTH   Antalet tecken som maximalt får skrivas i fältet.

Vilka attribut INPUT har beror på vilket värde TYPE-attributet har. Längst ner på sidan visas en tabell som redogör för vilka attribut som fungerar med vilka värden på TYPE.
Vi kan även byta TYPE:s värde från TEXT som vi nu har valt till t.ex. PASSWORD, HIDDEN eller FILE:

TYPE="..."BeskrivningResultat
password Med PASSWORD blir det besökaren skriver i fältet omvandlat till asterixer (*). Man kan då inte heller kopiera och klistra "texten" (som är asterixer) för att få se vad man skrivit.
hidden Har man HIDDEN visas inte fältet för besökaren, dvs. det blir osynligt för besökaren som alltså inte blir medveten om att fältet finns.  
file Med FILE får besökaren välja en fil från hårddisken:


Ibland kan man vilja att besökaren ska kunna fylla i fler rader. Då kan man inte använda sig av INPUT-taggen, utan då får man använda sig av TEXTAREA-taggen. Nedan visas ett exempel på hur ett TEXTAREA-fält kan se ut.
<FORM>
<TEXTAREA NAME="Kommentar">
EN TEXT SOM SKA VARA IFYLLD FRÅN BÖRJAN</TEXTAREA>
</FORM>

Resultatet blir:

Exemplet nedan visar hur TEXTAREA:s olika attribut fungerar:
<FORM>
<TEXTAREA NAME="Kommentar" COLS=30 ROWS=5 READONLY WRAP="virtual">
EN TEXT SOM SKA VARA IFYLLD FRÅN BÖRJAN</TEXTAREA>
</FORM>

Koden ovan resulterar i följande fält:

TEXTAREA
TEXTAREA skapar ett fält där man kan mata in flera rader med tecken.
Attribut
COLS   Antalet tecken som får plats i en rad.
ROWS   Antalet rader med tecken som ska få plats.
NAME   Fältets namn.
WRAP   Detta ändrar hur långa raderna kan bli och hur radbyten ska hanteras. Testa dig fram hur det passar dig bäst. Giltiga värden är:
OFF, HARD, PHYSICAL, SOFT, VIRTUAL
DISABLED   Detta fungerar bara med Explorer 4 och senare. Med detta attribut blir fältet avaktiverat.
READONLY   Detta fungerar bara med Explorer 4 och senare. Med detta attribut kan man inte ändra fältets värde.

Ibland kanske du inte vill att besökaren ska behöva fylla i något, bara kryssa i sina alternativ. Då använder du dig liksom tidigare av INPUT-taggen. Fast istället för TYPE="text" ska du använda dig av TYPE="checkbox" eller TYPE="radio". Skillnaden är att med RADIO så kan man bara välja ett alternativ. Med CHECKBOX kan man välja hur många alternativ som helst.

Ett exempel på hur man kan använda sig av RADIO visas nedan:

Är du tjej eller kille???
Kille
Tjej

Som du ser kan du bara välja 1 alternativ, tjej ELLER kille.
Koden till exemplet ovan visas nedan:
<FORM>
Är du tjej eller kille???
<BR>
<INPUT TYPE="radio" NAME="Jag är..." VALUE="kille" CHECKED>Kille<BR>
<INPUT TYPE="radio" NAME="Jag är..." VALUE="tjej">Tjej
</FORM>

Observera att kille-knappen är förvalt eftersom vi använt oss av CHECKED-attributet i den första INPUT-taggen.

Nedan visas ett exempel med CHECKBOX. Nu kan man som du ser välja fler än ett alternativ.

Vad är dina hobbyn?
Frimärken
Basket
Fiske
Internet
Dansa
Dricka kaffe (?)

Exemplet ovan skapas med koden nedan:

<FORM>
Vad är dina hobbyn?
<BR>
<INPUT TYPE="checkbox" NAME="Hobby" VALUE="Frimärken" CHECKED>Frimärken<BR>
<INPUT TYPE="checkbox" NAME="Hobby" VALUE="Basket">Basket<BR>
<INPUT TYPE="checkbox" NAME="Hobby" VALUE="Fiske">Fiske<BR>
<INPUT TYPE="checkbox" NAME="Hobby" VALUE="Internet" CHECKED>Internet<BR>
<INPUT TYPE="checkbox" NAME="Hobby" VALUE="Dansa">Dansa<BR>
<INPUT TYPE="checkbox" NAME="Hobby" VALUE="Dricka kaffe">Dricka kaffe (?)
</FORM>

Att alternativen "frimärken" och "internet" är förvalda beror på att jag har använt CHECKED-attributet i dessa INPUT-taggar.

INPUT (med TYPE="checkbox" eller TYPE="radio")
INPUT (med TYPE="checkbox" eller TYPE="radio") infogar en kryssruta i ett formulär.
Attribut
VALUE   Det värde som rutan har då det är ikryssat.
CHECKED   Detta attribut tilldelas inget värde. Har du detta attribut är rutan ikryssad från början.
NAME   Rutans namn.


Något ganska vanligt i formulär är SELECT-taggen. Med denna skapar du popup-menyer alternativt ett fält med ett antal värden som man kan välja bland. Jag ska nedan visa hur man med SELECT kan skapa dessa olika objekt.

Nedan visas en popup-meny:

Hur hittade du denna sida?

Koden till menyn ovan är:

<FORM>
Hur hittade du denna sida?<BR>
<SELECT NAME="hittade sidan genom">
<OPTION>En vän berättade om den
<OPTION SELECTED>Jag sökte mig till den
<OPTION>Jag såg din annons och tryckte på den
<OPTION>Du skickade ett e-mail och sa "besök den!!!"
<OPTION>Vet inte (???)
</SELECT>
</FORM>

Notera att alternativet "Jag sökte mig till den" är valt från början. Detta beror på att den OPTION-taggen innehåller attributet SELECTED.
Jämför detta gärna med CHECKED som används med taggen INPUT då man har TYPE="RADIO" eller TYPE="CHECKBOX".

Vill vi kan menyn även se ut som följer:

Hur hittade du denna sida?

Koden till menyn ovan är:

<FORM>
Hur hittade du denna sida?<BR>
<SELECT NAME="hittade sidan genom" MULTIPLE>
<OPTION>En vän berättade om den
<OPTION SELECTED>Jag sökte mig till den
<OPTION>Jag såg din annons och tryckte på den
<OPTION SELECTED>Du skickade ett e-mail och sa "besök den!!!"
<OPTION>Vet inte (???)
</SELECT>
</FORM>

Lägg märke till att vi nu har två SELECTED-attribut, dvs. två val är förvalda. Vi har även attributet MULTIPLE som låter oss välja mer än ett alternativ.
SELECT
SELECT infogar en popup-meny i ett formulär.
Attribut
SIZE   Antalt rader menyn ska bestå av.
NAME   Menyns namn.
MULTIPLE   Detta attribut tilldelas inget värde. Har du detta attribut kan flera alternativ väljas.

OPTION
OPTION infogar ett alternativ i en popup-meny.
Attribut
SELECTED   Detta attribut tilldelas inget värde. OPTION-val med detta attribut är förvalda.
VALUE   Om ett värde anges här blir alternativets värde detta istället för det som står efter OPTION.


Ett formulär brukar avslutas med en submit-knapp. Ibland även med en reset-knapp som återställer formuläret.
Trycker man på reset-knappen görs alla ändringar som besökaren gjort i formuläret ogjorda. Trycker man på submit-knappen skickas formuläret. Med detta bekräftar användaren att han är nöjd med det som finns i formuläret och därför vill skicka det.
Knapparna ser ut som följer:

Koden till knapparna ovan är:

<FORM>
<INPUT TYPE="submit">
<INPUT TYPE="reset">
</FORM>

Vill jag kan jag ändra texten på knapparna med VALUE-attributet:

Koden till knapparna ovan är:

<FORM>
<INPUT TYPE="submit" VALUE="Skicka formuläret nu">
<INPUT TYPE="reset" VALUE="Återställ formuläret nu">
</FORM>

INPUT (med TYPE="submit" eller TYPE="reset")
INPUT (med TYPE="submit" eller TYPE="reset") infogar en submit/reset-knapp i ett formulär.
Attribut
VALUE   Den text som finns på knappen.
NAME   Knappens namn.


Vill du istället för en submit-knapp ha en submit-bild så kan du även göra detta. Du ersätter då alltså den vanliga gråa knappen mot en bild som skickar formuläret. Då ersätter du TYPE="submit" i koden mot TYPE="image". Exemplet nedan visar hur detta görs:
<FORM>
<INPUT TYPE="image" SRC="bildnamn.gif">
</FORM>

Notera att vi måste ha med ett SRC-attribut som talar om adressen till bilden.
Resultatet för koden ovan är:

Har besökaren Netscape så kommer en ram dyka upp runt bilden. Har besökaren Explorer så dyker dock ingen ram upp runt bilden. För att bli av med denna ram i både Netscape och Explorer skriver du:
<FORM>
<INPUT TYPE="image" SRC="bildnamn.gif" BORDER="0">
</FORM>

INPUT (med TYPE="image")
INPUT (med TYPE="image") infogar en submit-bild i ett formulär.
Attribut
ALIGN   Bildens placering på sidan. Giltiga värden: ABSBOTTOM, ABSMIDDLE, BASELINE, BOTTOM, LEFT, MIDDLE, RIGHT, TEXTTOP samt TOP
NAME   Objektets namn.
SRC   Adressen till bilden.
WIDTH   Bildens storlek i bredd.
HEIGHT   Bildens storlek i höjd.
BORDER   Bara för Netscape. Gör en ram runt bilden.


Slutligen vill jag påminna om att jag i mina exempel skrivit ett <FORM> före och ett </FORM> efter varje objekt jag haft i mitt formulär. Du ska när du skapar ett formulär dock endast ha ett <FORM>, följt av alla dina objekt, följt av ett avslutande </FORM>.
Ett exempel på ett korrekt formulär är:
<FORM METHOD="post" ACTION="http://www.javascript.nu/cgi4free/formmail/send.pl">
Skicka ett mail till:
Skicka ett mail till:
<BR>
<SELECT NAME="to">
<OPTION VALUE="nisse@manpower.com" SELECTED> Nisse
<OPTION VALUE="kalleanka@ankeborg.com"> Kalle
</SELECT>
<P>
Välj en rubrik:
Välj en rubrik:
<BR>
<SELECT NAME="subject" SIZE="2">
<OPTION SELECTED> Supportfråga
<OPTION> Medlemsfråga
</SELECT>
<P>
Vilket betyg ger du denna sida?
5 (bäst)
4
3
2
1 (sämst)
Vilket betyg ger du denna sida?
<BR>
<INPUT TYPE="radio" NAME="betyg" VALUE="Bäst"> 5 (bäst)<BR>
<INPUT TYPE="radio" NAME="betyg" VALUE="Bra"> 4<BR>
<INPUT TYPE="radio" NAME="betyg" VALUE="Sådär" CHECKED> 3<BR>
<INPUT TYPE="radio" NAME="betyg" VALUE="Dålig"> 2<BR>
<INPUT TYPE="radio" NAME="betyg" VALUE="Sämst"> 1 (sämst)
<P>
<TEXTAREA COLS="30" ROWS="3">
Vad tycker du om denna sida?
</TEXTAREA>
<BR>
<INPUT TYPE="submit">
<INPUT TYPE="reset">
<!-- Detta syns inte -->
<INPUT TYPE="hidden" NAME="redirect" VALUE="http://www.JavaScript.nu/">
</FORM>

Nedan visar en tabell vilka attribut INPUT-taggen kan ha med vilka värden på TYPE-attributet.
  button checkbox file hidden image password radio reset submit text
align         x          
checked   x         x      
maxlength           x       x
name x x x x x x x x x x
size           x       x
src         x          
value x x   x   x x x x x


Test
I slutet av varje kapitel i HTML-kursen finns några frågor som du ska svara på för att testa dina kunskaper inom HTML. Om du har fått alla rätt så är det bara att gå vidare, fast har du haft något fel kan det kanske vara klokt att försöka lista ut vad som kan ha varit fel. Givetvis kan du gå vidare även om du inte svarar rätt på alla frågor.
Vilket attribut kan alltid användas med INPUT?
NAME
VALUE
SRC

Vilket av följande exempel är felaktigt?
<INPUT TYPE="radio" SELECTED>
<INPUT TYPE="file">
<INPUT TYPE="password" MAXLENGTH="5">

Om du använder en SELECT-tagg bör du även använda dig av en annan tagg. Vilken?
OBJEKT
OBJECT
OPTION

Vad är skillnaden mellan att ha TYPE="RADIO" och TYPE="CHECKBOX" i INPUT-taggen?
Med RADIO kan man endast välja ett alternativ.
Med CHECKBOX kan man endast välja ett alternativ.
Det är ingen skillnad mellan RADIO och CHECKBOX.

Vilket påstående är sant angående rutorna man får fram av följande kodsnutt:
<INPUT TYPE="radio" NAME="kille"><INPUT TYPE="radio" NAME="tjej">

Inget alternativ kan kryssas i.
Endast ett alternativ kan kryssas i.
Båda alternativen kan kryssas i.

<FORM> är samma sak som:
<FORM ACTION="http://">
<FORM METHOD="get">
<FORM METHOD="post">

Vilket attribut bestämmer hur många alternativ som ska synas i SELECT-menyn:
COLS
SIZE
HEIGHT







Copyright © Omid Rouhani 1997-2010; Alla rättigheter reserverade.
Guider: [ HTML guide ] - [ JavaScript guide ] - [ DHTML guide ] - [ Perl guide ] - [ Sitemap ]