1. Inledning

Upp

Vill du lära dig ännu mer än det jag skriver här, kan du ladda ner manualen till HTML 4.0. Den är bra på många sätt, men ganska svår att förstå. Du hittar den på http://www.w3.org/TR/REC-html40/.

Jag hoppas också att du inser att HTML 4.0 ännu inte blivit standard, trots att den antogs redan i december 1997. De flesta webläsare idag klarar bara av vissa av de nya elementen och deras attribut. Bli därför inte olycklig om inte alla de nya, fräcka funktionerna fungerar!

2. Nya funktioner i <INPUT>

Upp

• accept
• readonly
• disabled
• tabindex
• accesskey

accept

Det här attributet används för att filtrera bort icke-önskvärda filtyper. Värdena som anges till attributet är de olika filtyper som ett formulär får skicka till ett program på en server, vars adress i sin tur definierats i <FORM>-elementet. De olika filerna (värdena) skall vara separerade med kommatecken. Jag har ännu inte sett detta attribut användas, så jag är lite osäker på om och hur det fungerar i praktiken.

readonly

Används för att göra kontroller stumma, d.v.s för att förhindra att kontrollerna ändras av besökaren. Ett ikryssat fält kan alltså inte ändras om man skrivit t.ex

<INPUT type="checkbox" name="exempel_1" value="exempel_1" checked readonly>

Hur den stumma knappen kommer att se ut blir olika i olika webläsare, men jag gissar att den kommer att bli gråfärgad/skuggad. Här är exemplet igen, men klarar din webläsare av det?

Readonly-box

Vanlig box

OBS! readonly-attributet fungerar även i <TEXT>, <PASSWORD> och <TEXTAREA>!

disabled

Fungerar ungefär som 'readonly', men gör i stället så att en kontroll inte går att fylla i och inte heller kommer med när formuläret skickas. Visar troligen kontrollen eller fältet som gråfärgat/skuggat. Skrivs:

<INPUT type="checkbox" name="exempel_1" value="exempel_1" disabled>

Klarar din webläsare att visa detta på rätt sätt? Exempel:

Disabled-box

Vanlig box

OBS! disabled-attributet fungerar även i <BUTTON>, <OPTGROUP>, <OPTION>, <SELECT> och <TEXTAREA>!

tabindex

Detta attribut specificerar vilken tabulatorordning de olika fälten i ett formulär har. Det får finnas värden mellan noll och 32767. När du befinner dig i ett textfält och trycker på [Tab], hoppar cursorn till nästa fält. Med attributet kan man alltså definera vad som skall vara 'nästa' fält.

<INPUT type="text" name="Text_1" rows="1" cols="15" tabindex="1">

Klarar din webläsare att visa detta på rätt sätt? Exempel:

Första fältet

Tredje fältet

Andra fältet

OBS! tabindex-attributet fungerar även i <A>, <AREA>, <BUTTON>, <INPUT>, <OBJECT>, <TEXTAREA> och <SELECT>!

accesskey

Detta attribut används för att besökaren skall kunna fylla i formuläret med hjälp av tangentbordskommandon i stället för med musklick. En 'accesskey' är ett tecken ur den teckenuppsättning man använder. Med attributet kan man tilldela en 'accesskey' till ett element, d.v.s man kan skapa kortkommandon för olika fält. Ett textfält som fått bokstaven R som accesskey aktiveras när man trycker [Alt] + [R] (Windows) eller [Cmd] + [R] (Mac) på tangentbordet.

Man kan hjälpa besökaren att förstå vilken accesskey ett fält eller en kontroll har, genom att göra nyckelbokstäverna understrukna eller i fetstil. Skrivs då:

<INPUT type="checkbox" name="exempel_1" value="Bra" accesskey="B"></B>ra

Klarar din webläsare att visa detta på rätt sätt? Exempel:

Bra

Dåligt

OBS! accesskey-attributet fungerar även i <A>, <AREA>, <BUTTON>, <INPUT>, <LABEL>, <LEGEND> och <TEXTAREA>!

3. <BUTTON>

Upp

Detta är ett helt nytt element, som används på samma sätt som <INPUT>, men som ger lite större variation, genom att:

• Knapparna har annat utseende
• Knapparna går att fylla med innehåll

Knapparnas utseende förändras med attributet 'type':

• submit (=default) ger en submit-knapp.
• reset ger en reset-knapp.
• button är en ny funktion och ger en ny sorts knapp.

Exakt hur knapparna kommer att se ut är ännu för tidigt att säga. Jag gissar att submit- och reset-knapparna kommer att se en aning annorlunda ut, än om de skapats med <INPUT>.

Netscape 4.x och Explorer 4.x och 5.x klarar inte BUTTON-elementet och i Explorer visas dessutom en JÄTTESTOR knapp, som sträcker sig en bit ner på sidan. För att undvika sådana missöden måste man använda avslutningen </BUTTON>

