HTML proporciona etiquetas que se utilizan para la creación de formas, que incluyen cuadros de texto, casillas de verificación, botones de radio y casillas de selección. Los diseñadores utilizan para utilizar tablas para alinear los elementos de formulario, su puesta en columnas y filas. Desde el cambio de estilo CSS, un problema que enfrentan los diseñadores es cómo se alinean los elementos de formulario, sin usar tablas. La mejor manera de alinear los cuadros de texto con etiquetas es utilizar la etiqueta <label> en conjunción con una etiqueta <span> para cada cuadro de texto y su etiqueta. Utilizar técnicas de flotación para alinear todas las etiquetas en un lado y todos los cuadros de texto en el otro lado.
Instrucciones
1 Abre el archivo HTML en un editor de código y añadir sus cuadros de texto, junto con sus etiquetas, así:
Nombre: <input type = "text" name = "nombre" id = "nombre" />
E-Mail: <input type = "text" name = "email" id = "email" />
Las líneas de código anterior se coló entre etiquetas <form>. Si el código HTML carece de estos, agregarlos. Ponga la apertura <form> antes del primer campo de formulario y, a continuación añadir la etiqueta de cierre </ form> en algún lugar debajo del botón última forma.
2 Envolver cada etiqueta y cuadro de texto par en una etiqueta <label>. Aunque <label> está destinado para su uso con cualquier texto etiquetado de un campo de formulario, envolviéndolo alrededor tanto el texto como el campo hace que las cosas sean más fáciles de estilo en CSS y ofrece facilidad de uso añadió al hacer que el texto se puede hacer clic. Cuando un usuario hace clic en el texto, el navegador va a poner el cursor en el cuadro de texto. Aquí está el código:
<Label for = "nombre"> Nombre: <input type = "text" name = "nombre" id = "nombre" /> </ label>
Coincidir con el valor del atributo "para" con el valor del atributo "nombre" dentro de la etiqueta <input>.
3 Envuelve el texto de la etiqueta en el cuadro de texto <span> forma que puede utilizar sólo el texto dentro de su código CSS. Aquí está el resultado:
<Label for = "nombre"> <span> Nombre: </ span> <input type = "text" name = "nombre" id = "nombre" /> </ label>
4 Desplazarse hasta la parte superior del archivo HTML, busque una etiqueta <link> con un atributo "rel" en "estilo" y abra el archivo que hace referencia. Si no encuentra este, a continuación, busque <style> o agregarlos usted mismo. Añadir código CSS a la hoja de estilo o entre las etiquetas <style>.
5 Establecer el atributo de "pantalla" para las etiquetas tanto de la envergadura y la etiqueta a "bloque". Asignar un ancho tanto para el "nombre" y los campos "e-mail", seleccionándolos por sus identificadores. Ajuste "pantalla" para "bloquear" para los dos cuadros de texto también. Ajuste "flotar" a la izquierda de la etiqueta <span> y ajuste ambos cuadros de texto "flotar" a la derecha. Asignar una anchura total de la etiqueta <label>. Aquí está el código CSS:
label {display: block; Anchura: 300px;}
Gen {display: block; flotador izquierdo;}
nombre, #email {display: block; Anchura: 150px; flotar derecho;}
Consejos y advertencias
- Evitar la asignación de "display: block" a la etiqueta <input> en general, ya que también afectará a su botón "Enviar". Por eso, hay que seleccionar cuadros de texto por sus nombres de identificación.
- Siempre una copia de seguridad de los archivos HTML y CSS antes de editarlos.