2011-09-27 40 views

Respuesta

2

Sus <label> etiquetas envolvían los <input> etiquetas que estaba causando el problema de tratar tratarlos por separado con CSS:

http://jsfiddle.net/EFByC/3/

+1

Envolver la etiqueta alrededor de la entrada es una forma de asociar la etiqueta con el campo. Al hacer clic en la etiqueta, se enfoca al campo. La forma en que lo ha hecho no es una asociación, por lo que no hay foco, y la accesibilidad es pobre. Lo hago de la manera que Peter muestra en su respuesta, con el calificador 'for =" .. '' para unir la etiqueta y el campo. –

+0

@StephenP Buen punto. Solo me enfoqué en el estilo que olvidé del calificador 'for'. ¡Ni siquiera noté que todos los atributos de 'nombre' eran idénticos! De todos modos, ha sido actualizado. –

2

yo recomendaría que cambie su formulario HTML como éste

<li><label for="firstname">PATIENT FIRST NAME: </label><input type="text" id="firstname"/></li> 
<li><label for="middle">PATIENT MIDDLE INITIAL:(OPTIONAL) </label><input type="text" id="middle" /></li> 
<li><label for="last">PATIENT LAST NAME: </label><input type="text" id="last" /></li> 
<li><label for="date">DATE OF BIRTH: </label><input type="text" id="date" /></li> 
<li><label for="gender">GENDER: </label><input type="text" id="gender" /></li> 
<li><label for="id">SUBSCRIBER ID: </label><input type="text" id="id"/></li> 
  • Dé a cada campo de formulario un identificador único
  • No envuelva la entrada dentro de la etiqueta
  • Usted puede utilizar el atributo for en la etiqueta para conectarlo a una entrada.

añadir una regla CSS para #form-container label para darles un ancho específico:

width: 210px; 

See demo.

+0

la demostración funciona bien en IE8, pero (por alguna razón) NO en Chrome (v.24). – kmote

0

Hay varios enfoques para formar el estilo. En este caso puede flotar las entradas y eso le dará el resultado que desea sin cambiar el html.

Ver demostración de: http://jsfiddle.net/EFByC/8/

1

¿Por qué ha marcado la forma en <ul>, esto no es nessesary.

Para un diseño más agradable y legible, sugiero que tenga sus etiquetas en la parte superior de los campos de entrada. Algo como esto:

http://jsfiddle.net/Claudius/EFByC/9/

+1

"Los campos de entrada no deben anidarse en las etiquetas" ¿puede respaldar eso? w3c lo recomienda; es bueno para la accesibilidad – albert

+0

tiene razón, eliminó esa oración en mi respuesta anterior – Muleskinner

+0

@albert - Estoy de acuerdo. Relacioné una pregunta relacionada en mi respuesta, y el estándar acepta entradas antes, después y dentro de las etiquetas. Cuál es el "mejor" se reduce a las preferencias personales, principalmente un argumento entre puristas de HTML ("una etiqueta es un elemento separado, no un elemento que contiene") y aquellos que prefieren simplicidad y/o menos tipeo ("todo eso para =" xxx "y id =" xxx "el negocio se vuelve tedioso"). –

1

agregar un conjunto de campos, puso una anchura en él. hacer que se muestren sus entradas y etiquetas: bloque; flotar sus entradas derecha

1

usted tiene un par de opciones, en realidad:

  • Float las entradas a la derecha, como Kevin sugirió (establecer el ancho de la UL para controlar el espacio).
  • Saca la entrada de la etiqueta y dale a la etiqueta un ancho fijo (como en la respuesta de Peter).
  • Dentro de la etiqueta, ajuste el texto de la etiqueta en un tramo y déle a ese tramo un ancho fijo (esto, al igual que la primera opción, permitirá que la entrada permanezca dentro de la etiqueta, consulte a continuación).

Y tenga en cuenta que mientras que mucha gente está diciendo que es malo tener una entrada dentro de una etiqueta, eso no es necesariamente cierto (que es sin duda en la norma - ver this question para más sobre esto). Y envolver la entrada en la etiqueta le permite obtener el comportamiento de "hacer clic en el nombre y enfocar el campo" sin especificar un conjunto de atributos feos "para =" lo que sea ".

Espero que esto ayude!

Cuestiones relacionadas