Formulär

Inledning, FORM, INPUT, TEXTAREA, SELECT, OPTION, OPTGROUP, LABEL, BUTTON, FIELDSET, LEGEND

Med elementet INPUT skapar du enkelradiga fält som användaren kan fylla i eller kryssa i. Elementet är även en av formulärets s.k. controls vars namn (attributet NAME) och ursprungligt värde (attributet VALUE) paras ihop när formulär har skickats. INPUT tilsammans med ett attribut som beskrivs i %events (avsnittet HTML 4.0 - Attribut) kan även användas utanför formuläret (ej HTML 3.2). Observera att detta inte får stöd av alla www-klienter.

INPUT markerar du med starttaggen <INPUT>. Sluttag saknas. Då det finns ett antal olika fält t ex som ifyllningsfält eller inkryssningsrutor måste du uppge vilken typ av fält elementet ska innehålla. Typ av fält specificerar du genom att tilldela INPUT attributet TYPE vars värde är en av de tillåtna fälttyperna.

Typ av enradiga fält - attributet TYPE

HTML 4.0 ger stöd åt följande enradiga fälttyper: TEXT (standardvärdet)för textinput, SUBMIT - skickar formuläret, RESET - ställer om, HIDDEN - gömmer innehållet, PASSWORD - för lösenord, CHECKBOX och RADIO för ikryssningsrutor, FILE för att skicka filer, IMAGE tillåter användning av egna bilder som används för att skicka formuläret, BUTTON för att skapa en knapp. Genom att tilldela andra attribut, t ex SIZE, kan du specificera storleken på den synliga delen av fältet.

Observera att INPUT skapar enbart enradiga fält eller kryssrutor. Vill du skapa mångradiga fält använder du elementet TEXTAREA. Vill du skapa valmenyer använder du SELECT.

Textfält <INPUT TYPE=text> och <INPUT TYPE=password>

<INPUT TYPE=text> är ett standardvärde som "ritar" ett enradigt ifyllningsfält. Passar till att fylla i namn, adress och liknande. Fältet kan innehålla ett obegränsat antal tecken. För att kunna para ihop fältets innehåll med själva fältet namnger du det med attributet NAME. Det värde du skriver där kommer att visas som rubrik på svarskortet, dvs epostmeddelandet för det ifyllda fältet. Därför är det viktigt att det överensstämmer med frågan. Om du till exempel vill att besökaren ska fylla i sitt namn och epostadress skriver du:

<FORM METHOD=POST ACTION="/cgi-bin/formmail.pl">
<P><INPUT TYPE=hidden NAME=recipient VALUE="eva@algonet.se">
Namn: <INPUT TYPE=text NAME=namn>
Epost: <INPUT TYPE=text NAME=epost><P>
.....
</FORM>

För att besökaren ska veta vad han/hon ska fylla i ett specifikt fält skriver du vid (före eller efter) fältet vad som ska fyllas i. Exemplet ovan ser ut så här på skärmen:

<INPUT TYPE=password> är också ett textfält. Den enda skillnaden är att det ifyllda innehållet renderas på så sätt att det är oläsligt på skärmen. Ifyllda tecken byts till exempel ut mot asterix. Därför används fältet för känslig information såsom lösenord.

Även då innehållet är osynligt på skärmen och inte kan läsas av "förbipasserande" skickas det till servern som läslig text. Därför lämpar sig inte dess användning för mycket känslig information eller kreditkortnummer.

Elementet INPUT är ett s.k. inlineelement, dvs det följer texten. För att få lite ordning på fälten kan du "formatera" dem på olika sätt. Till exempel:

Som innehåll av elementet PRE

<FORM METHOD=POST ACTION="..">
<INPUT TYPE=hidden NAME=recipient VALUE="eva@algonet.se">
<PRE>
Namn: <INPUT TYPE=text NAME=namn>
Epost: <INPUT TYPE=text NAME=epost>
</PRE>
</FORM>

Namn:  
Epost: 

Som en tabell (OBS! ALIGN får endast uppges i HTML 3.2 och 4.0 Transitional)

