Formulario completo PHP + HTML5 + CSS3


Publicado por jlmora y buscado como: php y html5, php html5, php con html5, formularios en html5 ejemplos, formulario html5 php, php en html5, html5 php, html5 y php, html5 con php, php html5 css3,

Vamos a hacer nuestro primer ejemplo de formulario completo que será posteriormente tratado con PHP y tendrá un poco de estilo básico para lo que usaremos una hoja de estilos un fichero con el formulario en HTML y el procesador del formulario escrito en PHP, lo puedes descargar todo aquí.
En la carpeta encontraras:

  1. styles.css, hoja de estilos
  2. varformularios.html, código html del formulario
  3. varformularios.php, código php que gestiona el formulario

Te deberá quedar una carpeta llamada tema3 (dentro de www), si accedes a:

  • http://127.0.0.1/tema3/varformularios.html verás lo siguiente

Formulario en HTML5 PHP CSS3

Ejercicios

  1. Estudia el fichero html para comprender lo que se muestra por el formulario.
  2. Estudia el fichero php para comprender como se procesa el formulario (Nota.- El select multiple es distinto!!!).
  3. Observa como funciona el botón borrar.
  4. Añade campos para recoger nombre y apellidos, muestralos posteriormente con el fichero .php
  5. Añade campos para recoger teléfono y email, muestralos posteriormente con el fichero .php
  6. Haz campos requeridos, en HTML
  7. Si alguno de los campos requridos están en blanco deberas mostrar un error simple (echo “error, debe introducir….”).
  8. Ejercicio avanzado.- Añade otro select múltiple

Acceder al formulario sin conocer los nombres de los campos

Accedemos al vector $_POST (o $_GET) con un foreach y de esa forma obtenemos todos los nombres.

<?php
echo "<ol>";
foreach ($_POST as $NombreElemento => $Valor){
       if ($Valor != 'Enviar')    // no mostraremos los botones
         echo "<li>Elemento en HTML: $NombreElemento, contenido: $Valor</li>";
  }
echo "</ol>"
?>

Ejercicios

  1. Crea en la carpeta del proyecto el varformularios2.php, usando el código anterior (Deberás poner todo lo de html, head, body, metas…))
  2. Cambia el action del formulario para poder probar el nuevo fichero (más adelante veremos como usar dos botones)
  3. Ejercicio avanzado.- Prueba el uso de $_REQUEST.

Más entradas sobre PHP