Alinear los elementos de forma puede ser muy difícil. Podrías pensar que el CSS haría que la vida más fácil, pero no lo hace. Puedes usar la propiedad de posición CSS con los valores estática, relativa, absoluta y fija. Pero incluso entonces, después de largas horas de frustración, ...descubrirías que no todos los navegadores muestran tu forma correctamente.

Para posicionar los elementos de la forma, entonces, se utiliza a menudo una tabla. Echa un vistazo a la página web que hemos creado llamada form_layout.html . Esto está en el extra_files/layouts la carpeta que venía con este libro. (Si aún no tienes los archivos extra, el La ubicación de la descarga está aquí, bajo el título Diseño Web - Nuevo Curso : Descargue los archivos extra necesarios para este curso (No necesitas las descargas para el curso antiguo.)

Cuando abra la página anterior, verá un formulario que se parece a este:

Diseñando sus formularios HTML

Los elementos de la forma están bien alineados a la izquierda y a la derecha (excepto por el cuadro de texto del apellido).

Abre el código HTML de la página y verás esto:

Diseñando sus formularios HTML

Las etiquetas de la mesa son las que deben concentrarse. Hemos usado mucho el COLSPAN, aquí, para conseguir el diseño que queríamos. También hemos añadido un estilo CSS con un nombre de clase como "R1C1". (Esto sólo significa Fila 1, Columna 1.)

Esencialmente, sin embargo, teníamos una tabla que tenía 4 columnas y 5 filas. Para obtener el En la fila de correos electrónicos tenemos dos etiquetas TD dentro de un par de etiquetas TR. El primer TD es sólo el texto "CORREO ELECTRÓNICO", con algo de estilo aplicado. El segundo usa COLSPAN=3. Si no lo hiciéramos, el cuadro de texto del correo electrónico sería aplastado en el segundo celda de la segunda fila. Así que "DESPLAZAMOS" esta celda a través de 3 columnas. El El resto de la mesa utiliza la misma manipulación de COLSPAN.

La hoja de estilo para el HTML se llama form_layout_1.css . Echa un vistazo en el código CSS y ver si puedes averiguar lo que está pasando (está en los extra_files/css carpeta. Podría ayudar hacer una copia de este archivo, y el experimento con él cambiando los valores para ver qué pasa.

En la siguiente sección, pasaremos a la etiqueta VIDEO de HTML 5.

Listas de datos | video y audio HTML 5