<FORM METHOD=POST ACTION="..">
<INPUT TYPE=hidden NAME=recipient VALUE="eva@algonet.se">
<TABLE>
<TR><TD align=right>Namn:</TD>
<TD><INPUT TYPE=text NAME=namn></TD></TR>
<TR><TD align=right>Epost:</td>
<TD><INPUT TYPE=text NAME=epost></TD></TR>
</TABLE>
</FORM>

Bredden på fältet bestäms av www-klienten. Normalt är fältet ca 20 tecken brett. Med attributet SIZE kan du bestämma det synliga antalet tecken och på så sätt minska eller förlänga fältet.

<P> Namn:<BR>
<INPUT TYPE=text NAME=namn SIZE=10><BR>
Epost:<BR>
<INPUT TYPE=text NAME=epost SIZE=5><BR>
</P>

Med attributet MAXLENGTH kan du begränsa antal tecken som skrivs in i fältet. När det uppgivna maximala antalet tecken har uppnåtts kan användaren inte skriva in data längre.

<P>
Postnummer:<BR>
<INPUT TYPE=text NAME=postnr SIZE=5 MAXLENGTH=5>
</P>

Genom att använda CSS kan du färgsätta fälten, dvs välja fältets bakgrundsfärg och färg på dess ifyllda innehåll. Du kan även specificera bredden och på så sätt få samma storlek på fält i både Explorer och Netscape. (Just de olika bredderna på INPUT-fälten är upphov till stor irritation hos användarna.)

Om du vill skapa ett fält som har svart bakgrund, vit text och som är 3 cm brett, skriver du:

<P><INPUT TYPE=text NAME=namn STYLE="background: black; color: white; width:3cm"></P>

I avsnittet TEXTAREA beskrivs hur man får samma bredd på INPUT och TEXTAREA i Internet Explorer

Det booliska attributet READONLY omöjliggör för användaren att ändra fältets innehåll. Fältets innehåll är värdet som har tilldelats attributet VALUE.

<P><INPUT TYPE=text NAME=ort VALUE=Stockholm READONLY><BR>
<INPUT TYPE=password NAME=lo VALUE=anonym READONLY></P>

Även det booliska attributet DISABLED omöjliggör för användaren att ändra fältets innehåll. Fältets innehåll kan till exempel visas skuggat.

Skillnaderna mellan dessa två attribut är följande:

Knappar <INPUT TYPE=submit> och <INPUT TYPE=reset>

SUBMIT producerar en knapp vars standardvärde, dvs texten som visas på knappen, är SUBMIT eller SUBMIT QUERY som används för att skicka formuläret. Genom att tilldela INPUT-attributet VALUE kan du själv uppge den text som ska visas på knappen. Om du vill ha fler än en SUBMIT-knapp, namnger du dem med attributet NAME. För att åtskilja knapparna måste värdena för attributen NAME eller VALUE eller båda vara unika. Knappen kan även bytas ut mot en bild. Se <INPUT TYPE=image>.

<P><INPUT TYPE=submit></P>

<P><INPUT TYPE=submit VALUE="Skicka"></P>

RESET används till att ställa om formuläret till dess ursprungliga värde, dvs ej ifyllt formulär. Observera att hela innehållet raderas. Standardvärdet är RESET som du kan ändra med VALUE-attributet. Knappen kan inte bytas mot en bild. Om du vill ha egna bilder i både SUBMIT- och RESET-knappar använder du elementet BUTTON.

<P><INPUT TYPE=reset></P>

<P><INPUT TYPE=reset VALUE="Radera"></>

Exempel. OBS! ALIGN för endast användas i HTML 3.2 och HTML 4.0 Transitional

<FORM METHOD=POST ACTION="..">
<P>
<INPUT TYPE=hidden NAME=recipient VALUE="eva@algonet.se">
<INPUT TYPE=text NAME=namn> Namn <BR>
<INPUT TYPE=text NAME=epost> Epost</P>
<P ALIGN=center>
<INPUT TYPE=submit VALUE="Skicka">
<INPUT TYPE=reset VALUE="Radera"></P>
</FORM>

Med CSS kan du "rita" egna knappar. (OBS! kräver CSS-kapabel www-klient.) Till exempel:

