Formulär

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

OBS! Detta avsnitt bör läsas tillsammans med de två efterföljande avsnitten OPTION och OPTGROUP.

Elementet skapar en valmeny och måste innehålla åtminstone ett valalternativ som skapas med elementet OPTION. SELECT är mao en behållare för elementen OPTION som skapar de olika valmöjlighetena vilka i sin tur kan grupperas i logiska enheter med hjälp av det nya elementet OPTGROUP.

Fr.o.m. HTML 4.0 kan elementet finnas utanför FORM.

Attribut

%attrs;
NAME=Cdata
SIZE=Number
MULTIPLE=multiple
TABINDEX=Number
onfocus=%Script
onblur=%Script
onchange=%Script

NAME=CDATA (O)
SIZE=Number
MULTIPLE=multiple

%attrs;

Beskrivs i HTML 4.0 - Attribut

NAME

Namnger control. Namnet paras ihop med det eller de val som användaren gjorde, dvs med värdet (i fall av ett val) eller värden (i fall av fler val) som har tilldelats elementet OPTION.

SIZE

Normalt renderas valmenyer i en box (ram). Om listan är längre än ramen förser www-klienten den med en rullgardin. Med attributet SIZE kan du föreslå hur många listrader (OPTION-element) ska vara synliga i boxen. Om du till exempel vill göra fyra valmöjligheter synliga skriver du:

<SELECT NAME=namn SIZE=4>

MULTIPLE

Booleattribut. Som standard, dvs om attributet saknas, kan användaren välja bara ett alternativ. Attributet tillåter val av fler alternativ. Elementen OPTIONs innehåll eller värde av dess VALUE-attribut paras då ihop med värdet av SELECTs attribut NAME.

Andra attribut

Se INPUT för information om attributen: DISABLED, TABINDEX, onfocus, onblur, onchange

Med OPTION skapar du en valmeny. Elementet måste finnas inuti SELECT eller OPTGROUP som i sin tur måste finnas inuti SELECT. OPTION är en behållare och dess innehåll, dvs texten mellan <OPTION> och den valfria sluttaggen </OPTION>, visas i boxen som en valmöjlighet. I de fall då OPTION saknar attributet VALUE betraktas detta innehåll som ett värde och paras ihop med SELECTs attribut NAME.

<SELECT NAME="KnowWares böcker">
<OPTION>HTML referensguide</OPTION>
</SELECT>

HTML referensguide är OPTIONs innehåll och dess ursprungliga värde som paras ihop med namnet KnowWares böcker.

Om SELECT saknar attributet SIZE visas ett alternativ i boxen - det första. Därför är det brukligt att använda det första alternativet som "attrapp" vars innehåll till exempel är VÄLJ eller liknande. (<OPTION>Välj</OPTION>). Om SELECT tar attributet SIZE, vars värde till exempel är 5 visas de fem första alternativen i boxen.

Alternativval görs på följande sätt:

• om användaren vill välja ett alternativ klickar han/hon på det
• om användaren vill välja ett antal efterföljande alternativ håller hon/han ned ALT-tangenten medan han/hon klickar på dem (PC)
• om användaren vill välja ett antal icke efterföljande alternativ håller han/hon ned CTRL-tangenten medan han/hon klickar på alternativen (PC)

De valda alternativen visas markerade. Om användaren vill avmarkera dem klickar han/hon på dem en gång till.

Attribut

%attrs;
SELECTED=selected
LABEL=%Text
VALUE=Cdata
DISABLED=disabled

SELECTED=selected VALUE=Cdata

%attrs;

Beskrivs i HTML 4.0 - Attribut

DISABLED

Se INPUT

VALUE

Elementets ursprungliga standardvärde är dess innehåll. Med attributet VALUE kan du ändra detta värde till ett annat och på så sätt para ihop nya värdet med SELECTs attribut NAME.

<SELECT NAME="KnowWares böcker">
<OPTION VALUE=art41>HTML referensguide</OPTION>
</SELECT>

Värdet art41 paras ihop med namnet KnowWares böcker istället för standardvärdet HTML referensguide.

LABEL

