Desarrollo Web Lección 8 - Formularios

En esta actividad mejorarás la apariencia de tus formularios.

• Continuaremos usando 'form.php' y 'style.css' en esta actividad. En caso de que necesites el código de nuevo, aquí está.
• form.php
• database.php
• style.css

• 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 <fieldset> justo después de la etiqueta <form> y ciérrela justo antes de la etiqueta de cierre </form>.

        <form name="add_hero" action="process_form.php">
            <fieldset>
                    ...
                <input type="submit" name="submit" value="Añadir Héroe">
            </fieldset>
        </form>

        <form name="add_appearances" action="process_form.php">
            <fieldset>
                    ...
                <input type="submit" name="submit" value="Agregar Apariencia">
            </fieldset>
        </form>

• 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.
• <fieldset> 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 <fieldset>.

        <form name="add_hero" action="process_form.php">
            <fieldset>
                <legend>Añadir Héroe</legend>
                    ...
                <input type="submit" name="submit" value="Añadir Héroe">
            </fieldset>
        </form>

        <form name="add_appearances" action="process_form.php">
            <fieldset>
                <legend>Agregar Apariencia</legend> 
                    ...
                <input type="submit" name="submit" value="Agregar Apariencia">
            </fieldset>
        </form>

• Guarda, sube y comprueba el resultado.

• 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'. <label>
• 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.

• form.php
• style.css
• resultado

Siguiente: Publicación de datos