<HEAD>
<STYLE TYPE="text/css"><!--.minKnapp {background: black; color: white; width: 3cm; height: 2cm; font: bold 150% Arial; border: double black}-->
</STYLE>
</HEAD>
.....
<P>INPUT CLASS=minKnapp TYPE=submit VALUE="Skicka">
<INPUT Class=minKnapp TYPE=reset VALUE="Radera"></P>

<INPUT TYPE=image>

Denna typ tillåter dig att byta ut en standard-SUBMIT-knapp mot en valfri bild. Värdet av attributet SRC pekar på bildens adress. Precis som i "vanliga" bilder bör även den alternativa texten till bilden uppges - attributet ALT. Attributet introducerades i HTML 4.0 och stödjs än så länge inte av alla www-klienter. Därför bör du även uppge den alternativa texten via attributen NAME eller VALUE. Bildens placering i förhållande till andra element kan du specificera med hjälp av det nedskrivna attributet ALIGN - under förutsättning att dokumentet är ett HTML 4.0 Transitional- eller HTML 3.2-dokument. I HTML 4.0 regleras bildens placering med CSS och egenskapen float.

<INPUT TYPE=submit>
kan bytas mot
<INPUT TYPE=image SRC="bilder/bild.gif" ALT="Skicka formuläret">

<INPUT TYPE=hidden>

Denna typ tillåter användaren att inkludera osynliga data på skärmen som kan användas för att till exempel definiera olika variabler som tillämpas av CGI-skriptet. Observera att data är osynliga enbart på skärmen, dvs de renderas inte, men kan läsas av alla om dokumentets källa granskas (View Source).

Följande variabeln är obligatorisk och måste tillämpas av alla CGI-skript:

<INPUT TYPE=hidden NAME=recipient VALUE="eva@algonet.se">

Adressaten (recipient) och den epostadress dit formuläret ska skickas måste uppges.

Följande variabler är valfria och får stöd i Matt Wright's skriptet FormMail.pl, version 1.5. Läs Readme.doc som kommer tillsammans med skriptet för en fullständig lista på stödda variabler.

<INPUT TYPE=hidden NAME=subject VALUE="Beställning på Referensguiden">

Den information du anger i VALUE, t ex "Beställning på Referensguiden" kommer att visas på rubrikraden i epostbrevet. Ett bra sätt att sortera vanliga brev från formulären.

Om du vill att användaren ska kunna välja sin egen rubrikrad, skriver du istället:

<INPUT TYPE=text NAME=subject>

<INPUT TYPE=hidden NAME=redirect VALUE="http://www.adress.html">

När användaren har klickat på SUBMIT-knappen förflyttas han/hon till ett dokument som innehåller standardbekräftelsen att formuläret har mottagits. Om du vill skicka användaren till ett annat dokument använder du redirect och uppger adressen till det dokumentet.

<INPUT TYPE=hidden NAME=title VALUE="Bekräftelse">

Om du är nöjd med standardbekräftelsen men inte med dess rubrik som kan vara t ex Feedback Form Results och vill ändra den till Bekräftelse utan att behöva skapa ett nytt dokument till vilket användarna slussas med redirect, använder du title.

<INPUT TYPE=hidden NAME="return_link_url" VALUE="http://din.domang.se/index.html">

Om du är nöjd med standardbekräftelsen och inte vill använda redirect men ändå vill ge användaren en möjlighet att återvända till ett specifikt dokument använder du return_link_url. Adressen som specificeras i VALUE kommer att visas som länk på bekräftelsen och på vilken kan användaren klicka.

<INPUT TYPE=hidden NAME=required VALUE="namn,epost">
...
Namn: <INPUT TYPE=text NAME=namn>
Epost: <INPUT TYPE=text NAME=epost>

Med hjälp av required kan du göra fälten obligatoriska. För att formuläret ska kunna skickas måste dessa fält vara ifyllda.

I VALUE specificerar du namn på de fält som är obligatoriska. Observera att det är samma namn som tilldelades textfälten.

