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 for="alias">Alias ​​de héroe:</label>
                        <input type="text" name="alias" size="30" maxlength="50" hint="Iron Man">
                    </li>
                    <li>
                        <label for="identidad">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 for="año">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.

• Nuestro próximo campo es la fuente del poder del héroe. Este es un tipo de categoría, donde queremos controlar las opciones que se pueden seleccionar.
• Para esto usamos un <select> campo.
• Copie el siguiente código en su formulario.

                    <li>
                        <label>Fuente de poder:</label>
                        <seleccione nombre="poder">
                            <option value="habilidad">Habilidad</option>
                            <option value="bio">Biológica</option>
                            <option value="magia">Magia</option>
                            <option value="tech">Tecnología</option>
                            <option value="mutante">Mutante</option>
                        </seleccionar>
                    </li>

• Tenemos una serie de opciones enumeradas usando etiquetas <option> y <select> todas se ubican dentro de la etiqueta.
• En lugar de configurar namepara cada opción individualmente, lo configuramos una vez en la etiqueta <select>.
• El valor enviado a 'process_form.php' se toma del value atributo, mientras que el usuario ve el texto entre las etiquetas <option>.
• Guarde y cargue el archivo para ver que aparece como un cuadro desplegable.
• Finalmente, agregue el botón Enviar para que el formulario funcione.

                <input type="enviar" name="enviar" value="Añadir héroe">

• Guarde y cargue el archivo.
• Agregue algunos datos y haga clic en el botón para enviar sus datos.
• Tenga en cuenta que si elige 'Biológico' como fuente de poder, el resultado se envía como 'poder=bio' en lugar de 'poder=Biológico' debido a lo value asociado con esa opción.

• También nos gustaría poder agregar las apariencias de cada héroe. Esto se puede hacer de varias maneras, pero vamos a crear un formulario separado para ello.
• Agregue un formulario debajo del existente con la misma acción ('process_form.php').
• Agregue una lista desordenada con dos entradas.
• La primera entrada tendrá una etiqueta de 'Héroe' y un cuadro de selección con todos nuestros héroes conocidos. Como queremos que se actualice si agregamos héroes usando el primer formulario, debemos extraer los datos de la base de datos.
• Para hacer esto, primero necesitaremos configurar nuestra base de datos.
• Agregue la siguiente línea antes de incluir el encabezado.

    include('database.php');

• Ahora cree un nuevo archivo llamado 'database.php' y llénelo con el código de configuración de la base de datos que usamos en 'mysql.php'.

<?php
    // Configurar la conexión a la base de datos
    define ('DBCONNECT', "../../pdo.php"); // database connection
    include DBCONNECT;
    $db  = 'webdev';
    $dsn = "mysql:host=$db_host;dbname=$db;charset=utf8mb4";
    try 
    { // conectar
        $pdo = new MyPDO($dsn, $db_user, $db_pass, $db_options);
    } catch (\PDOException $e) {
        throw new \PDOException ($e->getMessage(), (int)$e->getCode());
    }
?>

• En algún momento después de eso (prefiero al final del primer bloque de PHP para que todos los includecomandos estén juntos) agregue algo de código para obtener los nombres de los héroes.

    // obtener la lista de héroes
    $query = "SELECT * FROM heroes";
    $args  = array();
    $rslt  = $pdo->prepare($query);
    $rslt->execute($args);

  
* Ahora podemos recorrer la respuesta y agregar una opción para cada una. 

                    <li>
                        <label for="hero">Héroe</label>
                        <select name="heroe">
<?php
    // mostrar la lista de héroes
    while($row = $rslt->fetch()) {
?>
                            <option value="<?php echo $row['alias']; ?>"><?php echo $row['alias']; ?></option>
<?php
    }
?>
                        </select>
                    </li>