Nyheterna i HTML 4.0 stöds inte av äldre webbläsare, men nyare stöder dom flesta funktionerna. De största nyheterna är möjligheten att navigera i formuläret med hjälp av tangentbordet samt ett par nya formulärobjekt.
För att skapa sändknappar och återställningsknappar kan man använda sig av detta märke. Det går också bra att skapa knappar som inte har någon funktion alls. Denna typ av knappar kan vara bra när man vill ange att ett klientmanus ska köras när användaren klickar på knappen. Manuset kan sedan innehålla en del avancerade funktioner.
Attributen <BUTTON> kan ha är NAME, VALUE och TYPE. NAME och VALUE har samma funktion som attributen i <INPUT>. TYPE kan ha värdena SUBMIT (förvalt), RESET och BUTTON. SUBMIT och RESET ger sänd och återställningsknappar och BUTTON ger en kanpp utan funktion.
En fördel med knappar skapade med <BUTTON> istället för med <INPUT> är att märket <BUTTON> kan ha innehåll. Det som står mellan <BUTTON> och slutmärket </BUTTON> visa på knappen.
<FORM ACTION="mailto:karlsson.robert@vetlanda.mail.telia.com" METHOD="POST" ENCTYPE="text/plain"> <BUTTON TYPE=SUBMIT NAME="Skickaknapp" VALUE="Skicka"> <IMG SRC="gifs/html/enve.gif" ALT="brev" VSPACE=10 HSPACE=10></BUTTON> <BUTTON TYPE=RESET NAME="Radera"> <IMG SRC="gifs/html/papper.gif" ALT="brev" VSPACE=10 HSPACE=10><BR> Rensa formuläret</BUTTON><BR> <BUTTON TYPE=BUTTON NAME="Inget"> Klickar du på den här knappen händer absolut ingenting</BUTTON> </FORM>
Den första knappen som är en sändknapp har namnet "Skickaknapp" och värdet "Skicka", men fördelen med <BUTTON> är att värdet inte skrivs ut utan istället skrivs märkets innehåll, i detta fall en bild, ut.
Det här märket kan man använda om man vill ge en "etikett" till formulärobjekt som i vanliga fall inte har någon text, exempelvis textfält, kryssrutor och listor. Själva etiketten blir märkets innehåll.
Innehållet i <LABEL> kan vara det formulärobjekt som ska få en etikett eller kan det också med attributet FOR hänvisa till objekt. Formulärobjektet måste då ges en unik identitet med attributet ID. Sedan måste man ge attributet FOR i <LABEL> samma värde.
Detta märke gör det möjligt att gruppera elementen i listor och på så sätt skapa hierarkiska menyer eller listor i ett formulär. Märket ska stå inuti <SELECT> och ska ha ett eller flera <OPTION>-märken. <OPTGROUP> kan ha två attribut: LABEL, vilket anger texten som visas för gruppen, och DISABLED.
<H3>Vad föredrar du öl eller vin?</H3> <FORM ACTION="mailto:karlsson.robert@vetlanda.mail.telia.com" METHOD="POST" ENCTYPE="text/plain"> <SELECT NAME="svar" MULTIPLE SIZE=6> <OPTGROUP LABEL="vin"> <OPTION VALUE=1>Röda viner <OPTION VALUE=2>Vita viner <OPTION VALUE=3>Roséviner <OPTION VALUE=4>Mousserande <OPTION VALUE=5>Portviner <OPTION VALUE=6>Madeira </OPTGROUP> <OPTGROUP LABEL="ol"> <OPTION VALUE=7>Ljus lager <OPTION VALUE=8>Mörk lager <OPTION VALUE=9>Ale <OPTION VALUE=10>Porter/Stout <OPTION VALUE=11>Veteöl <OPTION VALUE=12>Lambic </OPTGROUP> </SELECT> </FORM>
| Varken Internet Explorer 4.0 har eller Netscape Navigator och inte heller Internet Explorer 5.0, som jag själv har som webbläsare, har stöd för <OPTGROUP>, och resultatet om det inte fungerar blir att webbläsaren struntar i <OPTGROUP>-märkena och visar en enda lång lista med alla elementen, i detta fall 12 stycken. Men tanken är att endast "Vin" och "Öl" skall visas i listan från början. Om man sedan för pekaren över "Vin" dyker det upp en undermeny med de 6 olika vingrupperna. |
Tanken är att det ska se ut på följande sätt:
| Först ser man bara en lista med bara vin och öl. | Om man sedan väljer vin dyker följande undermeny upp: | Väljer man istället öl dyker följande undermeny upp: |
Med det nya attributet DISABLED kan man göra ett formulärobjekt avstängt; det kan inte ändras och det kan inte få fokus. DISABLED kan användas i märkena <BUTTON>, <INPUT>, <OPTGROUP>, <OPTION>, <SELECT> och <TEXTAREA>
<FORM ACTION="mailto:karlsson.robert@vetlanda.mail.telia.com" METHOD="POST" ENCTYPE="text/plain"> <INPUT TYPE=CHECKBOX NAME="exempel" VALUE="exempel" CHECKED DISABLED>DISABLED-box </FORM>
För att skrivskydda ett textfält kan man ge attributet READONLY till <INPUT> eller <TEXTAREA>. Textfält av det slaget kan få fokus, men användaren kan inte ändra deras innehåll.
<FORM ACTION="mailto:karlsson.robert@vetlanda.mail.telia.com" METHOD="POST" ENCTYPE="text/plain"> <INPUT TYPE=TEXT NAME="namn" SIZE=20 VALUE="READONLY-textfält" READONLY> </FORM>
<FORM ACTION="mailto:karlsson.robert@vetlanda.mail.telia.com" METHOD="POST" ENCTYPE="text/plain"> <TEXTAREA NAME="text" ROWS=3 COLS=40 READONLY> Välkommen till min hemsida! </TEXTAREA> </FORM>
Detta attribut gör det möjligt att styra tabbordningen i ett formulär. TABINDEX kan förekomma i märkena <A>, <AREA>, <BUTTON>, <INPUT>, <OBJEKT> <SELECT> och <TEXTAREA>. Attributet ska ha en siffra som värde. När användaren trycker på tab-tangenten flyttar markören till det fält som har närmast högre värde på TABINDEX än det som markören för tillfället befinner sig i.
<FORM ACTION="mailto:karlsson.robert@vetlanda.mail.telia.com" METHOD="POST" ENCTYPE="text/plain"> <INPUT TYPE=TEXT NAME="text1" SIZE=20 TABINDEX=1>Först i ordningen<BR> <INPUT TYPE=TEXT NAME="text2" SIZE=20 TABINDEX=3>Trea i tabbordningen<BR> <INPUT TYPE=TEXT NAME="text3" SIZE=20 TABINDEX=5>Femma i tabbordningen<BR> <INPUT TYPE=TEXT NAME="text4" SIZE=20 TABINDEX=4>Fyra i tabbordningen<BR> <INPUT TYPE=TEXT NAME="text5" SIZE=20 TABINDEX=2>Tvåa i tabbordningen<BR> </FORM>
Det är inte nödvändigt att börja TABINDEX med 1, och det går bra att hoppa över tal. Det går bra att numrera TABINDEX-attributen med 5, 10, 15, 20 o.s.v. Detta gör det enklare att lägga in nya objekt i tabbordningen.
Detta attribut ger en snabbtangent till ett märke. Attributet ska ha ett tecken till värde. Det möjligör för användaren att hoppa till det aktuella märket genom att helt enkelt skriva tecknet på tangentbordet. Förmodligen måste man hålla ner någon annan tangent för att det ska fungera, exempelvis Alt-tangenten på PC eller kommandotangenten på MAC. ACCESSKEY kan förekomma i märkena <A>, <AREA>, <BUTTON>, <INPUT>, <OBJEKT> <SELECT> och <TEXTAREA>
<FORM ACTION="mailto:karlsson.robert@vetlanda.mail.telia.com" METHOD="POST" ENCTYPE="text/plain"> <INPUT TYPE=TEXT NAME="text1" SIZE=20 ACCESSKEY="a">Snabbtangent A<BR> <INPUT TYPE=TEXT NAME="text2" SIZE=20 ACCESSKEY="d">Snabbtangent D<BR> <INPUT TYPE=TEXT NAME="text3" SIZE=20 ACCESSKEY="h">Snabbtangent H<BR> <INPUT TYPE=TEXT NAME="text4" SIZE=20 ACCESSKEY="n">Snabbtangent N<BR> <INPUT TYPE=TEXT NAME="text5" SIZE=20 ACCESSKEY="t">Snabbtangent T<BR> </FORM>
För att gruppera formulärobjekt och göra ett formulär mer lättläst kan man använda sig av dessa attribut. Märket <FIELDSET> ska innehålla de objekt som ingår i gruppen. Märket har ett slutmärke </FIELDSET>, men har inga speciella attribut. Med märket <LEGEND> kan man ge en grupp formulärobjekt en rubrik. Märket har slutmärket </LEGEND> och ska innehålla rubriken. För att avgöra var rubriken ska visas ger man <LEGEND> attributet ALIGN. ALIGN kan ha värdena TOP, BOTTOM, LEFT och RIGHT, precis som attributet med samma namn i <CAPTION>. Det går bra att ha objektgrupper inuti andra objektgrupper. För att göra ett formulär ännu tydligare och lättläst, kan man använda sig av stylesheets, som då reglerar fontfärger, typsnitt och annat. Dessa märken, <FIELDSET> och <LEGEND>, är användbara för att underlätta för alla som inte läser formulär på vanligt sätt, t.ex för blinda som använder 'talande' eller punktskriftsstyrda webläsare.
<FORM ACTION="mailto:karlsson.robert@vetlanda.mail.telia.com"
METHOD="POST" ENCTYPE="text/plain">
<FIELDSET>
<LEGEND>Personuppgifter</LEGEND>
<LABEL>Namn: <INPUT TYPE=TEXT NAME="namn" SIZE=20>
</LABEL>
<LABEL>Adress: <INPUT TYPE=TEXT NAME="adress" SIZE=20>
</LABEL>
<LABEL>Postnr/Ort: <INPUT TYPE=TEXT NAME="ort" SIZE=20>
</LABEL>
<LABEL>Telefon: <INPUT TYPE=TEXT NAME="telefon" SIZE=20>
</LABEL>
<LABEL>E-post: <INPUT TYPE=TEXT NAME="mail" SIZE=20>
</LABEL>
</FIELDSET>
<FIELDSET>
<LEGEND></LEGEND>
<LABEL><INPUT TYPE=CHECKBOX NAME="expl" VALUE="expl" CHECKED>Internet Explorer
</LABEL>
<LABEL><INPUT TYPE=CHECKBOX NAME="nets" VALUE="nets">Netscape Navigator
</LABEL>
<LABEL><INPUT TYPE=CHECKBOX NAME="oper" VALUE="oper">Opera
</LABEL>
<LABEL><INPUT TYPE=CHECKBOX NAME="annan" VALUE="annan">Annan, ange vilken:
<INPUT TYPE=TEXT NAME="annan2" SIZE=20>
</LABEL>
</FIELDSET>
<FIELDSET>
<LEGEND>E-postprogram</LEGEND>
<LABEL><INPUT TYPE=CHECKBOX NAME="expr" VALUE="expr" CHECKED>Outlook Express
</LABEL>
<LABEL><INPUT TYPE=CHECKBOX NAME="out" VALUE="out">Outlook
</LABEL>
<LABEL><INPUT TYPE=CHECKBOX NAME="com" VALUE="com">Netscape Communicator
</LABEL>
<LABEL><INPUT TYPE=CHECKBOX NAME="eud" VALUE="eud">Eudora
</LABEL>
<LABEL><INPUT TYPE=CHECKBOX NAME="peg" VALUE="peg">Pegasus
</LABEL>
<LABEL><INPUT TYPE=CHECKBOX NAME="ann" VALUE="ann">Annan, ange vilken:
<INPUT TYPE=TEXT NAME="ann2" SIZE=20>
</LABEL>
</FIELDSET>
<FIELDSET>
<LEGEND>Surftid per månad i timmar</LEGEND>
<LABEL><INPUT TYPE=RADIO NAME="20" VALUE="20" CHECKED>0-20
</LABEL>
<LABEL><INPUT TYPE=RADIO NAME="40" VALUE="40">20-40
</LABEL>
<LABEL><INPUT TYPE=RADIO NAME="60" VALUE="60">40-60
</LABEL>
<LABEL><INPUT TYPE=RADIO NAME="80" VALUE="80">60-80
</LABEL>
<LABEL><INPUT TYPE=RADIO NAME="100" VALUE="100">80-100
</LABEL>
<LABEL><INPUT TYPE=RADIO NAME="mer" VALUE="mer">Mer än 100
</LABEL>
</FIELDSET>
</FORM>
Det här attributet skall användas för att filtrera bort icke-önskvärda filtyper. De värden som man anger till attributet är de olika filtyper som är acceptapla för <INPUT>-märket, eller vilka olika filtyper som ett formulär får skicka till ett program på en server, vars adress man i sin tur har definerat i <FORM>-elementet. De olika filerna (värdena) skall vara separerade med kommatecken. Ett exempel:
ACCEPT="image/gif,image/jpg"
ALT kan man använda sig av för att ge en alternativtext till ett formulärobjekt (precis som i IMG).
Detta är ett nytt attribut för <FORM>. Attributet ska innehålla en lista med alla teckentabeller som formulärets CGI-manus kan tolka, till exempel:
ACCEPT-CHARSET="USASCII, ISO-8859-1"
Klicka på knapparna för att backa tillbaka eller för att åtrvända till HTML-guidens startsida.
Denna sida är skriven av Robert Karlsson.
E-post: karlsson.robert@vetlanda.mail.telia.com
Hemsida: http://w1.383.telia.com/~u38302477
Sidan uppdaterades senast:
© Copyright 1999