Om du vill kunna svara på meddelandet genom att klicka på "Reply to author" i din epostklient måste dennes epostadress finnas i FRÅN-fältet. För att åstadkomma detta ger du fältet namnet email och inte epost:

<INPUT TYPE=text NAME=email>
och om fältet är obligatoriskt skriver du även:
<INPUT TYPE=hidden NAME=required VALUE="email">

På samma sätt kan användarens namn infogas i www-klientens FRÅN-fält. Ge formulärets fält namnet realname istället för namn.

<INPUT TYPE=text NAME="realname">

<INPUT TYPE=hidden NAME=sort VALUE="alphabetic">
eller
<INPUT TYPE=hidden NAME=sort VALUE="order:namn,epost">

Posterna i postmeddelandet listas enligt en representativ standardordning för www-klienten. Vill du välja själv hur posterna ska listas använder du sort.

VALUE="alphabetic" listar alla poster i alfabetiskt ordning.
VALUE="order:value1,value2" listar poster i den angivna ordningen. Value1 och value2 är fältnamn, t ex namn eller epost.

Observera att enbart de i VALUE uppgivna fälten listas i den specificerade ordningen. Eventuella andra fält följer www-klientens standard.

<INPUT TYPE=hidden NAME="env_report" VALUE="REMOTE_HOST,HTTP_USER_AGENT">

env_report står för Environment variables så som REMOTE_HOST, REMOTE_ADDR, REMOTE_USER, HTTP_USER_AGENT. Variablerna inkluderas i epostmeddelandet.

I exemplet begärs information om fjärrvärden samt den använda www-klienten.

<INPUT TYPE=file>

Detta fält tillåter användaren att ladda upp filer. För att ladda upp filer måste:

• HTTP-servern acceptera uppladdningar
• cgi-bin-biblioteket vara tillgängligt för att kunna ta emot filen
• attributen METHOD och ENCTYPE som har tilldelats elementet FORM ta värdena post och multipart/form-data.

Med attributet VALUE kan du specificera filens ursprungliga namn och med attributet ACCEPT listar du MEDIA-typer som www-klienten ska acceptera, t ex application/msword, application/octet-stream, application/pdf, application/word6.0, application/zip, audio/x-wav, image/gif, image/jpeg, image/jpg, image/png, text/html, text/plain, video/mpeg, video/quicktime, video/x-msvideo. På detta sätt kan du filtrera oönskvärda filer. Om du vill att www-klienten enbart ska acceptera HTML-filer väljer du text/html som MEDIA-typ.

Denna typ av fält skapar även en knapp, Browse, som tillåter användaren en bläddring i t ex hårddisken. När du klickar på Browse-knappen öppnas utforskaren (PC) så att du kan välja den fil eller de filer som ska laddas upp. Namn på filen eller filerna visas i fältet.

<FORM METHOD=post ACTION="..." ENCTYPE="multipart/form-data">
...
<P><INPUT TYPE=file NAME="fil.html" ACCEPT="text/html"></P>
<P><INPUT TYPE=submit VALUE="Ladda upp"></P>
</FORM>

Kryssrutor <INPUT TYPE=checkbox> <INPUT TYPE=radio>

Dessa två typer av fält skapar små rutor som användaren kan kryssa i (markera) för att till exempel välja olika alternativ eller avmarkera i de fall då författaren har initierat rutan som markerad (attributet CHECKED). Rutor som är ej markerade ignoreras, dvs de är inte inkluderade i epostmeddelandet. Attributet VALUE är obligatoriskt i dessa fält. Skillnaden mellan dessa två fälttyper är följande:

Epost: 
Namn:  

Då jag använder formmail-skriptet namnger jag Epost-fältet email (Epost: <INPUT TYPE= text NAME=email SIZE=15>) för att kunna, om jag så önskar, svara på beställarens medde-lande genom en klick på Reply to author. Hade jag gett fältet ett annat namn skulle jag ha behövt fylla i adressen för hand. Dessutom skulle fältets ifyllda information (epostadress) inkluderats i själva meddelande.

För att få beställarens namn i FROM-rubriken namnger jag även Namn-fältet realname (Namn: <INPUT TYPE=text NAME=realname SIZE=15>). Hade jag givit fältet ett annat namn skulle detta namn inkluderats i själva meddelande och FROM-rubriken varit tom.