<FORM>
<PRE>
<INPUT type="submit" name="exempel_1" value="Skicka"> Submit-knapp i INPUT
<BUTTON type="submit" name="exempel_2" value="Skicka"> Submit-knapp i BUTTON </BUTTON>
<BUTTON type="button" name="exempel_3" value="Skicka igen"> Button-knapp i BUTTON </BUTTON>
<BUTTON type="reset" name="exempel_4" value="Ångra"> Reset-knapp i BUTTON </BUTTON>
</PRE>
</FORM>

Så här blir det då i din webläsare:

 Submit-knapp i INPUT

 Submit-knapp i BUTTON 

 Button-knapp i BUTTON 

 Reset-knapp i BUTTON 

Knapparnas innehåll eller utseende kan förändras genom att man lägger in bilder inne i knapparna, snarare än, som jag visade på [förra sidan], att man byter ut knapparna med bilder. Man fyller så här:

<BUTTON type="submit" name="submit"><IMG src="Skicka.gif" alt="Skicka!"></BUTTON>

Man lägger alltså en bild inne i knappen, eller kanske rättare sagt, bilden förvandlas till en knapp. Jag vet inte hur stor bilden får vara, men det kanske säger sig självt. Jag använde i exemplet <IMG> trots att det inte rekommenderat (=deprecated) i HTML 4.0-standarden. Egentligen skall man använda <OBJECT> i stället; läs mer här. Då kan man också lägga in ett ljud, så att det låter när man trycker på knappen!

Till sist: attributen name, value, disabled och accesskey fungerar som för <INPUT> och därför tar jag inte upp dem här.

4. <OPTGROUP>

Upp

Det här elementet möjliggör gruppering av olika <OPTION>-kommandon i <SELECT>-menyn. Bra om man har väldigt långa rullgardinsmenyer: i stället för att man måste bläddra genom hela listan efter lämpligt alternativ, kan besökaren lättare få en överblick om alternativen är grupperade.

I HTML 4.0 får man inte väva in (=nest) olika <OPTGROUP> i varandra, utan måste avsluta ett element innan man börjar nästa. Så här skriver man:

<SELECT size="1" name="Välj disc i frisbeegolf">
<OPTGROUP label="Puttar och inspel">
<OPTION label="Aviar" value="Aviar">Aviar (Innova)
<OPTION label="Polecat" value="Polecat">Polecat (Innova)
<OPTION label="Boogie Eater" value="Boogie Eater">Boogie Eater (Mattel)
</OPTGROUP>

<OPTGROUP label="Långa inspel">
<OPTION label="Shark" value="Shark">Shark (Innova)
<OPTION label="Comet" value="Comet">Comet (Discraft)
<OPTION label="Magnet" value="Magnet">Magnet (Discraft)
<OPTION label="Upshot" value="Upshot">Upshot (Lightning)
</OPTGROUP>

<OPTGROUP label="Drivers">
<OPTION label="Viper" value="Viper">Viper (Innova)
<OPTION label="Cyclone" value="Cyclone">Cyclone (Discraft)
<OPTION label="Typhoon" value="Typhoon">Typhoon (Discraft)
</OPTGROUP>
</SELECT>

Detta skrivs innanför </FORM>-elementen, som vanligt. Så här blir resultatet:

Med <OPTGROUP> specificerar man alltså en grupp och med attributet 'label' ger man gruppen ett namn. Med samma attribut inne i <OPTION> ger man en individ i gruppen ett namn. När webläsaren hittar ett label-attribut, visar den det i en meny. Först letar den i <OPTION> och sedan i <OPTGROUP>. Anger man båda visas båda, men anger man 'label' bara i <OPTGROUP> visas bara denna. 'Label' fungerar alltså både som 'value' och som 'selected', om jag förstått saken rätt. Och 'label' används bara när man använder <OPTGROUP>. Hur många alternativ som skall visas samtidigt fixar man dock till med 'size'-attributet i <SELECT>, som vanligt.

Om din webläsare inte klarade av att tolka de nya elementen, är du kanske intresserad av att få reda på hur de visas? Ett bra sätt att illustrera det hela på är att jämföra med bokmärkesfilerna (='favoriterna') i din webläsare. Du har dem kanske sorterade i olika mappar, som har rubriker som 'Söktjänster', 'Spel', 'Sport', 'Nyheter', o.s.v. När du aktiverar rullgardinen med bokmärkena ser du namnen på mapparna, följda av en pil. Aktiverar du en mapp med en pil, skapas en ny lista, ett underbibliotek, med filerna i mappen. Ungefär så är det tänkt att <OPTGROUP> skall fungera, alltså ge en rullgardin med olika undermenyer.

5. <ISINDEX>

Upp

Detta är inget nytt element, utan tvärtom ett gammalt element som man rekommenderas att undvika i den nya HTML-standarden.Man har bestämt att <INPUT> skall vara ett ersättningsalternativ.

