====== Desarrollo Web Lección 8 - Formularios ====== ===== Estilismo ===== ==== Objetivo ==== En esta actividad mejorarás la apariencia de tus formularios. ==== Configuración ==== * Continuaremos usando 'form.php' y 'style.css' en esta actividad. En caso de que necesites el código de nuevo, aquí está. * [[https://techschool.murraygunn.id.au/webdev/classes/forms/2/form.es.php|form.php]] * [[https://techschool.murraygunn.id.au/webdev/classes/forms/2/database.es.php|database.php]] * [[https://techschool.murraygunn.id.au/webdev/classes/media/7/style.php|style.css]] ==== Conjuntos de Campos ==== * Guarde y cargue el código si es necesario. * Abra 'form.php' en su navegador y eche un vistazo. * ¿Qué crees que necesita mejorar? * Lo primero que noto es que todo está amontonado. Debe estar espaciado para que sea más legible. * Comencemos separando las dos secciones del formulario. * Agregue una etiqueta

justo después de la etiqueta .

* Guarde y cargue, luego actualice su página. * Ahora debería tener un borde alrededor de cada sección, lo que lo hace mucho más claro. *

divide su formulario en conjuntos de campos, aunque en este caso cada conjunto de campos es su propio formulario. * También podemos etiquetar cada conjunto de campos agregando una leyenda. Esto puede ir a cualquier parte, pero es más claro justo dentro de la etiqueta de apertura

        
            
                Añadir Héroe
                    ...
                
            
        

        
            
                Agregar Apariencia 
                    ...

* Guarda, sube y comprueba el resultado. ==== Alineación de Campos ==== * La forma más sencilla de alinear todo sería usar una tabla, pero eso no respondería (no se vería bien en pantallas más pequeñas), así que usaremos CSS en su lugar. * Me gusta simular una tabla con una columna para las etiquetas a la izquierda y una columna para las entradas a la derecha, luego alinear cada una para que se encuentren en el medio. * Vamos a crear algo de espacio para las etiquetas agregando width: 10em;. Recuerde que em define el espacio en el ancho de los caracteres. Por un poco de experimentación, sé que 10em es suficiente para todas nuestras etiquetas. * Desafortunadamente, widthno se puede aplicar a elementos en línea como , por lo que debemos cambiarlo a 'bloque en línea'. * Cuando haya terminado, podemos configurar el texto para que se alinee a la derecha.

label {
  display: inline-block;
  width: 10em;
  text-align: right;
}

* Mira cómo se ve eso. * A continuación, dé un poco de espacio a los cuadros de texto, números y menús desplegables.,

input[type=text], input[type=number], select {
  margin-left: 1em;
}

* Todavía tenemos que cambiar nuestras entradas de radio y casillas de verificación a la derecha. Sumando los 10em de la etiqueta y el margen de 1em de las otras entradas, obtenemos 11em.

input[type=checkbox], input[type=radio] {
  margin-left: 11em;
}

* Si actualiza su página ahora, verá que todo se ve bastante bien excepto por la entrada para la nueva película. Esto tiene el margen de 1em dado a todas las entradas de texto, pero sería mejor sin él en este caso.

input[name=new_movie] {
  margin-left: 0em;
}

* Para diferenciar esta entrada de las demás, especificamos el nombre. Luego quite el margen. * Actualice su página y vea si está satisfecho con ella. * Siéntase libre de cambiar el diseño, agregar algunos colores, etc. hasta que esté satisfecho. ==== Codigo Final ==== * [[https://techschool.murraygunn.id.au/webdev/classes/forms/3/form.es.php|form.php]] * [[https://techschool.murraygunn.id.au/webdev/classes/forms/3/style.php|style.css]] * [[https://techschool.murraygunn.id.au/webdev/classes/forms/3/form.php|resultado]] [[es:web_development:forms:post|Siguiente: Publicación de datos]]