|
|
|
|
|
|
|
|||
|
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 ] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