För att kunna sortera eller filtrera alla mina meddelanden namner jag även formuläret (<INPUT TYPE=hidden NAME=subject VALUE="Beställning">). Detta namn syns tydligt i SUBJECT-rubriken.

Tryckknapp <INPUT TYPE=button>

Detta knappfält introducerades i HTML 4.0 och används tillsammans med ett skript, t ex JavaScript, som via ett av %event-attributen, t ex ONCLICK, associeras med elementet. När användaren klickar på knappen aktiveras skriptet. Glöm inte att via META-deklarationen uppge knappens standardskriptspråk. Det värde som du ger attributet VALUE kommer att visas på knappen. Mer avancerade trycknappar skapar du med elementet BUTTON.

<HEAD>
<META http-equiv="Content-Script-Type" content="text/javascript">
<BODY>
<FORM action="..." method="post"><P>
<INPUT type="button" value="Verifiera" onclick="verify()">
</FORM>

INPUT kan vara utanför formuläret. När användaren klickar på knappen Formulär öppnas dokumentet index.html i ett annat fönster.

<HEAD>
<META http-equiv="Content-Script-Type" content="text/javascript">
</HEAD>
<BODY>
<P> <INPUT TYPE="button" VALUE="Formulär" onClick="window.open ('index.html', 'newWin')">

Attribut

%attrs;
TYPE=
  text|password|
  checkbox|radio|
  submit|reset|file|
  hidden|image|button
NAME=Cdata
VALUE=cdata
CHECKED=checked
DISABLED=disabled
READONLY=readonly
SIZE=Cdata
MAXLENGTH=number
SRC=%URI 
ALT=Cdata
USEMAP=%URI
TABINDEX=Number
ACCESSKEY=%Character
ACCEPT==%ContentTypes
onfocus=%Script
onblur=%Script
onselect=%Script
onchange=%Script

Samma som i 
HTML 4.0 plus

ALIGN=
  top|middle|
  bottom|left|
  right 

(används om 
<INPUT TYPE=image>)
 

TYPE=
  text|
  password|
  checkbox|
  radio|
  submit|
  reset|
  file|
  hidden|
  image
NAME=Cdata
VALUE=Cdata
CKECKED
SIZE=Cdata
MAXLENGTH
  =siffra
SRC=%URL
ALIGN=
 top|middle|
 bottom|
 left|right

%attrs;

Beskrivs i HTML 4.0 - Attribut

TYPE

Används för att specificera fälttyp. Tillåtna värden är: TEXT (standardvärde), PASSWORD, CHECKBOX, RADIO, SUBMIT, RESET, FILE, HIDDEN, IMAGE, BUTTON. Beskrivs i detalj ovan i avsnittet Typ av enradiga fält - attributet TYPE

NAME

Namnger control. Namnet paras ihop med ett befintligt värde, t ex den ifyllda texten.

VALUE

Obligatoriskt attribut om TYPE är checkbox eller radio. Attributet specificerar ett ursprungligt värde som paras ihop med värdet på attributet NAME. I fält som skapar trycknappar visas VALUEs värde som knapptext. I textfält visas värdet i själva fältet.

<P>Din hemsidas adress:<BR>
<INPUT TYPE=text NAME=adress VALUE="http://www."></P>

CHECKED

Detta booleattribut används enbart om TYPE är checkbox eller radio till att markera att rutan är PÅ, dvs ikryssad.

DISABLED och READONLY

Dessa två booleattribut enbart används i textfält, dvs om TYPE är text eller password för att omöjliggöra att användaren ändrar fältets innehåll. Fältens innehåll är värdet som har tilldelats attributet VALUE.

Skillnader mellan dessa två attribut beskriver jag i avsnittet Textfält <INPUT TYPE=text> och <INPUT TYPE=password> ovan.

SIZE

Attributet är specifikt för varje fälttyp. I textfält representerar attributets värde antal synliga tecken. I andra fälttyper representerar attributets värde antal pixlar (och har mycket dåligt stöd i populära www-klienter). Värdet uppges som en siffra.

