Forms och e-postformulär på hemsidan

CHECKBOXES

RADIO BUTTONS

FORM ELEMENTS - vad man kan ha på ett formulär

INPUT TYPE
- text, button, password, checkbox, radio, reset, submit, image, hidden, file
TEXTAREA
SELECT
OPTION
KEYGEN
ISINDEX

OBS! Allt som man vill ha med på formuläret placeras mellan
FORM-taggar.
Ett exempel på en
FORM-tagg
finns längst ner på sidan.

<INPUT TYPE="text">

<INPUT TYPE = "text"
VALUE = "flowsim¹"
SIZE = "30²"
NAME = "namn³"
MAXLENGTH= "30⁴">

1 VALUE används om man vill att det skall stå något i textrutan från början
2 textrutans bredd, mätt i antal bokstäver (genomsnittslig bokstavsbredd)
3 ett namn vilket som helst för att identifiera fältet
4 om man vill begränsa antalet bokstäver som kan skrivas i textrutan kan man använda MAXLENGTH

Om man skickar den här formen som e-post ser resultatet för detta fält ut ungefär så här:
namn = flowsim

<TEXTAREA>...</TEXTAREA>

<TEXTAREA NAME= "meddelande¹"
ROWS = "3²"
COLS = "30³">
flowsim
flowsim
flowsim
</TEXTAREA>

1 ett namn vilket som helst för att identifiera textrutan
2 textrutans (synliga) höjd, mätt i rader
3 textrutans bredd, mätt i antal bokstäver (genomsnittslig bokstavsbredd)

Om man skickar den här formen som e-post ser resultatet för detta fält ut ungefär så här:
meddelande = ...

Under rubriken JAVASCRiPT finns flera exempel på hur man kan använda kod för att automatiskt skriva text i textareor.

<INPUT TYPE="password">

<INPUT TYPE = "password¹"
SIZE = "20²"
NAME = "lösenord³"
MAXLENGTH= "7⁴">

1 fungerar som <INPUT TYPE ="text"> med den skillnaden att det man skriver visas som asterisker
2 textrutans bredd, mätt i antal bokstäver (genomsnittslig bokstavsbredd)
3 namn för att identifiera fältet
4 om man vill begränsa antalet bokstäver som kan skrivas i textrutan kan man använda MAXLENGTH

Om man skriver flowsim i rutan och skickar den här formen som e-post ser resultatet för detta fält ut så här:
lösenord = flowsim

<INPUT TYPE="checkbox">

ETT
TVÅ
TRE

<INPUT TYPE = "checkbox"
CHECKED¹
VALUE = "ett"
NAME = "namn²">ETT
<INPUT TYPE = "checkbox"
VALUE = "två"
NAME = "namn">TVÅ
<INPUT TYPE = "checkbox"
VALUE = "tre"
NAME = "namn">TRE

1 CHECKED placerar ett kryss i den aktuella rutan
2 samma namn för alla rutor i samma grupp
Om man kryssar för ETT och TRE och skickar den här formen som e-post ser resultatet för detta fält ut så här:
namn=ett
namn=tre

<INPUT TYPE="radio">

1-9
10-19

<INPUT TYPE = "radio"
NAME = "antal¹"
VALUE = "1-9">1-9
<INPUT TYPE = "radio"
NAME = "antal"
VALUE = "10-19"
CHECKED²>10-19

1 samma namn för alla rutor i samma grupp
2 checked placerar ett "kryss" i den aktuella rutan

Om man markerar 10 -19 och skickar denna form som e-post ser resultatet för detta fält ut så här:
antal=10-19

<SELECT>...</SELECT>

<SELECT NAME = "information¹"
SIZE = "4²"
MULTIPLE³>
<OPTION> första
<OPTION SELECTED⁴> andra
<OPTION >tredje
<OPTION> fjärde
<OPTION> femte
</SELECT>

1 ett namn vilket som helst för att identifiera fältet
2 antal synliga rader/ alternativ
3 MULTIPLE gör det möjligt att välja fler än ett alternativ(med hjälp av Ctrl)
4 SELECTED gör den aktuella raden markerad från början

Om man markerar andra och fjärde och skickar denna form som e-post ser resultatet för detta fält ut så här:
information=andra
information=fjärde

>>> mer om rullgardinsmenyer

<INPUT TYPE="reset">

<INPUT TYPE = "reset"
VALUE = "RADERA">
blir

En klickning på knappen raderar allt som skrivits i rutorna efter det att sidan laddades

<INPUT TYPE="submit">

<INPUT TYPE = "submit"
VALUE = "SKICKA">
blir

En klickning på knappen skickar iväg det hela; exakt vad som händer beror på vad man angett i FORM-taggarna (se längre ner)

<INPUT TYPE="image">

Istället för att använda en SUBMIT-knapp kan man använda en bild.

<INPUT TYPE = "image"
NAME = "bild"
SRC = "bildfil">
blir

En klickning på bilden skickar alltså iväg formen och ger x- och y-värdena för den punkt avsändaren klickade på (i det här exemplet ser man om avsändaren klickade på rött eller grönt genom att kolla om x är större eller mindre än 12):
bild.x =
bild.y =

<INPUT TYPE="button">

Man kan använda stylesheets för att bestämma knappens utseende. Se t.ex. det här exemplet

SÅ HÄR KAN MAN SKRIVA OM MAN VILL SKICKA FORMEN SOM E-POST:

<FORM METHOD = "post"
NAME = "ett namn vilket som helst"
ACTION = "mailto:ilj@flowsim.se"
ENCTYPE = "text/plain">
här placeras allt som skall vara med på formen, t ex
en textruta,
en RESET-knapp och
en SUBMIT-knapp...
</FORM>

Glöm inte att byta ut min e-postadress mot din egen!

MER om FORMULÄR:

e-postformulär - ett exempel med kod

formulär med knappar, rullgardinsmenyer etc

rullgardinsmenyer

Bestämma hur formuläret ska se ut? Använd stylesheets (stilmallar).

Sidan gjordes av

ilj@flowsim.se

Senast ändrad 25 mars 2004.

Den här sidan hör hemma i ett ramsystem
hos:
www.flowsim.se
HTML på svenska