[Form] Una label per 3 elementi

[Federix]

Io ho un form con 3 select a cui tutte fanno capo ad un unica <label> che però dev'essere univoca e non multipla, come posso fare??

<label for="data">Data</label>
<select name="giorno">
.
.
.
<select name="mese">
.
.
.
<select name="anno">
.
.
.

Considerate anche che non posso scrivere giorno, mese, anno, ma solamente data.

[pierofix]

Eheh, bel problema. Mi ci sono trovato spesso anch'io in questa situazione.

Ho capito che ad ogni label può corrispondere un solo elemento di form. E, se ci pensi, è anche logico. Il label descrive un elemento specifico, non può descrive un gruppo di elementi.

Io ho deciso di attribuire un label 'giorno', uno 'mese' e uno 'anno'. Eventualmente poi puoi renderli invisibili, però devono comunque esserci (ogni elemento va descritto).

Poi puoi realizzare un raggruppamento con fieldset+legend:

<fieldset>
   <legend>Data</legend>
   
</fieldset>

La cosa importante da capire è che comunque OGNI elemento necessita di descrizione: è una questione di struttura logica.

[Federix]

Ho risolto in maniera semplice semplice

Ricerca eventi per <label for="mese">mese</label> ed <label for="anno">anno</label>
<select name="mese" id="mese">
.
.
.
<select name="anno" id="anno">
.
.
.

[pierofix]

Uuu, interessante. Bravo.

[andrea_kobe]

Ciao a tutti. Ho un problema simile.

Ho diversi form nei quali devo inserire una data che è suddivisa in tre input di tipo testo per giorno, mese e anno. Qual è il metodo migliore per dar loro una label?
Cosa intende pierofix per renderli invisibili? E' quella la soluzione ideale?
Vorrei lasciare come etichetta solo data senza specificare mese e anno come ha fatto federix.
Grazie per i consigli.

[andrea_kobe]

[pierofix]

Una eventuale soluzione:

XHTML

<fieldset id="data"><legend>Data</legend>
   <ul>[*]
         <label for="anno">Anno:</label>
         <select id="anno" name="anno">...</select>
      [*]
         <label for="mese">Mese:</label>
         <select id="mese" name="mese">...</select>
      [*]
         <label for="giorno">Giorno:</label>
         <select id="giorno" name="giorno">...</select>
      [/list]
</fieldset>


CSS

#data label
{
   position:absolute; top:-100px;
   width:1px; height:1px;
   overflow:hidden;
}

[fcaldera]

se non sbaglio le label possono anche racchiudere i campi di input

<label>
  <select>
    ...
  </select>
</label>

ma non so quanti campi si possono annidare.

[andrea_kobe]

Grazie a entrambi per le risposte. La soluzione di pierofix mi sa che è troppo avanzata per me neofita dei css. Non sono per niente pratico di posizionamenti assoluti e non so se la posso adattare per qualsiasi posizionamento dei miei form.

@fcaldera.

Intendi una cosa del genere?
Ma il nome della label non deve coincidere con quello dell'id?

<label for="data">Data
<input type="text" name="giorno" id="giorno" maxlength="2" /> /
<input type="text" name="mese" id="mese" maxlength="2" /> /
<input type="text" name="anno" id="anno" maxlength="4" /> 
</label>

Scusate ma sono proprio un

[fcaldera]

il nome della label è ininfluente
è l'attributo for che semmai dev'essere uguale all'id dell'input

comunque non annidare tre select dentro una label... non funziona come pensavo (e non è nemmeno tanto corretto associare una label a tre controlli secondo me...)