|
|
|
|
|
|
|
|||
|
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.
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.
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:
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):
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:
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:
Koden ovan resulterar i f�ljande f�lt:
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:
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.
Exemplet ovan skapas med koden nedan:
<FORM> Att alternativen "frim�rken" och "internet" �r f�rvalda beror p� att jag har anv�nt CHECKED-attributet i dessa INPUT-taggar.
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: Koden till menyn ovan �r:
<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.
Vill vi kan menyn �ven se ut som f�ljer: Koden till menyn ovan �r:
<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.
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>
Vill jag kan jag �ndra texten p� knapparna med VALUE-attributet:
Koden till knapparna ovan �r:
<FORM>
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.
<FORM> <INPUT TYPE="image" SRC="bildnamn.gif" BORDER="0"> </FORM>
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:
Nedan visar en tabell vilka attribut INPUT-taggen kan ha med vilka v�rden p� TYPE-attributet.
Copyright © Omid Rouhani 1997-2022; Alla r�ttigheter reserverade. Guider: [ HTML guide ] - [ JavaScript guide ] - [ DHTML guide ] - [ Perl guide ] - [ Sitemap ] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
