Dovremmo inserire <input> all'interno di <label>?

Ho visto 2 metodo diverso sullo stesso esempio forma:Dovremmo inserire <input> all'interno di <label>?

su http://www.alistapart.com/articles/prettyaccessibleforms/ perché stanno usando 2 metodo nella prima fieldset stanno mantenendo input dopo label e nel 2 ° fieldset stanno mantenendo input dopo label. Perché?

<fieldset> 
    <legend>Delivery Details</legend> 
    <ol> 
    <li> 
     <label for="name">Name<em>*</em></label> 
     <input id="name" /> 
    </li> 
    <li> 
     <label for="address1">Address<em>*</em></label> 
     <input id="address1" /> 
    </li> 
    <li> 
     <label for="address2">Address 2</label> 
     <input id="address2" /> 
    </li> 
    <li> 
     <label for="town-city">Town/City</label> 
     <input id="town-city" /> 
    </li> 
    <li> 
     <label for="county">County<em>*</em></label> 
     <input id="county" /> 
    </li> 
    <li> 
     <label for="postcode">Postcode<em>*</em></label> 
     <input id="postcode" /> 
    </li> 
    <li> 
     <fieldset> 
     <legend>Is this address also your invoice » 
address?<em>*</em></legend> 
     <label><input type="radio" » 
name="invoice-address" /> Yes</label> 
     <label><input type="radio" » 
name="invoice-address" /> No</label> 
     </fieldset> 
    </li> 
    </ol> 
</fieldset>

motivo per cui sono a volte mantenendo input dopo label e qualche volta dentro?

Aggiornamento:

qui http://www.usability.com.au/resources/forms.cfm stanno anche mantenendo input dopo label non all'interno

fonte

2010-05-24 Jitendra Vyas

Il collegamento aggiunto ti dice la ragione per non utilizzare le etichette implicite: "Fino a quando gli interpreti non supporteranno esplicite associazioni fra etichette e controlli dei moduli, per tutti i controlli dei moduli che hanno etichette associate implicitamente assicurano che l'etichetta sia posizionata correttamente" Linea guida per l'accessibilità dei contenuti Checkpoint 10.2 " Alcune persone con problemi di lettura continuano a tenere i vecchi lettori di schermo, quindi è meglio usare etichette esplicite –

@Gert G - sì hai ragione –

@ Jørn Schou-Rode - oh sì stessa domanda –

Questo è according to the specs, e funziona in tutti i browser moderni (ma non in IE6 - cliccando l'etichetta non impostare lo stato attivo alla controllo di input, a meno che non si include un id e for):

<label> 
     Name: <input type="textbox" name="firstName" /> 
    </label>

per quanto riguarda il "perché" - Nel <fieldset>, i pulsanti di opzione sono stati inseriti nelle etichette in modo da non lasciare spazi vuoti tra l'etichetta e il relativo pulsante di opzione.

fonte

2010-05-24 07:14:42 Kobi

"(no, non in IE6):" cosa intendi? –

Non ho provato a usarlo da molto tempo, ma ricordo che funzionava in IE6 – sparebytes

IE6 tipico, è il contrario. aggiungi un 'for' all'etichetta questo interromperà la funzione di controllo figlio –

Inserire l'input all'interno dell'etichetta associa i due. Questo è importante per l'accessibilità (ad esempio lettori di schermo per le persone che non possono vedere la relazione tra l'etichetta e l'input guardando la pagina). Un'alternativa è utilizzare l'attributo for nel tag etichetta.

fonte

2010-05-24 07:22:56 Greg

Generalmente è fatto allo scopo di estendere la superficie di controllo di input. Quando è presente un pulsante di opzione o una casella di controllo, tutto ciò che è all'interno di <label for="given_control"></label> impegna il controllo.

Ok, ancora una volta: Ora controllare le superfici sono visti in grigio (se il CSS non è disattivata) .Se si desidera un controllo per essere sensibili ai clic su entrambi i lati del controllo, racchiudono <input> tra tag label <label...>, se è sufficiente che un lato del controllo sia sensibile al clic, inserire i tag <label> prima o dopo <input>. Nell'esempio seguente: I primi 2 controlli sono sensibili ai clic su entrambi i lati (compresi gli spazi bianchi a sinistra) del controllo, il terzo - solo per il lato sinistro.

Controllare questo esempio:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<title>Visual Label example</title> 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
<style> 
.control 
{ 
    background-color:#ddd 
} 
</style> 
</head> 
<body> 
<form action="" method="post" name="f1"> 
<label class="control" for="id_1">1. 
<input checked="checked" name="check" id="id_1" value="1" type="checkbox">One 
</label> 
<br /> 
<label class="control" for="id_2">2. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<input name="check" id="id_2" value="2" type="checkbox">Two 
</label> 
<br /> 
<label class="control" for="id_3">3. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label> 
<input name="check" id="id_3" value="3" type="checkbox">Three 
</form> 
</body> 
</html>

fonte

2010-05-24 08:07:32

@arunas_t - il tuo codice dato non è valido per il W3C –

Credimi o no Ho spogliato tutto per la puprose della semplicità, funziona ancora in IE, Firefox e Opera ed è per l'esempio visivo. Provalo solo se vuoi vedere la risposta per La tua domanda, evviva. Post scriptum Se hai bisogno dell'intero codice compatibile, posso fornirlo. –

Il codice è aggiornato. Come è ora? Almeno Firefox mi mostra tre verdi? :) –

Oggi ho trovato risposta qui. http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H44.html

Le specifiche HTML e XHTML permettono sia implicite ed esplicite etichette. Tuttavia, alcune tecnologie di supporto non gestiscono correttamente le etichette implicite (ad esempio, Nome). Ad esempio <label>First name <input type="text" name="firstname"></label>).

Così esplicita è la strada da percorrere e ci offre anche più opzioni di stile.

fonte

2010-05-30 02:39:41

Dovremmo inserire <input> all'interno di <label>?

risposta

Problemi correlati