Label (etikett) är den text som visas i boxen. Dess standardvärde är elementet OPTIONs innehåll. I de fall då detta innehåll är för långt kan du med hjälp av attributet LABEL specificera en kortare version av innehållet som www-klienten ska visa i boxen.

<SELECT NAME="KnowWares böcker">
<OPTION LABEL="HTML-guide">Den svenska referensguiden till HTML</OPTION>
</SELECT>

OBS! F.n. har LABEL ett mycket dåligt stöd i www-klienter.

SELECTED

Booleattribut. Med detta attribut kan författaren förvälja ett eller fler alternativ. Alternativen visas då markerade. För att avmarkera det redan förvalda alternativet klickar du på det. WWW-klienter bör följa följande renderingsregler:

• Om noll OPTION-element tilldelas attributet SELECTED ska inga alternativ visas som förvalda
• Om ett OPTION-element tilldelas attributet SELECTED ska det markeras som förvalt
• Om fler än ett OPTION-element tilldelas attributet SELECTED och om elementet SELECT tilldelas attributet MULTIPLE ska alla dessa alternativ visas som förvalda

OBS! För att användaren ska kunna förvälja fler än ett alternativ måste SELECT tilldelas attributet MULTIPLE. Brist på attributet MULTIPLE är ett syntaxfel om fler än ett OPTION-element är förvalt. Det är upp till en www-klient hur den handskas med sådana fel. Internet Explorer, till exempel, markerar det sista OPTION-elementet som förvalt.

Exempel

<FORM METHOD=POST ACTION="...">
<P><INPUT type=hidden name=recipient value="...">
<P>
<INPUT TYPE=hidden NAME=recipient VALUE="...">
<INPUT TYPE=hidden NAME=subject VALUE="Beställning">
<P>Jag vill köpa följande böcker:</P>
<P>
<SELECT NAME="Beställning av">
<OPTION>Välj:</OPTION>
<OPTION>Den svenska referensguiden</OPTION>
<OPTION>Formatering med stilmallar</OPTION>
<OPTION>Programmering i Java, del 1 </OPTION>
<OPTION>Programmering i Java, del 2 </OPTION>
</SELECT>
</P>
<P><INPUT TYPE=submit></P>
</FORM>

• Bara ett av dessa alternativ kan väljas då SELECT saknar attributet MULTIPLE
• Ett alternativ (det första) visas i boxen då SELECT saknar attributet SIZE
• Inga alternativ är förvalda (markerade) då alla OPTION-element saknar attributet SELECTED

När användaren klickar på den svarta triangeln öppnas hela boxen.

<FORM METHOD=POST ACTION="...">
<P><INPUT type=hidden name=recipient value="...">
...
<P>
<SELECT NAME="Beställning av" SIZE=2>
<OPTION>Välj:</OPTION>
<OPTION>Den svenska referensguiden</OPTION>
<OPTION>Formatering med stilmallar</OPTION>
<OPTION>Programmering i Java, del 1 </OPTION>
<OPTION>Programmering i Java, del 2 </OPTION>
</SELECT>
</P>
<P><INPUT TYPE=submit></P>
</FORM>

• Bara ett av dessa alternativ kan väljas då SELECT saknar attributet MULTIPLE
• Två alternativ visas i boxen då SELECT tar attributet SIZE vars värde är 2
• Inga alternativ är förvalda (markerade) då alla OPTION-element saknar attributet SELECTED
• Boxen förses med en rullningsgardin

<FORM METHOD=POST ACTION="...">
<P><INPUT type=hidden name=recipient value="...">
...
<P>
<SELECT MULTIPLE NAME="Beställning av" SIZE=4>
<OPTION>Den svenska referensguiden</OPTION>
<OPTION SELECTED>Formatering med stilmallar</OPTION>
<OPTION>Programmering i Java, del 1 </OPTION>
<OPTION>Programmering i Java, del 2 </OPTION>
</SELECT>
</P>
<P><INPUT TYPE=submit></P>
</FORM>

