¿Deberíamos poner <input> dentro de <label>?

vi 2 método diferente en el mismo ejemplo formulario:¿Deberíamos poner <input> dentro de <label>?

en http://www.alistapart.com/articles/prettyaccessibleforms/ qué están utilizando 2 método en el primer fieldset que están manteniendo input después label y en segundo fieldset que están manteniendo input después label. ¿Por qué?

<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>

razón por la que están manteniendo en algún momento después de inputlabel y en algún momento dentro?

Actualización:

aquí http://www.usability.com.au/resources/forms.cfm también están manteniendo input después label no dentro

Fuente

2010-05-24 Jitendra Vyas

El enlace que ha añadido que dice la razón para no usar etiquetas implícitas: "Hasta que las aplicaciones de usuario soporten explícitamente la asociación entre las etiquetas y los controles de formulario, para todos los controles de formularios con etiquetas asociadas implícitamente a asegurar que la etiqueta está colocada adecuadamente." Pautas de accesibilidad al contenido web Checkpoint 10.2 " Algunas personas con discapacidad aún conservan sus viejos lectores de pantalla, por lo que es mejor que utilices etiquetas explícitas. –

@Gert G - sí, tienes razón –

@ Jørn Schou-Rode - oh sí misma pregunta –

Ésta es according to the specs, y funciona en todos los navegadores modernos (pero no en IE6 - clic en la etiqueta no va a ajustar el enfoque de la control de entrada, a menos que incluya un id y for):

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

En cuanto a "qué" - En el <fieldset>, los botones de radio se colocaron en las etiquetas para que no haya un espacio que no se pueda hacer clic entre la etiqueta y su botón de opción.

Fuente

2010-05-24 07:14:42 Kobi

"(no, no en IE6):" ¿qué quieres decir? –

No he intentado usarlo en mucho tiempo, pero recuerdo esa característica que funciona en IE6 – sparebytes

IE6 típico, es al revés. agregue un 'para' a la etiqueta Esto romperá la función de verificación infantil –

Poner la entrada dentro de la etiqueta asocia los dos. Esto es importante para la accesibilidad (por ejemplo, lectores de pantalla para personas que no pueden ver la relación entre la etiqueta y la entrada al mirar la página). Una alternativa es usar el atributo for en la etiqueta de la etiqueta.

Fuente

2010-05-24 07:22:56 Greg

Generalmente se hace con el propósito de ampliar la superficie de control de entrada. Cuando hay un botón de opción o una casilla de verificación, todo lo que está dentro de <label for="given_control"></label> activa el control.

Ok, una vez más: Ahora controlar superficies se ven en gris (si su CSS no es desactivado) Si usted quiere controlar a ser sensibles a los clics en los dos lados de control, encierran <input> entre etiquetas de la etiqueta <label...>, si es suficiente que un lado del control sea sensible al clic, coloque las etiquetas <label> antes o después de <input>. En el siguiente ejemplo: los primeros 2 controles son sensibles a los clics en ambos lados (incluido el espacio en blanco a la izquierda) del control, el tercero, solo para el lado izquierdo.

Comprobar este ejemplo:

<!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>

Fuente

2010-05-24 08:07:32

@arunas_t - su código dado no es válido para W3C –

Créanme o no me despojé de todo por la simplicidad de la pupila, todavía funciona en IE, Firefox y Opera y es para el ejemplo visual. Solo pruébalo si quieres ver la respuesta de r Tu pregunta, ¡salud! PD Si necesita todo el código compatible, puedo proporcionarlo. –

El código se actualiza. ¿Cómo está ahora? Al menos Firefox me muestra tres greens? :) –

Hoy he encontrado respuesta aquí. http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H44.html

Las especificaciones de HTML y XHTML permitan tanto implícitos y explícitos etiquetas. Sin embargo, algunas tecnologías de asistencia no manejan correctamente las etiquetas implícitas (por ejemplo, el nombre ). Por ejemplo <label>First name <input type="text" name="firstname"></label>).

Tan explícito es el camino a seguir y también nos da más opciones de estilo.

Fuente

2010-05-30 02:39:41

¿Deberíamos poner <input> dentro de <label>?

Respuesta

Cuestiones relacionadas