Tidigare användes <ISINDEX> för att skapa en enkelrads textyta, på vilken besökaren kunde skriva text, t.ex ett sökord. Med submit-funktionen inlagd i formuläret kunde sedan ett särskilt program anropas, som i sin tur returnerade i vilka dokument sökordet fanns. Det har emellertid funnits en hel del problem med hur <ISINDEX> har fungerat, som vilka tecken textraden kan/får innehålla och i vilken sorts dokument elementet kan/får skrivas. Därför har W3C nu alltså beslutat att elementet skall strykas och ersättas med <INPUT>. Med <INPUT> kan man ju också göra en enkelrads textyta. Du hittar mer information om detta på [förra sidan].

6. <LABEL>

Upp

När man pratar om formulär handlar det mycket om de så kallade kontrollerna, d.v.s knapparna och textfälten. Vissa av dessa kontroller har egna rubriker (labels), t.ex submit- och reset-knapparna. Dessa rubriker skapas av webläsaren automatiskt och man kan ändra namnet med attributet 'value'. Men andra kontroller saknar rubrik, vilket alltså betyder att webläsaren presenterar kontrollen som rubriklös, om man inte angett någon rubrik. Möjligheterna att styra detta är väldigt små i HTML 3.2, men i 4.0-standarden har det tillkommit ett nytt element: <LABEL>.

Jag visade ovan hur man använder label-attributet för att skapa rubriker i en rullgardinsmeny. <LABEL>-elementet används på ett liknande, men lite mer komplicerat sätt. Det ger nämligen inte bara kontroller ett namn, utan lägger dessutom också information till den. Som ett resultat av detta kan man t.ex göra så att en kontroll fylls i både om man klickar i en checkbox och på dess rubrik. Här är ett lätt exempel:

<LABEL>Med rubrik<INPUT type="checkbox" name="exempel_1" value="1"></LABEL>
Utan rubrik<INPUT type="checkbox" name="exempel_2" value="2">

Skrivs detta innanför <FORM>-elementen blir det:

När en kontroll står innanför <LABEL>, som <INPUT> gör i det första exemplet, associeras rubriken, d.v.s 'Med rubrik', med kontrollen. I exemplet står rubriken före kontrollen och visas då före också i webläsaren, men rubriken kan också stå efter, om man vill att den skall visas efter kontrollen.

Här är ett lite mer komplicerat exempel:

<LABEL for="f_namn">Förnamn:</LABEL>
<INPUT type="text" name="förnamn" id="f_namn">
<LABEL for="e_namn">Efternamn:</LABEL>
<INPUT type="text" name="efternamn" id="e_namn">
</FORM>

Som skrivs innanför <FORM>-elementen och blir:

Här befinner sig kontrollen utanför <LABEL> och för att webläsaren skall veta vilken rubrik som hör till en viss kontroll, använder man sig av två olika attribut: for i <LABEL> och id i det element man använder för kontrollen (i exemplet var det <INPUT>).

7. <FIELDSET> och <LEGEND>

Upp

De här ganska obskyra elementen används framförallt 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. <FIELDSET> används för att gruppera kontroller och deras rubriker, så att ett formulär blir mer lättläst och <LEGEND> skapar en (slags) rubrik för ett FIELDSET.

Nedan återger jag bara ett exempel från specifikationen till HTML 4.0, kapitel 17.10, sidan 226-27. Det är ett formulär man kan tänkas behöva fylla i hos en virtuell doktor. W3C påpekar också att ett sådant här formulär kan göras ännu tydligare med hjälp av stylesheets, som då reglerar fontfärger, typsnitt och annat.

<FORM action="..." method="post">
<FIELDSET>
<LEGEND>Personal Information</LEGEND>
Last Name: <INPUT name="personal_lastname" type="text" tabindex="1">
First Name: <INPUT name="personal_firstname" type="text" tabindex="2">
Address: <INPUT name="personal_address" type="text" tabindex="3">

...more personal information...
</FIELDSET>

<FIELDSET>
<LEGEND>Medical History</LEGEND>
<INPUT name="history_illness" type="checkbox" value="Smallpox" tabindex="20"> Smallpox
<INPUT name="history_illness" type="checkbox" value="Mumps" tabindex="21"> Mumps
<INPUT name="history_illness" type="checkbox" value="Dizziness" tabindex="22"> Dizziness
<INPUT name="history_illness" type="checkbox" value="Sneezing" tabindex="23"> Sneezing

...more medical history...
</FIELDSET>

<FIELDSET>
<LEGEND>Current Medication</LEGEND>
Are you currently taking any medication?
<INPUT name="medication_now" type="radio" value="Yes" tabindex="35">Yes
<INPUT name="medication_now" type="radio" value="No" tabindex="35">No

If you are currently taking medication, please indicate it in the space below:

<TEXTAREA name="current_medication" rows="20" cols="50" tabindex="40">
</TEXTAREA>
</FIELDSET>
</FORM>

Som blir följande: