17 Moduli

17.1 Introduzione ai moduli (form)

Un modulo HTML consiste in una sezione di un documento che contiene contenuto normale, marcature, elementi speciali detti controlli (quadratini, pulsanti basculanti, menù ecc.), ed etichette per tali controlli. Di solito l'utente "compila" un modulo modificandone i controlli (introducendo del testo, selezionando elementi di menù, ecc.), prima di passare il modulo ad un programma di elaborazione (ad es. ad un server Web, ad un server di posta, ecc.)

 <FORM action="http://somesite.com/prog/adduser" method="post">
    <P>
    <LABEL for="firstname">Nome: </LABEL>
              <INPUT type="text" id="firstname"><BR>
    <LABEL for="lastname">Cognome: </LABEL>
              <INPUT type="text" id="lastname"><BR>
    <LABEL for="email">email: </LABEL>
              <INPUT type="text" id="email"><BR>
    <INPUT type="radio" name="sex" value="Uomo"> Uomo<BR>
    <INPUT type="radio" name="sex" value="Donna"> Donna<BR>
    <INPUT type="submit" value="Invia"> <INPUT type="reset">
    </P>
 </FORM>

17.2 Controlli

Gli utenti interagiscono con i moduli mediante i cosiddetti controlli.

Il "nome di controllo" di un controllo, è dato dal suo attributo name. Lo scopo dell'attributo name per un controllo con un elemento FORM, è l'elemento FORM.

Ogni controllo ha sia un valore iniziale che uno corrente; entrambi sono stringhe di caratteri. Si prega di consultare le definizioni di ogni controllo per informazioni sui valori iniziali e le eventuali restrizioni imposte dal controllo. In generale il "valore iniziale" di un controllo può essere indicato con l'attributo value dell'elemento di controllo. Tuttavia, il valore iniziale di un elemento TEXTAREA è dato dal suo contenuto ed il valore iniziale di un elemento OBJECT contenuto in un modulo è determinato dall'implementazione dell'oggetto (ciò esula dallo scopo di queste specifiche).

Il "valore attuale" del controllo all'inizio è impostato al valore iniziale. In seguito il valore attuale del controllo può essere modificato mediante interazione dell'utente e dagli script.

Il valore iniziale di un controllo non cambia. Così, quando un modulo viene azzerato, il valore attuale di ogni controllo viene riportato al suo valore iniziale. Se un controllo non ha un valore iniziale, riazzerando il modulo su quel controllo, si ha un effetto indefinito.

Quando un modulo viene inviato per l'elaborazione, i nomi di alcuni controlli vengono accoppiati ai loro valori attuali e queste coppie vengono inoltrate assieme al modulo. Quei controlli per cui vengono inoltrate coppie nome/valore sono chiamati controlli a buon esito.

17.2.1Tipi di controlli

L'HTML definisce i seguenti tipi di controlli:

pulsanti

Gli autori possono creare tre tipi di pulsanti:

• pulsante d'invio: quando è attivato, un pulsante d'invio invia un modulo. Un modulo può contenere più d'un pulsante d'invio.
• pulsante d'azzeramento: quando è attivato, un pulsante d'azzeramento riporta tutti i controlli ai loro valori iniziali.
• pulsante a pressione: i pulsanti a pressione non hanno un comportamento predefinito. Ogni pulsante a pressione può avere degli script sul lato cliente associati con l'attributo eventi dell'elemento. Quando si verifica un evento (ad es. quando l'utente preme quel pulsante, lo rilascia, ecc.), si attiva lo script associato.

  Gli autori dovrebbero indicare il linguaggio in cui è scritto lo script di un pulsante a pressione mediante una dichiarazione predefinita di script (con l'elemento META).

Gli autori possono creare pulsanti con l'elemento BUTTON o con l'elemento INPUT. Si prega di leggere le definizioni di tali elementi per dettagli sulle specifiche differenze tra i tipi di pulsanti.

Nota. Gli autori tengano presente che l'elemento BUTTON offre possibilità di rappresentazione più ricche dell'elemento INPUT.

quadratini

I quadratini (ed i pulsanti basculanti) sono interruttori di tipo acceso/spento (on/off) che possono essere attivati dall'utente. Un interruttore è "acceso" (on) quando è attivato l'attributo selected.

Quando si invia un modulo, solo i quadratini "accesi" (on) possono avere buon esito. In un modulo, quadratini diversi possono condividere lo stesso nome di controllo. Perciò, ad esempio, i quadratini consentono agli utenti di selezionare diversi valori per la stessa proprietà. Per creare un controllo di tipo quadratino si usa l'elemento INPUT.

pulsanti basculanti

I pulsanti basculanti sono simili ai quadratini, solo che quando ce ne sono diversi che condividono lo stesso nome di controllo, essi si escludono a vicenda: quando uno è acceso (on), tutti gli altri con lo stesso nome sono in posizione spenta (off). Per creare un controllo di tipo pulsante basculante si usa l'elemento INPUT.

menù

I menù offrono agli utenti la scelta tra alcune opzioni. L'elemento SELECT crea un menù, in combinazione con gli elementi OPTGROUP ed OPTION.

immissione di testo

Gli autori possono creare due tipi di controlli che consentono agli utenti di inserire del testo. L'elemento INPUT crea un controllo dove inserire una sola riga e l'elemento TEXTAREA crea un controllo dove inserire più righe. In entrambi i casi il testo immesso diventa il valore attuale del controllo.

selezione di file

Questo tipo di controllo consente all'utente di scegliere dei file in modo che il loro contenuto possa essere inviato con un modulo. Per creare un controllo di tipo selezione di file si usa l'elemento INPUT.

controlli nascosti

Gli autori possono creare controlli che non compaiono ma i cui valori vengono inoltrati con il modulo. In genere gli autori usano questo tipo di controllo per memorizzare gli scambi di informazioni tra il client ed il server, che altrimenti sarebbero perse, poiché l'HTTP non è regolato da nessuno (vedere [RFC2068]). Per creare un controllo nascosto si usa l'elemento INPUT.

controlli di oggetti

Gli autori possono inserire nei moduli oggetti generici, in modo che i valori loro associati vengano inoltrati insieme agli altri controlli. I controlli di oggetti si creano con l'elemento OBJECT.

Gli elementi usati per creare dei controlli in genere compaiono dentro un elemento FORM, ma possono pure comparire al di fuori di una dichiarazione di elemento FORM, quando sono usati per costruire interfacce per l'utente. Di questo si parla nel paragrafo sugli eventi intrinseci. Bisogna notare che i controlli che si trovino fuori da un modulo non possono mai essere controlli a buon esito.

17.3 L'elemento FORM

<!ELEMENT FORM -- (%block;|SCRIPT)+ -(FORM) -- modulo
interattivo -->
<!ATTLIST FORM  %attrs;                -- %coreattrs, %i18n, %events --
  action      %URI;          #REQUIRED -- elaboratore del modulo sul server --
  method      (GET|POST)     GET       -- metodo HTTP per inviare il modulo --
  enctype     %ContentType; "application/x-www-form-urlencoded"
  onsubmit    %Script;       #IMPLIED  -- il modulo è stato inviato --
  onreset     %Script;       #IMPLIED  -- il modulo è stato azzerato --
  accept-charset %Charsets;  #IMPLIED  -- lista delle codifiche di caratteri supportati --
  >

Tag iniziale: richiesto, Tag finale: richiesto

L'elemento FORM funziona da contenitore per i controlli. Esso specifica:

• La configurazione del modulo (dato dal contenuto dell'elemento).
• Il programma che gestirà il modulo compilato ed inviato (l'attributo action). Il programma ricevente dev'essere abilitato all'analisi delle coppie nome/valore, per poterle usare.
• Il metodo con cui i dati dell'utente saranno inviati al server (l'attributo method).
• Una codifica di caratteri, che dev'essere accettata dal server per gestire questo modulo (l'attributo accept-charset). Gli interpreti HTML possono avvisare l'utente sul valore dell'attributo accept-charset e/o limitare la possibilità per l'utente di inserire caratteri non riconosciuti.

Un modulo può contenere testo e marcature (paragrafi, elenchi, ecc.) oltre ai controlli del modulo.

 <FORM action="http://somesite.com/prog/adduser" method="post">
 ...contenuto del modulo...
 </FORM>

 <FORM action="mailto:Kligor.T@gee.whiz.com" method="post">
 ...contenuto del modulo...
 </FORM>

Si prega di consultare il paragrafo sull'invio dei moduli per avere informazioni su come gli interpreti devono preparare i dati dei moduli per i server e come devono gestire le risposte previste.

17.4 L'elemento INPUT

<!ENTITY % InputType
  "(TEXT | PASSWORD | CHECKBOX |
    RADIO | SUBMIT | RESET |
    FILE | HIDDEN | IMAGE | BUTTON)"
   >

<!-- nome attributo richiesto per tutti tranne per l'invio e l'azzeramento -->
<!ELEMENT INPUT - O EMPTY             -- controllo del modulo -->
<!ATTLIST INPUT  %attrs;              -- %coreattrs, %i18n, %events --
  type        %InputType;    TESTO    -- tipo di 'widget' che occorre --
  name        CDATA          #IMPLIED -- invia come parte del modulo --
  value       CDATA          #IMPLIED -- richiesto per pulsanti basculanti e quadratini --
  checked     (attivato)     #IMPLIED -- per pulsanti basculanti e quadratini --
  disabled    (disabilitato) #IMPLIED -- indisponibile in tale contesto --
  readonly    (sola lettura) #IMPLIED -- per testo e password --
  size        CDATA          #IMPLIED -- specifico d'ogni tipo di campo --
  maxlength   NUMERO         #IMPLIED -- numero max di caratteri per campi di testo --
  src         %URI;          #IMPLIED -- per campi con immagini --
  alt         CDATA          #IMPLIED -- breve descrizione --
  usemap      %URI;          #IMPLIED -- usa mappa sensibile sul lato cliente --
  tabindex    NUMERO         #IMPLIED -- posizione nell'ordine di tabulazione --
  accesskey   %Character;    #IMPLIED -- tasto di scelta rapida per l'accessibilità --
  onfocus     %Script;       #IMPLIED -- l'elemento ha ricevuto il focus --
  onblur      %Script;       #IMPLIED -- l'elemento ha perso il focus --
  onselect    %Script;       #IMPLIED -- è stato selezionato del testo --
  onchange    %Script;       #IMPLIED -- il valore dell'elemento è stato modificato --
  accept      %ContentTypes; #IMPLIED -- lista di tipi di MIME per caricamento dei file --
  >

Tag iniziale: richiesto, Tag finale: proibito

17.4.1 Tipi di controlli creati con INPUT

Il tipo di controllo definito dall'elemento INPUT dipende dal valore dell'attributo type:

text

Crea un controllo per l'immissione di testo di una sola riga.

password

Come per "text", solo che il testo inserito è presentato in maniera tale da nascondere i caratteri (ad es., una serie di asterischi). Questo tipo di controllo spesso viene usato per inserire stringhe delicate come le password. Attenzione, perché il valore corrente è il testo immesso dall'utente, non quello presentato dall'interprete.

Nota. Chi crea applicazioni tenga presente che questa tecnica offre solo una leggera protezione. Sebbene l'interprete HTML nasconda la password da occhi indiscreti, essa viene trasmessa al server in modo trasparente come testo e può essere letta da chiunque abbia un accesso a basso livello alla rete.

checkbox

Crea un quadratino.

radio

Crea un pulsante basculante.

submit

Crea un pulsante d'invio.

image

Crea un pulsante d'invio grafico. Il valore dell'attributo src specifica l'URI dell'immagine che decorerà il pulsante. Per agevolare l'accessibilità gli autori dovrebbero offrire un testo alternativo per l'immagine mediante l'attributo alt.

Quando si usa un dispositivo di puntamento per cliccare sull'immagine, il modulo viene inoltrato e le coordinate del clic vengono passate al server. Il valore di x si misura in pixel a partire dalla sinistra dell'immagine ed il valore di y in pixel a partire dal vertice dell'immagine. I dati inoltrati contengono name.x=x-value e name.y=y-value, dove "name" è il valore dell'attributo name, x-value ed y-value sono, rispettivamente, i valori delle coordinate x ed y.

Se il server esegue operazioni differenti a seconda della locazione del clic, gli utenti di interpreti non grafici saranno svantaggiati. Per questo motivo gli autori dovrebbero considerare degli approcci alternativi:

• Usare pulsanti d'invio multipli (ciascuno con la propria immagine) al posto di un solo pulsante d'invio grafico. Gli autori possono usare fogli di stile per controllare il posizionamento di questi pulsanti;
• usare una mappa sensibile sul lato client assieme agli scripting.

reset

Crea un pulsante d'azzeramento.

button

Crea un pulsante a pressione. Gli interpreti dovrebbero usare il valore dell'attributo value come etichetta del pulsante.

hidden

Crea un controllo nascosto.

file

Crea un controllo per la selezione di file. Gli interpreti possono usare il valore dell'attributo value come nome iniziale del file.

17.4.2 Esempi di moduli contenenti controlli INPUT

 <FORM action="http://somesite.com/prog/adduser" method="post">
    <P>
    Nome: <INPUT type="text" name="nome"><BR>
    Cognome: <INPUT type="text" name="cognome"><BR>
    email: <INPUT type="text" name="email"><BR>
    <INPUT type="radio" name="sex" value="Maschio"> Maschio<BR>
    <INPUT type="radio" name="sex" value="Femmina"> Femmina<BR>
    <INPUT type="submit" value="Invia"> <INPUT type="reset">
    </P>
 </FORM>

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

<FORM action="http://server.dom/cgi/handle"
    enctype="multipart/form-data"
    method="post">
 <P>
 Come ti chiami? <INPUT type="text" name="name_of_sender">
 Quali file vuoi mandare? <INPUT type="file" name="name_of_files">
 </P>
</FORM>

17.5 L'elemento BUTTON

<!ELEMENT BUTTON - -
     (%flow;)* -(A|%formctrl;|FORM|FIELDSET)    -- pulsante a pressione -->
<!ATTLIST BUTTON
  %attrs;                             -- %coreattrs, %i18n, %events --
  name        CDATA          #IMPLIED
  value       CDATA          #IMPLIED -- spedito al server quando inviato --
  type        (button|submit|reset) submit -- per uso come pulsante del modulo --
  disabled    (disabled)     #IMPLIED -- indisponibile in tale contesto --
  tabindex    NUMBER         #IMPLIED -- posizione nell'ordine di tabulazione --
  accesskey   %Character;    #IMPLIED -- tasto di scelta rapida per accessibilità --
  onfocus     %Script;       #IMPLIED -- l'elemento ha ricevuto il focus --
  onblur      %Script;       #IMPLIED -- l'elemento ha perso il focus --
  >

Tag iniziale: richiesto, Tag finale: richiesto

I pulsanti creati con l'elemento BUTTON funzionano proprio come quelli creati con l'elemento INPUT, solo che i primi offrono possibilità più ampie di rappresentazione: l'elemento BUTTON può avere del contenuto. Per esempio, un elemento BUTTON che contenga un'immagine funziona allo stesso modo di un elemento INPUT in cui type sia stato impostato su "image" (immagine), solo che il tipo di elemento BUTTON ammette la presenza di un contenuto.

Gli interpreti visuali possono rappresentare i pulsanti BUTTON in rilievo e con un movimento su/giù quando si fa clic su di essi, mentre possono rappresentare i pulsanti INPUT come immagini "piatte".

 <FORM action="http://somesite.com/prog/adduser" method="post">
    <P>
    Nome: <INPUT type="text" name="firstname"><BR>
    Cognome: <INPUT type="text" name="lastname"><BR>
    email: <INPUT type="text" name="email"><BR>
    <INPUT type="radio" name="sex" value="Uomo"> Uomo<BR>
    <INPUT type="radio" name="sex" value="Donna"> Donna<BR>
    <BUTTON name="submit" value="submit" type="submit">
    Invia<IMG src="/icons/wow.gif" alt="wow"></BUTTON>
    <BUTTON name="reset" type="reset">
    Azzera<IMG src="/icons/oops.gif" alt="oops"></BUTTON>
    </P>
 </FORM>

Ricordate che gli autori devono offrire un testo sostitutivo per ogni elemento IMG.

Non è corretto associare una mappa sensibile con un IMG che compare come contenuto di un elemento BUTTON.

<BUTTON>
<IMG src="foo.gif" usemap="...">
</BUTTON>

17.6 Gli elementi SELECT, OPTGROUP ed OPTION

<!ELEMENT SELECT - - (OPTGROUP|OPTION)+ -- selezione opzioni -->
<!ATTLIST SELECT
  %attrs;                             -- %coreattrs, %i18n, %events --
  name        CDATA          #IMPLIED -- nome del campo --
  size        NUMERO         #IMPLIED -- righe visibili --
  multiple    (multiplo)     #IMPLIED -- è predefinito su selezione singola --
  disabled    (disabilitato) #IMPLIED -- indisponibile in tale contesto --
  tabindex    NUMERO         #IMPLIED -- posizione nell'ordine di tabulazione --
  onfocus     %Script;       #IMPLIED -- l'elemento ha ricevuto il focus --
  onblur      %Script;       #IMPLIED -- l'elemento ha perso il focus --
  onchange    %Script;       #IMPLIED -- il valore dell'elemento è stato modificato --
  >

Tag iniziale: richiesto, Tag finale: richiesto

L'elemento SELECT crea un menù. Ogni scelta offerta dal menù è rappresentata da un elemento OPTION. Un elemento SELECT deve contenere almeno un elemento OPTION.

L'elemento OPTGROUP permette agli autori di raggruppare le scelte in modo logico. Ciò è particolarmente utile quando l'utente deve scegliere in una lunga lista di opzioni; i gruppi di scelte affini sono più facili da capire e ricordare di un solo lungo elenco di opzioni. Nell'HTML 4.0 tutti gli elementi OPTGROUP devono essere indicati direttamente all'interno di un elemento SELECT (cioè, i gruppi non possono essere annidati).

17.6.1 Opzioni preselezionate

Zero o più scelte potrebbero essere pre-selezionate per l'utente. Gli interpreti HTML devono determinare quali scelte sono pre-selezionate come segue:

• Se nessun elemento OPTION ha l'attributo selected impostato, nessuna opzione dovrebbe essere pre-selezionata.
• Se un elemento OPTION ha l'attributo selected impostato, esso dovrebbe essere pre-selezionato.
• Se l'elemento SELECT ha l'attributo multiple impostato e più di un elemento OPTION ha l'attributo selected impostato, essi dovrebbero essere tutti pre-selezionati.
• E' ritenuto un errore se più di un elemento OPTION abbia l'attributo selected impostato e l'elemento SELECT non abbia l'attributo multiple impostato. Gli interpreti possono variare il modo di gestire questo errore, ma non dovrebbero pre-selezionare più d'una scelta.

<!ELEMENT OPTGROUP - - (OPTION)+ -- gruppo d'opzioni -->
<!ATTLIST OPTGROUP
  %attrs;                              -- %coreattrs, %i18n, %events --
  disabled    (disabilitato) #IMPLIED  -- indisponibile in tale contesto --
  label       %Text;         #REQUIRED -- da usare in menù gerarchici --
  >

Tag iniziale: richiesto, Tag finale: richiesto

<!ELEMENT OPTION - O (#PCDATA)        -- scelta selezionabile -->
<!ATTLIST OPTION
  %attrs;                             -- %coreattrs, %i18n, %events --
  selected    (selezionato)  #IMPLIED
  disabled    (disabilitato) #IMPLIED -- indisponibile in tale contesto --
  label       %Text;         #IMPLIED -- da usare in menù gerarchici --
  value       CDATA          #IMPLIED -- predefinito sul contenuto dell'elemento --
  >

Tag iniziale: richiesto, Tag finale: facoltativo

Quando viene presentata una scelta a menù, gli interpreti dovrebbero usare come scelta il valore dell'attributo label dell'elemento OPTION. Se questo attributo non è specificato, gli interpreti dovrebbero usare il contenuto dell'elemento OPTION.

L'attributo label dell'elemento OPTGROUP indica l'etichetta per un gruppo di scelte.

<FORM action="http://somesite.com/prog/component-select" method="post">
   <P>
   <SELECT multiple size="4" name="component-select">
      <OPTION selected value="Component_1_a">Componente_1</OPTION>
      <OPTION selected value="Component_1_b">Componente_2</OPTION>
      <OPTION>Componente_3</OPTION>
      <OPTION>Componente_4</OPTION>
      <OPTION>Componente_5</OPTION>
      <OPTION>Componente_6</OPTION>
      <OPTION>Componente_7</OPTION>
   </SELECT>
   <INPUT type="submit" value="Invia"><INPUT type="reset">
   </P>
</FORM>

<FORM action="http://somesite.com/prog/someprog" method="post">
 <P>
 <SELECT name="ComOS">
     <OPTGROUP label="PortMaster 3">
       <OPTION label="3.7.1" value="pm3_3.7.1">PortMaster 3 con
ComOS 3.7.1
       <OPTION label="3.7" value="pm3_3.7">PortMaster 3 con
ComOS 3.7
       <OPTION label="3.5" value="pm3_3.5">PortMaster 3 con
ComOS 3.5
     </OPTGROUP>
     <OPTGROUP label="PortMaster 2">
       <OPTION label="3.7" value="pm2_3.7">PortMaster 2 con
ComOS 3.7
       <OPTION label="3.5" value="pm2_3.5">PortMaster 2 con
ComOS 3.5
     </OPTGROUP>
     <OPTGROUP label="IRX">
       <OPTION label="3.7R" value="IRX_3.7R">IRX con ComOS 3.7R
       <OPTION label="3.5R" value="IRX_3.5R">IRX con ComOS 3.5R
     </OPTGROUP>
 </SELECT>
</FORM>

  PortMaster 3
      3.7.1
      3.7
      3.5
  PortMaster 2
      3.7
      3.5
  IRX
      3.7R
      3.5R

17.7 L'elemento TEXTAREA

<!ELEMENT TEXTAREA - - (#PCDATA)       -- campo di testo a più righe -->
<!ATTLIST TEXTAREA
  %attrs;                              -- %coreattrs, %i18n, %events --
  name        CDATA          #IMPLIED
  rows        NUMERO         #REQUIRED
  cols        NUMERO         #REQUIRED
  disabled    (disabilitato) #IMPLIED -- indisponibile in tale contesto --
  readonly    (sola lettura) #IMPLIED
  tabindex    NUMERO         #IMPLIED -- posizione nell'ordine di tabulazione --
  accesskey   %Character;    #IMPLIED -- tasto di scelta rapida per accessibilità --
  onfocus     %Script;       #IMPLIED -- l'elemento ha ricevuto il focus --
  onblur      %Script;       #IMPLIED -- l'elemento ha perso il focus --
  onselect    %Script;       #IMPLIED -- è stato selezionato del testo --
  onchange    %Script;       #IMPLIED -- il valore dell'elemento è stato modificato --
  >

Tag iniziale: richiesto, Tag finale: richiesto

L'elemento TEXTAREA crea un controllo d'immissione di testo multilinea. Gli interpreti dovrebbero usare il contenuto di questo elemento come valore iniziale del controllo e inizialmente dovrebbero presentare tale testo.

<FORM action="http://somesite.com/prog/text-read" method="post">
   <P>
   <TEXTAREA name="thetext" rows="20" cols="80">
   Prima riga di testo iniziale.
   Seconda riga di testo iniziale.
   </TEXTAREA>
   <INPUT type="submit" value="Invia"><INPUT type="reset">
   </P>
</FORM>

17.8 L'elemento ISINDEX

ISINDEX è disapprovato. Questo elemento crea un controllo d'immissione di testo a riga singola. Gli autori dovrebbero usare l'elemento INPUT per creare dei controlli per l'immissione di testo.

Vedere la DTD transitoria per la definizione formale.

L'elemento ISINDEX crea un controllo d'immissione di testo a riga singola che ammette un qualunque numero di caratteri. Gli interpreti possono usare il valore dell'attributo prompt come titolo per il prompt.

<ISINDEX prompt="Scrivi l'espressione da cercare: ">

<FORM action="..." method="post">
<P>Scrivi l'espressione da cercare: <INPUT type="text"></P>
</FORM>

17.9 Etichette

Alcuni controlli di moduli (pulsanti a pressione) hanno associate delle etichette, mentre molti altri no (campi di testo, quadratini e pulsanti basculanti, e menù).

Per quei controlli che hanno implicite etichette, gli interpreti HTML dovrebbero usare come stringa dell'etichetta il valore dell'attributo value.

L'elemento LABEL è usato per specificare etichette per i controlli che non ne hanno in maniera implicita.

17.9.1 L'elemento LABEL

<!ELEMENT LABEL - - (%inline;)* -(LABEL) -- testo per etichette del campo del modulo -->
<!ATTLIST LABEL
  %attrs;                             -- %coreattrs, %i18n, %events --
  for         IDREF          #IMPLIED -- uguale al valore dell'ID del campo --
  accesskey   %Character;    #IMPLIED -- carattere del tasto per accessibilità --
  onfocus     %Script;       #IMPLIED -- l'elemento ha ricevuto il focus --
  onblur      %Script;       #IMPLIED -- l'elemento ha perso il focus --
  >

Tag iniziale: richiesto, Tag finale: richiesto

L'elemento LABEL può essere usato per unire informazioni ai controlli. Ciascun elemento LABEL viene associato precisamente ad un solo controllo di modulo.

L'attributo for associa in modo esplicito un'etichetta ad un altro controllo esplicito: il valore dell'attributo for dev'essere uguale al valore dell'attributo id dell'elemento di controllo associato. Si può associare più d'una LABEL (etichetta) al medesimo controllo, creando riferimenti multipli tramite l'attributo for.

<FORM action="..." method="post">
<TABLE>
  <TR>
    <TD><LABEL for="fname">Nome</LABEL>
    <TD><INPUT type="text" name="firstname" id="fname">
  <TR>
    <TD><LABEL for="lname">Cognome</LABEL>
    <TD><INPUT type="text" name="lastname" id="lname">
</TABLE>
</FORM>

 <FORM action="http://somesite.com/prog/adduser" method="post">
    <P>
    <LABEL for="firstname">Nome: </LABEL>
              <INPUT type="text" id="firstname"><BR>
    <LABEL for="lastname">Cognome: </LABEL>
              <INPUT type="text" id="lastname"><BR>
    <LABEL for="email">email: </LABEL>
              <INPUT type="text" id="email"><BR>
    <INPUT type="radio" name="sex" value="Uomo"> Uomo<BR>
    <INPUT type="radio" name="sex" value="Donna"> Donna<BR>
    <INPUT type="submit" value="Invia"> <INPUT type="reset">
    </P>
 </FORM>

Quando un elemento LABEL riceve il focus, lo passa al proprio controllo assoociato. Vedi il paragrafo qui sotto dedicato ai tasti di scelta rapida per degli esempi.

Gli interpreti possono presentare le etichette in vari modi (ad es., in modo visivo, lette da sintetizzatori vocali, ecc.).

17.10 Aggiungere struttura ai moduli: gli elementi FIELDSET e LEGEND

<!--
  #PCDATA serve a risolvere il problema dei contenuti misti,
  per ogni specifica, vi sono tollerati solo gli spazi bianchi!
 -->
<!ELEMENT FIELDSET - - (#PCDATA,LEGEND,(%flow;)*) -- gruppo controlli del modulo -->
<!ATTLIST FIELDSET
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

<!ELEMENT LEGEND - - (%inline;)*       -- legenda di fieldset -->
<!ENTITY % LAlign "(top|bottom|left|right)">

<!ATTLIST LEGEND
  %attrs;                              -- %coreattrs, %i18n, %events --
  accesskey   %Character;    #IMPLIED -- tasti di scelta rapida per accessibilità --
  >

Tag iniziale: richiesto, Tag finale: richiesto

L'elemento FIELDSET consente agli autori di raggruppare per argomenti i controlli e le etichette. Raggruppando i controlli l'utente capisce più facilmente il loro scopo e al tempo stesso viene agevolato, per gli interpreti visuali, la navigazione per tabulazioni e, per gli interpreti basati su ordini a voce, la navigazione vocale. L'uso corretto di questo elemento rende più accessibili i documenti.

L'elemento LEGEND permette agli autori di assegnare una didascalia ad un FIELDSET. La legenda migliora l'accesso quando il FIELDSET viene presentato in maniera non visuale.

<FORM action="..." method="post">
 <P>
 <FIELDSET>
  <LEGEND>Dati personali</LEGEND>
  Cognome: <INPUT name="personal_lastname" type="text" tabindex="1">
  Nome: <INPUT name="personal_firstname" type="text" tabindex="2">
  Indirizzo: <INPUT name="personal_address" type="text" tabindex="3">
  ...altre informazioni personali...
 </FIELDSET>
 <FIELDSET>
  <LEGEND>Anamnesi</LEGEND>
  <INPUT name="history_illness"
         type="checkbox"
         value="vaiolo" tabindex="20"> vaiolo
  <INPUT name="history_illness"
         type="checkbox"
         value="orecchioni" tabindex="21"> orecchioni
  <INPUT name="history_illness"
         type="checkbox"
         value="vertigini" tabindex="22"> vertigini
  <INPUT name="history_illness"
         type="checkbox"
         value="starnutamento" tabindex="23"> starnutamento
  ...altre voci dell'anamnesi...
 </FIELDSET>
 <FIELDSET>
  <LEGEND>Terapia attuale</LEGEND>
  Ultimamente segue qualche terapia?
  <INPUT name="medication_now"
         type="radio"
         value="Si" tabindex="35">Si
  <INPUT name="medication_now"
         type="radio"
         value="No" tabindex="35">No

  Se al momento segue qualche terapia, la indichi nello spazio qui sotto:
  <TEXTAREA name="current_medication"
            rows="20" cols="50"
            tabindex="40">
  </TEXTAREA>
 </FIELDSET>
</FORM>

17.11 Focalizzare un elemento

In un documento HTML un elemento deve ricevere il focus dell'utente per poter essere attivato ed eseguire il suo compito. Per esempio, l'utente deve attivare il collegamento specificato dall'elemento A per seguire il collegamento specificato. In modo simile gli utenti devono dare il focus ad un TEXTAREA se vogliono inserirci dentro del testo.

Ci sono diversi modi per focalizzare un elemento:

• Indicando l'elemento con un dispositivo a puntamento.
• Navigando da un elemento a quello successivo con la tastiera. L'autore del documento può definire un ordine di tabulazione che indichi l'ordine in cui gli elementi riceveranno il focus qualora l'utente navighi nel documento con la tastiera (vedere la navigazione per tabulazioni). Una volta selezionato, un elemento può essere attivato da qualche altra sequenza di tasti.
• Selezionando un elemento tramite un tasto di scelta rapida (a volte detto "scorciatoia di tastiera" o "acceleratore di tastiera").

17.11.1 Navigazione per tabulazioni

L'ordine di tabulazione definisce l'ordine in cui gli elementi riceveranno il focus quando l'utente naviga tramite la tastiera. L'ordine di tabulazione può comprendere elementi annidati con altri elementi.

Gli interpreti dovrebbero navigare sugli elementi capaci di ricevere il focus rispettando le seguenti regole:

1. Per primi vengono toccati dalla navigazione quegli elementi che ammettono l'attributo tabindex e che gli assegnano un valore positivo. La navigazione procede dall'elemento con il valore di tabindex più basso a quello col valore più alto. Non occorre che i valori siano successivi né devono cominciare con un valore particolare. Gli elementi che abbiano valori di tabindex identici dovrebbero subire la navigazione nell'ordine con cui essi compaiono nel flusso dei caratteri.
2. In seguito vengono toccati dalla navigazione quegli elementi che non ammettono l'attributo tabindex o che lo ammettono ma gli assegnano il valore "0". Questi elementi subiscono la navigazione nell'ordine in cui appaiono nel flusso dei caratteri.
3. gli elementi che sono disabilitati non prendono parte all'ordine di tabulazione.

I seguenti elementi ammettono l'attributo tabindex: A, AREA, BUTTON, INPUT, OBJECT, SELECT e TEXTAREA.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   "http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
<HEAD>
<TITLE>Documento con MODULO</TITLE>
</HEAD>
<BODY>
...testo...
<P>Vai al
<A tabindex="10" href="http://www.w3.org/">sito Web del W3C</A>.
...altro testo...
<BUTTON type="button" name="get-database"
           tabindex="1" onclick="get-database">
Prendi l'attuale database.
</BUTTON>
...altro testo ancora...
<FORM action="..." method="post">
<P>
<INPUT tabindex="1" type="text" name="field1">
<INPUT tabindex="2" type="text" name="field2">
<INPUT tabindex="3" type="submit" name="submit">
</P>
</FORM>
</BODY>
</HTML>

17.11.2 Tasti di scelta rapida

Premendo un tasto di scelta rapida assegnato ad un elemento si focalizza tale elemento. Quello che succede quando un elemento riceve il focus dipende dall'elemento. Ad esempio, quando un utente attiva un collegamento definito dall'elemento A, l'interprete in genere segue il collegamento. Quando un utente attiva un pulsante basculante, l'interprete modifica il valore di tale pulsante. Quando l'utente attiva un campo di testo, esso permette l'inserimento del testo, ecc.

I seguenti elementi ammettono l'attributo accesskey: A, AREA, BUTTON, INPUT, LABEL, LEGEND e TEXTAREA.

<FORM action="..." method="post">
<P>
<LABEL for="fuser" accesskey="U">
Nome dell'utente
</LABEL>
<INPUT type="text" name="user" id="fuser">
</P>
</FORM>

<P><A accesskey="C"
      rel="contents"
      href="http://someplace.com/specification/contents.html">
    Indice</A>

L'uso dei tasti di scelta rapida dipende dal sistema che si usa. Per esempio, sui computer dove gira MS Windows, in genere, oltre al tasto di scelta rapida, si deve premere contemporaneamente il tasto "alt". Sui sistemi Apple, in genere, oltre al tasto di scelta rapida, si deve premere il tasto "comando".

La presentazione dei tasti di scelta rapida dipende dall'interprete. Noi raccomandiamo agli autori di collocare il tasto di scelta rapida nel testo di un'etichetta o dovunque il tasto di scelta rapida sia applicabile. Gli interpreti dovrebbero presentare il valore di un tasto di scelta rapida in modo da metterne in evidenza il ruolo e distinguerlo dagli altri caratteri (ad es., tramite sottolineatura).

17.12 Controlli disabilitati e a sola lettura

In contesti dove l'immissione dati da parte dell'utente sia indesiderata o irrilevante, è importante poter disabilitare un controllo o presentarlo in modo che sia di sola lettura. Per esempio, può essere necessario disabilitare il pulsante d'invio di un modulo finché l'utente non abbia inserito i dati richiesti. Similmente, un autore potrebbe voler includere una parte di testo a sola lettura da inoltrare come valore insieme al modulo. I paragrafi che seguono spiegano i controlli disabilitati e a sola lettura.

17.12.1 Controlli disabilitati

Quando è impostato, l'attributo disabled provoca i seguenti effetti su un elemento:

• I controlli disabilitati non ricevono il focus.
• I controlli disabilitati vengono saltati nella navigazione per tabulazioni.
• i controlli disabilitati non possono avere buon esito.

I seguenti elementi ammettono l'attributo disabled: BUTTON, INPUT, OPTGROUP, OPTION, SELECT e TEXTAREA.

Questo attributo è ereditario, ma le dichiarazioni locali si sovrappongono al valore ereditato.

La rappresentazione degli elementi disabilitati dipende dall'interprete. Ad esempio alcuni interpreti tingono di grigio gli elementi disabilitati dei menù, le etichette dei pulsanti ecc.

<INPUT disabled name="fred" value="stone">

17.12.2 Controlli a sola lettura

L'attributo readonly indica se il controllo può essere modificato dall'utente oppure no.

Quando è impostato, l'attributo readonly provoca i seguenti effetti su un elemento:

• Gli elementi a sola lettura ricevono il focus ma non possono essere modificati dall'utente.
• Gli elementi a sola lettura sono inclusi nella navigazione per tabulazioni.
• Gli elementi a sola lettura possono avere buon esito.

Ammettono l'attributo readonly i seguenti elementi: INPUT e TEXTAREA.

La presentazione degli elementi a sola lettura dipende dall'interprete.

17.13 Invio del modulo

I paragrafi seguenti spiegano come gli interpreti inoltrano i dati del modulo ai programmi che elaborano i moduli.

17.13.1 Metodo d'invio del modulo

L'attributo method dell'elemento FORM specifica quale metodo HTTP si usa per inviare il modulo all'elaboratore del modulo. Questo attributo può assumere due valori:

• get: col metodo "get" dell'HTTP l'insieme di dati del modulo viene aggiunto all'URI indicato dall'attributo action (con un punto interrogativo "?" come separatore) e tale nuovo URI viene inviato al programma di elaborazione;
• post: col metodo "post" dell'HTTP l'insieme di dati del modulo viene incluso nel corpo del modulo ed è inviato al programma di elaborazione.

Il metodo "get" dovrebbe essere usato qualora il modulo sia "idempotente" (cioè non provochi effetti collaterali). Molte ricerche effettuate su database non hanno effetti collaterali visibili e costituiscono le applicazioni ideali per il metodo "get".

Se il servizio associato all'elaborazione di un modulo provoca effetti collaterali (ad esempio se il modulo modifica un database o l'abbonamento ad un servizio), si dovrebbe usare il metodo "post".

17.13.2 Controlli a buon esito

Si definisce controllo a buon esito quel controllo "idoneo" ad essere inoltrato. Ogni controllo a buon esito contiene il proprio nome di controllo accoppiato al proprio valore attuale, come parte dell'insieme di dati del modulo inoltrato. Un controllo a buon esito dev'essere definito all'interno di un elemento FORM e deve avere un nome di controllo.

Tuttavia:

• I controlli che sono disabilitati non possono avere buon esito.
• Se un modulo contiene più di un pulsante d'invio, solo il pulsante d'invio attivato ha buon esito.
• Tutti i quadratini "accesi" (on) possono avere buon esito.
• Tra i pulsanti basculanti che condividono lo stesso valore dell'attributo name, solo il pulsante basculante "acceso" (on) può avere buon esito.
• Riguardo ai menù, il nome di controllo è fornito da un elemento SELECT ed i valori sono forniti dagli elementi OPTION. Solo le opzioni selezionate possono avere buon esito.
• Il valore corrente di un controllo di selezione di file è una lista di nomi di uno o più nomi di file. Al momento di inviare il modulo, il contenuto di ogni file viene inoltrato col resto dei dati dei moduli. Il contenuto del file viene "impacchettato" in accordo con il tipo di contenuto del modulo.
• Il valore attuale di un controllo di un oggetto è stabilito dall'implementazione dell'oggetto.

Se un controllo non ha un valore corrente quando il modulo viene inoltrato, gli interpreti non sono obbligati a trattarlo come un controllo a buon esito.

Inoltre gli interpreti non dovrebbero considerare come controlli a buon esito i seguenti:

• I pulsanti d'azzeramento.
• Gli elementi OBJECT il cui attributo declare sia stato impostato.

I controlli nascosti e i controlli che non vengono presentati a causa delle impostazioni del foglio di stile possono tuttavia avere buon esito. Ad esempio:

<FORM action="..." method="post">
<P>
<INPUT type="password" style="display:none"
          name="invisible-password"
          value="mypassword">
</FORM>

17.13.3 Elaborazione dei dati del modulo

Quando l'utente inoltra un modulo (ad es., attivando un pulsante d'invio), l'interprete lo elabora nel seguente modo.

Prima fase: identificazione dei controlli a buon esito .

Seconda fase: costruzione di un insieme di dati del modulo .

Un insieme di dati del modulo è una sequenza di coppie nome-di-controllo/valore-attuale costituita da controlli a buon esito.

Terza fase: codifica dell'insieme di dati del modulo 

L'insieme di dati del modulo viene codificato in accordo con il tipo di contenuto specificato dall'attributo enctype dell'elemento FORM.

Quarta fase: invio dell'insieme di dati del modulo così codificato 

Al termine i dati codificati vengono inviati al programma di elaborazione indicato dall'attributo action usando il protocollo specificato dall'attributo method.

Questa specifica non indica tutti i metodi d'invio corretti o i tipi di contenuto che possono essere usati con i moduli. Tuttavia, nei seguenti casi, gli interpreti dell'HTML 4.0 devono rispettare le convenzioni stabilite:

• se il method è "get" e l'action è un URI dell'HTTP, l'interprete prende il valore di action, gli aggiunge un ? e poi ci aggiunge l'insieme di dati del modulo, codificato usando il tipo di contenuto "application/x-www-form-urlencoded". L'interprete poi si sposta verso tale URI. In tale situazione i dati del modulo sono limitati ai codici ASCII;
• se il method è "post" e l'action è un URI dell'HTTP, l'interprete conduce un'operazione di transazione "post" in HTTP usando il valore dell'attributo action ed un messaggio creato in accordo con il tipo di contenuto indicato dall'attributo enctype.

Per qualsiasi altro valore di action o di method non è stato indicato alcun comportamento.

Gli interpreti dovrebbero presentare il responso alle operazioni "get" e "post" dell'HTTP.

17.13.4 Tipi di contenuto del modulo

L'attributo enctype dell'elemento FORM specifica il tipo di contenuto usato per codificare l'insieme di dati del modulo da inoltrare al server. Gli interpreti devono supportare i tipi di contenuto elencati qui sotto. Il comportamento di altri tipi di contenuto non è stato specificato.

Si prega di leggere anche il paragrafo sui caratteri "&" di escape nei valori degli attributi degli URI.

application/x-www-form-urlencoded

Questo è il tipo di contenuto predefinito. I moduli inviati con questo tipo di contenuto devono essere codificati nel modo seguente:

1. I nomi di controllo e i valori vengono evitati. I caratteri spazio sono sostituiti da + e poi i caratteri riservati vengono evitati come è spiegato in [RFC1738], paragrafo 2.2: i caratteri non alfanumerici vengono sostituiti da %HH, un simbolo di percentuale e due cifre esadecimali che indicano il codice ASCII del carattere. I fine riga sono rappresentati come coppie "CR LF" di ritorno a capo ed avanzamento di riga (cioè %0D%0A).
2. I nomi/valori dei controlli sono elencati nell'ordine in cui appaiono nel documento. Il nome è separato dal valore da un segno = e le coppie nome/valore sono separate le une dalle altre da dei &.

multipart/form-data  

Il tipo di contenuto "application/x-www-form-urlencoded" non è capace di inviare grandi quantità di dati binari o del testo contenente caratteri non ASCII. Per inviare moduli contenenti file, dati non ASCII e dati binari si dovrebbe usare il tipo di contenuto "multipart/form-data".

Il contenuto "multipart/form-data" segue le regole di tutti i flussi di dati MIME in più parti, come è stato delineato in [RFC2045]. La definizione di "multipart/form-data" è disponibile presso lo [IANA].

Un messaggio "multipart/form-data" contiene una successione di parti, ognuna rappresentante un controllo a buon esito. Le parti vengono inviate al programma di elaborazione nello stesso ordine in cui appaiono i controlli corrispondenti nel flusso del documento. Non dovrebbero esserci, in nessuno dei dati, delle delimitazioni tra le parti; il modo con cui ciò viene fatto esula dalla portata di queste specifiche.

Come tutti i tipi di MIME multi parti, ogni parte ha un'intestazione "Content-Type" facoltativa che all'inizio assume il valore "text/plain" (testo normale). Gli interpreti dovrebbero offrire l'intestazione "Content-Type" (tipo di contenuto) accompagnata da un parametro "charset".

Si presuppone che ogni parte contenga:

1. Un'intestazione "Content-Disposition" il cui valore sia "form-data".
2. Un attributo "name" che indichi il nome di controllo del controllo corrispondente. I nomi dei controlli che in origine erano stati codificati in insiemi di caratteri non ASCII, possono essere codificati usando il metodo proposto in [RFC2045].

Così, ad esempio, per un controllo chiamato "mycontrol", dovrebbe essere specificata la parte corrispondente:

Content-Disposition: form-data; name="mycontrol"

Come in tutte le trasmissioni MIME, per separare le righe di dati si usa "CR LF" (cioè %0D%0A: ritorno a capo ed avanzamento di riga).

Ogni parte può essere codificata e l'intestazione "Content-Transfer-Encoding" può essere fornita se il valore di tale parte non è uniforme alla codifica predefinita (7BIT) (vedi [RFC2045], paragrafo 6)

Se il contenuto di un file viene inviato con il modulo, il file inserito dovrebbe essere identificato dal tipo di contenuto adatto (ad es., "application/octet-stream"). Se come risposta all'invio di un solo modulo devono essere inviati più file, essi dovrebbero essere rimessi come "multipart/mixed" incorporato in un "multipart/form-data".

Gli interpreti dovrebbero cercare di dare un nome ad ogni file che viene inviato. Il nome del file può essere indicato col parametro "filename" dell'intestazione 'Content-Disposition: form-data' oppure, nel caso si tratti di più file, in un'intestazione 'Content-Disposition: file' della sottoparte. Se i nomi dei file sul sistema operativo del client non sono in US-ASCII, essi potrebbero essere approssimati o codificati usando il metodo di [RFC2045]. Ciò è conveniente in quei casi in cui, per esempio, i file caricati potrebbero contenere riferimenti reciproci (ad es. un file TeX e la propria descrizione ausiliaria di stile ".sty").

L'esempio che segue illustra la codifica "multipart/form-data". Immaginiamo di avere il modulo seguente:

 <FORM action="http://server.dom/cgi/handle"
       enctype="multipart/form-data"
       method="post">
   <P>
   Come ti chiami? <INPUT type="text" name="submit-name"><BR>
   Quali file vuoi inviare? <INPUT type="file" name="files"><BR>
   <INPUT type="submit" value="Invia"> <INPUT type="reset">
 </FORM>

Se l'utente scrivesse "Ciccio" dove si inserisce il testo e scegliesse il file di testo "file1.txt", l'interprete potrebbe inviare a sua volta i seguenti dati:

   Content-Type: multipart/form-data; boundary=AaB03x

   --AaB03x
   Content-Disposition: form-data; name="submit-name"

   Ciccio
   --AaB03x
   Content-Disposition: form-data; name="files"; filename="file1.txt"
   Content-Type: text/plain

   ... contenuto di file1.txt ...
   --AaB03x--

Se l'utente scegliesse un secondo file (un'immagine), "file2.gif", l'interprete potrebbe costituire le parti in questo modo:

   Content-Type: multipart/form-data; boundary=AaB03x

   --AaB03x
   Content-Disposition: form-data; name="submit-name"

   Ciccio
   --AaB03x
   Content-Disposition: form-data; name="files"
   Content-Type: multipart/mixed; boundary=BbC04y

   --BbC04y
   Content-Disposition: attachment; filename="file1.txt"
   Content-Type: text/plain

   ... contenuto di file1.txt ...
   --BbC04y
   Content-Disposition: attachment; filename="file2.gif"
   Content-Type: image/gif
   Content-Transfer-Encoding: binary

   ...contenuto di file2.gif...
   --BbC04y--
   --AaB03x--