En esta actividad, creará un formulario y lo utilizará para pasar datos de una página a otra.

• Continuaremos trabajando con 'form.php' y 'process_form.php'. Si necesitas el código de nuevo, aquí está.
• form.php
• process_form.php

• Abra 'formulario.php'. Mostraremos nuestro formulario aquí.
• <main>Agregue una nueva línea debajo de la etiqueta de apertura .
• Escriba 'formulario' y seleccione la opción que aparece.
• La etiqueta <form> tiene un parámetro llamado action. Aquí es donde desea enviar sus datos.
• Establecer action en 'process_form.php'.

        <form action="process_form.php"></form>

• Mueva el párrafo existente dentro de las etiquetas <form>.
• Ahora agregue nuestras opciones de héroe como botones 'enviar'.

            <button type="submit" name="nombre" value="Loki"></button>
            <button type="submit" name="nombre" value="Hulk"></button>

• Establecer el type en 'enviar' significa que cuando hacemos clic en el botón, se enviará el formulario y los datos. Ambos botones harán esto.
• name es el nombre del parámetro a enviar. Los botones de envío a menudo se llamarán 'enviar' y no contendrán datos, pero a veces habrá dos formularios en una página (o enviados a una página) y necesita saber cuál procesar. Lo usamos aquí para diferenciar a los héroes seleccionados.
• El value es el texto que aparecerá en el botón.
• Guarde y cargue el archivo, luego abra la página.
• Haga clic en su héroe elegido y luego verifique los resultados. ¿Ves el nombre de tu héroe?
• Esta es una forma rara de usar un botón Enviar, pero es válida. Veamos otras opciones.

• Creemos un formulario para agregar héroes a nuestra base de datos.
• Necesitaremos campos de entrada para el alias del héroe, la identidad (secreta), si es un héroe o un villano, el año en que apareció por primera vez en los cómics de Marvel (o en otro lugar) y cuál es la fuente de su poder.
• Podríamos usar una tabla para presentar nuestro formulario con etiquetas a la izquierda y entradas a la derecha, pero eso no responde, es decir, no se adaptará a pantallas más pequeñas.
• En su lugar, usaremos una lista, donde cada etiqueta/par de entrada es un elemento de la lista.
• Elimine todo lo que esté dentro de la etiqueta <form> y agregue el siguiente código.

                <ul>
                    <li>
                    </li>
                </ul>

• Los campos para el alias y la identidad del héroe pueden ser simples campos de texto.

                    <li>
                        <label>Alias ​​de héroe:</label>
                        <input type="text" name="alias" size="30" maxlength="50" hint="Iron Man">
                    </li>
                    <li>
                        <label>Identidad:</label>
                        <input type="text" name="identidad" size="30" maxlength="50" hint="Tony Stark">
                    </li>

• Aquí tenemos una etiqueta para nuestra entrada, usando la etiqueta <label>.
• Luego tenemos una entrada, pero en lugar de ser de type="button" o type="submit", se type="text" usa para un campo de texto simple, generalmente de hasta 100 caracteres más o menos.
• Le damos un name que informará a 'process_form.php' a qué se refiere el valor.
• Hay dos atributos adicionales que no hemos visto antes. size establece el tamaño del cuadro de entrada en 30 caracteres y maxlength limita la longitud de los caracteres que se pueden ingresar.
• Finalmente, tenemos la opción de darle al usuario una pista sobre qué tipo de contenido esperamos aquí usando hint.
• Guarde y cargue el código para ver cómo se ve en vivo.

• Cuando tenemos una entrada con solo unas pocas opciones configuradas y solo se puede seleccionar una a la vez, usamos botones de radio.
• El ejemplo más común de esto es 'masculino' y 'femenino'.
• En este caso queremos saber si nuestro héroe es realmente heroico o villano. Agregue el siguiente código para mostrar esto.

                    <li>
                        <label>Side:</label>
                        <input type="radio" name="lado" value="Hero" checked="checked"> Hero<br>
                        <input type="radio" name="lado" value="Villain"> Villain
                    </li>

• He etiquetado esta distinción héroe/villano como 'lado', pero si se te ocurre un término mejor, siéntete libre de usarlo.
• Una vez más, los botones de radio usan la etiqueta <input> y, al igual que los botones, tienen un nombre y un valor.
• no value se muestra como está en un botón, porque no hay espacio en un botón de opción. En cambio, el valor es el texto que queremos enviar a 'process_form.php'.
• Añadimos el texto antes o después de <input> dependiendo de cómo queramos que aparezca el formulario.
• Finalmente, observe el checked atributo en la primera entrada. Esto establece el elemento predeterminado si desea uno.
• Guarda y sube para ver cómo se ve.

• Nuestro próximo campo es el año en que el héroe apareció por primera vez en un cómic (o película, etc.).
• Se enviará como texto, pero en realidad es un número y podemos ayudar a nuestro usuario especificándolo.
• Agregue el siguiente código a su formulario.

                    <li>
                        <label>Primera aparición:</label>
                        <input type="number" name="año">
                    </li>

• También podemos configurar sizey maxlength, pero veremos mejores formas de administrar esto más adelante.
• Guarde y cargue el código para ver cómo se ve. Casi exactamente lo mismo que una entrada de texto, ¿verdad?
• Tenga en cuenta que tiene flechas hacia arriba y hacia abajo para permitir a los usuarios cambiar el número por incrementos.
• Si tiene un dispositivo móvil para cargar la página, también notará que el teclado cambia automáticamente a una entrada numérica en lugar del diseño de teclado habitual.