HTML © Eva von Pepel

* [ HTML-referensbok ] * [ Referensböcker ] *

Formulär

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

Controlgrupper <FIELDSET></FIELDSET>

Markeras: <FIELDSET></FIELDSET> - båda obligatoriska

Får innehålla: #PCDATA, LEGEND som kan följas av blockelement, inlineelement

Får finnas i: APPLET (T), BLOCKQUOTE, BODY, CENTER (T), DD, DEL, DIV, FIELDSET, FORM, IFRAME (T), INS, LI, MAP, NOFRAMES (F), NOSCRIPT, OBJECT, TD, TH

OBS! Detta avsnitt bör läsas tillsammans med det efterföljande avsnittet LEGEND.

Med FIELDSET kan du tematiskt gruppera relaterade controls och etiketter och på så sätt dela upp ett stort formulär i mindre delar som är lättare att hantera och samtidigt förbättra dokumentets tillgänglighet. Det senare är speciellt viktigt för användare av icke visuella www-klienter. För användare av visuella www-klienter kan du separera de olika sektionerna genom att med hjälp av stilmallar presentera de, till exempel, i olika färger.

Elementet introducerades först i HTML 4.0, därför är inte dess stöd (än så länge) utbrett. Då ej stödda element (taggar) ignoreras medan deras innehåll visas kan du ändå använda elementet. Tänk på att FIELDSET är ett blockelement och för att få www-klienter som inte stödjer det att presentera de olika sektionerna som block, måste du strukturera det som ett sådant. IE 4.0 ramar in varje FIELDSET-grupp.

Attribut

HTML 4.0 och HTML 4.0 TransitionalHTML 3.2

%attrs;
Beskrivs i HTML 4.0 - Attribut

Elementet saknas

Det första elementet som följer FIELDSET ska vara LEGEND.

Controlgruppers namn <LEGEND></LEGEND>

Markeras: <LEGEND></LEGEND> - båda obligatoriska

Får innehålla: inlineelement

Får finnas i: FIELDSET

Med LEGEND associerar du en etikett med controlgruppen som FIELDSET skapar och på så sätt förbättras sektionernas tillgänglighet, speciellt i icke visuella www-klienter. OBS! Blanda inte ihop LEGEND med LABEL. LABEL används för att "etikettera" en control medan LEGEND fungerar på samma sätt som tabellens CAPTION-element.

Attribut

HTML 4.0HTML 4.0 TransitionalHTML 3.2
%attrs;
ACCESSKEY=%Character

Samma som i HTML 4.0 
plus
ALIGN=top|bottom|
      left|right

Elementet 
saknas

%attrs;

Beskrivs i HTML 4.0 - Attribut

ACCESSKEY

Se INPUT

ALIGN (T)

Nedskrivet atribut. Kan användas till att specificera etikettens position i förhållande till gruppblocket. Tillåtna värden är top (standardvärde), bottom, left och right.

Exempel

I följande exempel använder jag:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> 

<HTML>
<HEAD>
<TITLE>Beställningsformulär</TITLE>
<STYLE TYPE="text/css">
<!--
.ak {background: black; color: white}
.center {text-align: center}
-->
</STYLE>
</HEAD>

<BODY>
<H1 class=center>Beställningsformulär</H1>
<FORM METHOD=post ACTION="...">
<P><INPUT type=hidden name=recipient value="...">

<FIELDSET>
<LEGEND ACCESSKEY=K><strong>
<SPAN CLASS=ak>K</SPAN>undinformation:</strong>
</LEGEND>
<PRE>
<LABEL ACCESSKEY=N>Namn: <INPUT TYPE=text NAME=realname></LABEL>
<LABEL ACCESSKEY=E>Epost:<INPUT TYPE=text NAME=email></LABEL>
<LABEL ACCESSKEY=F>Fax: <INPUT TYPE=text NAME=fax></LABEL>
</PRE>
</FIELDSET>

<FIELDSET>
<LEGEND ACCESSKEY=B><strong><SPAN CLASS=ak>B</SPAN>eställning av:</strong></LEGEND>

<P>Jag vill beställa följande böcker ur KnowWareserien:</P> 

<DIV STYLE="float: left; width: 33%">
<FIELDSET>
<LEGEND ACCESSKEY=H><strong>Know<SPAN
 CLASS=ak>H</SPAN>ow</strong></LEGEND>
<SELECT NAME=KnowHow>
<OPTION>HTML referensquide</OPTION>
<OPTION>Stilmallar</OPTION>
<OPTION>Tabeller i HTML</OPTION>
</SELECT>
</FIELDSET>
</DIV>

<DIV STYLE="float: left; width: 33%">
<FIELDSET><LEGEND ACCESSKEY=Q><strong><SPAN
 CLASS=ak>Q</SPAN>uickSteps</strong>
</LEGEND>
<SELECT NAME=QuickSteps>
<OPTION>Outlook</OPTION>
<OPTION>InternetChat</OPTION>
<OPTION>Explorer</OPTION>
</SELECT>
</FIELDSET>
</DIV>

<DIV STYLE="float: left; width: 33%">
<FIELDSET><LEGEND
 ACCESSKEY=S><strong><SPAN
 CLASS=ak>S</SPAN>kolböcker</strong>
</LEGEND>
<SELECT NAME="Skolböcker">
<OPTION>TextbehA</OPTION>
<OPTION>TextbehB</OPTION>
<OPTION>TextbehC</OPTION>
</SELECT>
</FIELDSET>
</DIV>
</FIELDSET>

<FIELDSET> 
<LEGEND ACCESSKEY=R><strong>K<SPAN
 CLASS=ak>r</SPAN>editKort</strong>
</LEGEND> 
<P class=center>
<LABEL ACCESSKEY=V> 
<INPUT TYPE=radio NAME=kk VALUE=visa><SPAN
 CLASS=ak>V</SPAN>isa</LABEL> 
<LABEL ACCESSKEY=M> 
<INPUT TYPE=radio NAME=kk VALUE=mc>
 <SPAN CLASS=ak>M</SPAN>asterCard
</LABEL><BR> 
<LABEL ACCESSKEY=N>
 <SPAN CLASS=ak>N</SPAN>ummer: 
<INPUT TYPE=text NAME=number>
</LABEL>
</P>
</FIELDSET> 

<P class=center>
<INPUT TYPE=submit VALUE="Beställ"> 
<INPUT TYPE=reset VALUE="Radera"> 
</P>
</FORM>

</BODY>
</HTML>

Så ser ett sådant formulär ut i verkligheten.

Upp | HTML-referensbok | Referensböcker

Valid HTML 4.0 dok. http://vonpepel.com/ref/ - Senaste uppdatering 10 september 1998