• Alla dessa alternativ kan väljas då SELECT tar attributet MULTIPLE
• Fyra alternativ visas i boxen då SELECT tar attributet SIZE vars värde är 4
• Ett alternativ är förvalt (markerat) då ett OPTION-element tar attributet SELECTED. Om användaren inte vill välja detta alternativ måste han/hon avmarkera det
• Boxen förses inte med en rullgardin då alla alternativ visas

<FORM METHOD=POST ACTION="...">
<P><INPUT type=hidden name=recipient value="...">
...
<P>
<SELECT NAME="Beställning av" MULTIPLE SIZE=4>
<OPTION VALUE=041>Den svenska referensguiden</OPTION>
<OPTION SELECTED VALUE=054>Formatering med stilmallar</OPTION>
<OPTION SELECTED VALUE=058>Programmering i Java, del 1 </OPTION>
<OPTION VALUE=061>Programmering i Java, del 2 </OPTION>
</SELECT></P>
<P><INPUT TYPE=submit></P>
</FORM>

Samma som ovan med den skillnaden att två av alternativen är förvalda.

Dessutom tar varje OPTION-element attributet VALUE vars värden, vilka representerar böckernas artikelnummer, kommer att paras ihop med SELECTs attribut NAME. På så sätt kan förlaget fökorta beställningen eller förenkla det administrativa arbetet.

Epostmeddelandet kommer att se ut så här:

Beställning av: 041, 058

OPTGROUP introducerades i HTML 4.0 och används för att på ett logiskt sätt kunna gruppera de olika valen, dvs för att gruppera OPTION-elementen i logiska enheter. Varje OPTGROUP måste innehålla minst ett OPTION-element. En sådan gruppering kan vara praktisk i till exempel långa menylistor som innehåller många olika valmöjligheter. Genom att gruppera de olika valen skapar du undermenyer.

Elementet är nytt och än så länge är dess support mycket dålig. Visuella www-klienter bör dock rendera det på så sätt att användaren kan välja individuella alternativ som en grupp innehåller via någon sorts hierarkiskmeny. WWW-klienten kan till exempel enbart visa gruppnamnen som specificeras med det obligatoriska attributet LABEL. När användaren klickar på namnet öppnas en undermeny. F.n. kan grupperna inte nästlas, dvs en undermeny kan inte innehålla en annan, men det kan eventuellt vara möjligt i framtida versioner av HTML.

Ej stödda element ignoreras. Om en www-klient inte stödjer OPTGROUP kommer den att rendera dess innehåll, dvs elementen OPTION - hela valmenyn. Även om stödet är dåligt kan du använda elementet

Attribut

%attrs;
LABEL=%Text (O)
DISABLED=disabled

Elementet saknas

%attrs;

Beskrivs i HTML 4.0 - Attribut

DISABLED

Se INPUT

LABEL

Obligatoriskt attribut. Attributet används till att namnge valgruppen. Observera skillnaden mellan attributet LABEL i OPTGROUP och OPTION. Det sistnämnda används för att specificera en kortare version av innehållet.

Exempel

<FORM METHOD=POST ACTION="..."><P>
<INPUT type=hidden name=recipient value="...">
...
<P>Vilken bok ur KnowWareserien tycker du bäst om?<BR>
<SELECT NAME="KnowWareserien">
<OPTGROUP LABEL="KnowHow">
<OPTION VALUE=041>Den svenska referensguiden</OPTION>
<OPTION VALUE=054>Formatering med stilmallar</OPTION>
<OPTION VALUE=058>Programmering i Java, del 1 </OPTION>
<OPTION VALUE=061>Programmering i Java, del 2 </OPTION>
</OPTGROUP>
<OPTGROUP LABEL="QuickSteps">
<OPTION VALUE=900> QuickSteps till Outlook</OPTION>
<OPTION VALUE=901> QuickSteps till Internet-Chat</OPTION>
<OPTION VALUE=902> QuickSteps till Word 97</OPTION>
<OPTION VALUE=903> QuickSteps till Explorer 4.0</OPTION>
</OPTGROUP>
</SELECT>
</P>
<P><INPUT TYPE=submit></P>
</FORM>

Nästa LABEL Etiketter

Upp | HTML-referensbok | Referensböcker