MAXLENGTH

Används enbart i textfält till att specificera det maximala antalet tecken som användaren kan skriva in). Standardvärdet är ett obegränsat antal tecken. Värdet uppges som en siffra. Om antal tillåtna tecken är högre än antal tillåtna tecken specificerade i SIZE bör www-klienten förse fältet med en rullgardin.

SRC

Används enbart om en egen bild används för att skicka formuläret (<INPUT TYPE=image>). Dess värde är bildens adress. Bilden ersätter SUBMIT-knappen vilken <INPUT TYPE=submit> producerar.

<INPUT TYPE=image SRC="bild.gif" ALT="Submit">

Bilden bild.gif visas istället för standardknappen. När användaren klickar på bilden skickas formuläret.

ALT

Används enbart om TYPE är image för att specificera den alternativa texten till bilden.

USEMAP

Används enbart om TYPE är image för att associera fältet med en imagemap. Attributets värde måste vara samma namn som NAME-attributet som har associerats med MAP-elementet tar.

TABINDEX

Få ej användas om TYPE är hidden. Attributet specificerar det befintliga elementets placering i dokumentets tabbordning, dvs följd i vilken elementet kommer i fokus under tangentbordsnavigering. Värdet är en siffra mellan 0 och 32767. Följande regler gäller:

• Element med TABINDEX-support (t ex INPUT) och ett positivt attributvärde navigeras först. Navigeringen fortsätter från element med lägsta till högsta TABINDEX-värdet. Värdena behöver inte uppges i ordningsföljd. I fall då olika element ges samma attributvärde navigeras element som förekommer först i dokumentet först.
• Element utan TABINDEX-support eller element med support men med attributvärdet 0 (noll) navigeras därefter. Elementen navigeras i den följd som de förekommer.
• Element med attributet DISABLED ignoreras

<P>Namn: <INPUT TABINDEX=1 TYPE=text>

ACCESSKEY

Med detta attribut kan användaren få tillträde till elementet via ett kort tangent-bordskommando. Elementet får fokus när användaren klickar på den specifi-cerade tangenten, t ex länken följs. Värdet är ett Unicode-tecken. I exemplet nedan kommer ett klick på tangenten N att ta besökaren till Namn-fältet.

<P>Namn: <INPUT ACCESSKEY=N TYPE=text>

Observera att ALT-tangenten bör vara nedtryckt om du använder Windows och CMD om du använder MAC.

ACCEPT

Med detta attribut kan du lista vilka MEDIA-typer www-klienten ska acceptera och på så sätt filtrera uppladdningen av ej önskvärda filer. MEDIA-typer separeras med ett komma. Observera att vid filuppladdning ska attributet ENCTYPE ha värdet multipart/form-data.

<FORM METHOD=post ACTION="..." ENCTYPE="multipart/form-data">
<P><INPUT TYPE=file NAME="fil.html" ACCEPT="text/html"></P>
<P><INPUT TYPE=submit VALUE="Ladda upp"></P>
</FORM>

onfocus

Inre händelse. Något sker när elementet får fokus antingen via pekdonet eller tabbnavigeringen. Vad som sker specificeras i skriptet, t ex JavaScript, som är attributets värde.

onblur

Inre händelse. Något sker när elementet förlorar fokus. Vad som sker specificeras i skriptet, t ex JavaScript, som är attributets värde.

onselect

Används enbart i textfält. Inre händelse. Något händer när användaren väljer en text i textfältet. Vad som sker specificeras i skriptet, t ex JavaScript, som är attributets värde.

onchange

Inre händelse. Något händer när elementet förlorar fokus och dess värde har modifierats sedan elementet fick fokus. Vad som sker specificeras i skriptet, t ex JavaScript, som är attributets värde.

ALIGN (T)

Nedskrivet attribut. Används för bildplacering enbart om TYPE är image. Tillåtna värden är top | middle | bottom | left | right. Nedskrivet attribut. Används för bildplacering enbart om TYPE är image. Tillåtna värden är top | middle | bottom | left | right.

Nästa TEXTAREA Flerradiga textfält

Upp | HTML-referensbok | Referensböcker