Formulario completo 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.

2 Responses to “ Formulario completo PHP + HTML5 + CSS3 ”

  1. […] que una de las entradas más vista de hacer paginas web con php es la de hacer un formulario completo con PHP y HTML5, me parece que sería bastante útil publicar aquí está presentación de HTML5 para […]

  2. diana dice:

    teniendo como base tu ejemplo si yo necesitara que el campo del asunto me mostrara al recibirlo al respectivo correo cualquier elemento de la selección ejemplo escojo en selección: primera y necesitara que el correo que reciba diga en asunto primera cómo podría hacer eso?

Deja un comentario