Due campi di inserimento all'interno un'etichetta

consideri il seguente:Due campi di inserimento all'interno un'etichetta

<label>Range from 
    <input name='min_value'/> to 
    <input name='max_value' /> 
</label>

E` semanticamente corretto poiché le raccomandazioni W3C affermano che un'etichetta è associato esattamente controllo una forma?

Facendo clic sul secondo spostamento di input, si mette immediatamente a fuoco sul primo ingresso? Questo può essere prevenuto?

Come si contrassegna una combinazione di input min/max per mostrare che due ingressi sono associati?

fonte

2012-01-25 sqwk

Perché è necessario inserire l'input all'interno dell'etichetta ?? Perché non a –

Semanticamente, è necessario un attributo per l'etichetta che si collega all'ID di un input (che deve essere univoco in tutto lo scopo della pagina). – MetalFrog

@MetalFrog: l'annidamento del controllo nell'etichetta fornirà la semantica necessaria, aggiungendo un attributo all'etichetta in quella situazione ridondante. L'attributo for è necessario solo quando il controllo appare altrove. Detto questo, * può * essere utile specificare un attributo per comunque per assicurarsi di associare l'etichetta al controllo corretto, poiché verrà rilevato un errore di convalida quando viene rilevato un conflitto: "Qualsiasi discendente di input di un elemento etichetta con un attributo for deve avere un valore ID che corrisponda a quello per l'attributo. " – BoltClock

No, non è corretto (dato che, come si nota, un label è associato esattamente uno modulo di input).

per etichettare un gruppo di ingressi che appartengono insieme, utilizzare un <fieldset> e un <legend>:

<fieldset> 
 
    <legend>Range</legend> 
 
    <label for="min">Min</label> 
 
    <input id="min" name="min" /> 
 

 
    <label for="max">Max</label> 
 
    <input id="max" name="max" /> 
 
</fieldset>

Riferimenti:

<input />^{HTML 5 spec, WHATWG definition}.
<fieldset>^{HTML 5 spec, WHATWG definition}.
<label>^{HTML 5 spec, WHATWG definition}.
<legend>^{HTML 5 spec, WHATWG definition}.

fonte

2012-01-25 14:31:31

Sembra che tu possa usare anche [labelledby] (https://www.w3.org/TR/WCAG20-TECHS/ARIA9.html#ARIA9-ex2) (anche se sceglierei comunque la soluzione). –

-3

Non penso che dovresti inserire il campo di immissione all'interno del controllo dell'etichetta.

<label for="myfield">test</label><input type="text" id="myfield" name="myfield />

l'etichetta è proprio questo, un'etichetta per qualcosa.

fonte

2012-01-25 14:32:02 kolin

No, è perfettamente corretto inserire un input in un'etichetta. In un mondo perfetto, l'associazione for/id non dovrebbe essere necessaria con queste cosiddette etichette associate implicitamente perché sarebbe così ovvio che l'etichetta corrispondente è il genitore di questo input. Nel mondo reale, gli screen reader non sono riusciti a ottenere ciò per così tanto tempo che è obbligatorio utilizzare la corrispondenza per gli attributi/id. – FelipeAls

' La tua età (1, 2 o 3 cifre)' è un esempio dell'utilizzo dell'elemento label per il testo della guida visualizzato su il diritto dell'input ma letto dagli screen reader nel momento giusto: prima che l'utente ((parzialmente) cieco) abbia la possibilità di digitare sth nell'input. Non è molto utile aiutarlo dopo aver digitato sth nell'input;) – FelipeAls

IRL, un'etichetta non contiene ciò che è per. Un barattolo di sottaceti non è contenuto all'interno dell'etichetta che indica che si tratta di un barattolo di sottaceti.L'etichetta afferma semplicemente che è per quel barattolo di sottaceti. Posso spostare quell'etichetta ovunque ma è ancora per quel barattolo di sottaceti. Lo stesso vale per i moduli HTML. IMO, un'etichetta non dovrebbe contenere il controllo che è un'etichetta. Dovrebbe semplicemente indicare quel particolare controllo. Cosa succede se volevo rimuovere l'etichetta (per qualche motivo non riesco ancora a pensare) tramite JavaScript? Anche io rimuoverei il controllo! Posso buttare via quell'etichetta e il barattolo di sottaceti è ancora lì. –

Come circa questo:

<label> Range from <input name='min_value'> </label> 
<label> to <input name='max_value'> </label>

fonte

2012-01-25 14:35:31

Secondo this - etichetta può contenere solo un ingresso come dovrebbe essere associato un solo controllo. Inserire l'input all'interno dell'etichetta significa eliminare l'attributo for (collegamento automatico).

Così si dovrebbe neanche mettere singolo input in etichetta o specificare for attributo che indica in ingresso id e non lo fanno put input in etichetta.

fonte

2012-01-25 14:37:05 zysoft

Come la risposta accettata afferma, non è corretto, tuttavia penso che ci siano modi migliori per farlo.

alternative accessibili:

Opzione 1 (utilizzando l'attributo aria-label):

Range: 
<input ... aria-label='Range start' /> 
<input ... aria-label='Range end' />

Opzione 2 (utilizzando nascosti label tag):

<label for='start'>Range start</label> 
<input type='text' id='start' /> 

<label for='end' class='hidden'>Range end</label> 
<input type='text' id='end' />

Qualora il .hidden la classe è only readable by screen readers.

Opzione 3 (usando aria-labelledby attributi):

<label id='lblRange'>Range</label> 
<input type='text' id='start' aria-labelledby='lblRange' /> 
<input type='text' id='end' aria-labelledby='lblRange' />

Vantaggi di opzione # 1: Ogni input ha una buona descrizione che altri suggerimenti (ad esempio l'aggiunta di una "a" etichetta) non. Le opzioni n. 2 e n. 3 potrebbero non essere le migliori per questo caso specifico, ma vale la pena menzionarle per casi simili.

Fonte: http://webaim.org/techniques/forms/advanced

fonte

2015-07-07 16:44:45

1 LABEL = 1 INGRESSO !!!

Se si inseriscono 2 INGRESSI in un'ETICHETTA, NON funzionerà in Safari (e iPad e iPhone) ... perché quando si fa clic all'interno di LABEL si concentra automaticamente il primo INPUT ... quindi il secondo input è impossibile a digitare a.

fonte

2016-11-21 15:51:06 mzvarik

Due campi di inserimento all'interno un'etichetta

risposta

Problemi correlati