Inicio / Directorio / Informática y Telecomunicaciones /

Formularios HTML y PHP: botones, campos de entrada y recuperación de datos

Informática y TelecomunicacionesActualizado el 6,37 KB

Resumen

El documento explica cómo crear formularios en HTML, distinguiendo los botones de envío, borrado y genéricos, así como las formas de agrupar campos. Después muestra cómo enviar los datos a un fichero PHP y recuperarlos con $_REQUEST. Por último, repasa los distintos tipos de elementos input, select y textarea con ejemplos de código.

Puntos clave

  • El botón de envío (submit) manda los datos a la dirección indicada en ACTION; si no tiene value, muestra "Enviar consulta".
  • El botón de borrado (reset) reinicia el formulario a sus valores por defecto; si no tiene value, muestra "Restablecer".
  • agrupa campos dentro de un borde y le da título.
  • Con METHOD="POST" o "GET" los datos viajan al servidor, y en PHP se recuperan con $_REQUEST['nombre_campo'].
  • Los campos checkbox con NAME="extras[]" envían varios valores que PHP recibe como un array.
  • Para subir ficheros se usa type="file" junto con enctype="multipart/form-data" en el formulario.

Ponte a prueba

Botones de formulario

Botón de envío:

Envía los datos a la dirección indicada. value="texto botón": valor del botón. Si no se especifica, muestra Enviar consulta.

img: imagen.

Botón de borrado:

  • : reinicia el formulario con los valores por defecto si existen; si no, los deja vacíos. value="texto botón". Si no se especifica, muestra Restablecer.

Organización de formularios

Se pueden agrupar campos para organizar y mejorar el aspecto estético.

  • <fieldset>...</fieldset>: agrupa campos en torno a un borde.
  • <legend>Texto</legend>: título del grupo.
  • <optgroup>: etiqueta un grupo de opciones.

Otros elementos

Otros:

  • : botón genérico. value="texto botón": valor del botón.
  • : aspecto de imagen. src="URL": ruta al fichero de la imagen. width="px" y height="px": ancho y alto de la imagen.
  • : adjuntar un fichero para enviarlo al destino. enctype="multipart/form-data". accept="formato": varios formatos se separan por "|" (audio|video|image|mime_type).
  • : enviar datos de forma invisible.
  • : lista de valores. id="identificador": asocia los valores al input donde deben aparecer; el input list y el datalist deben coincidir.
  • : descripción. for="idref": asocia la etiqueta con un control; el valor debe coincidir con el atributo id.

Acceso a formularios desde PHP

Fichero uno.php:

<HTML><BODY><FORM ACTION="dos.php" METHOD="POST">Edad: <INPUT TYPE="text" NAME="edad"><INPUT TYPE="submit" VALUE="aceptar"></FORM></BODY></HTML>

Fichero dos.php:

<HTML><BODY><?PHP print("La edad es: $edad"); ?></BODY></HTML>

Recuperar datos

Al pulsar el botón de enviar, los datos se envían por la URL.

$_REQUEST: permite capturar variables enviadas desde formularios con los métodos GET o POST.

Ejemplo: $edad = $_REQUEST['edad'];

Fichero uno.php:

<HTML><BODY><FORM ACTION="dos.php" METHOD="POST">Edad: <INPUT TYPE="text" NAME="edad"><INPUT TYPE="submit" VALUE="aceptar"></FORM></BODY></HTML>

Fichero dos.php:

<HTML><BODY><?PHP $edad = $_REQUEST['edad']; print("La edad es: $edad"); ?></BODY></HTML>

Elementos tipo input

Texto:

Introduce un texto:

<INPUT TYPE="text" NAME="cadena" VALUE="valor por defecto"><?PHP $cadena = $_REQUEST['cadena']; print($cadena); ?>

Elegir una opción (círculo / radio):

Sexo:

<INPUT TYPE="radio" NAME="sexo" VALUE="M" CHECKED>Mujer <INPUT TYPE="radio" NAME="sexo" VALUE="H">Hombre<?PHP $sexo = $_REQUEST['sexo']; print($sexo); ?>

Elegir varias opciones (cuadrado / checkbox):

<INPUT TYPE="checkbox" NAME="extras[]" VALUE="garaje" CHECKED>Garaje <INPUT TYPE="checkbox" NAME="extras[]" VALUE="piscina">Piscina <INPUT TYPE="checkbox" NAME="extras[]" VALUE="jardin">Jardín <?PHP $extras = $_REQUEST['extras']; foreach ($extras as $extra) print("$extra<BR>\n"); ?>

Botón (Button):

<INPUT TYPE="button" NAME="actualizar" VALUE="Actualizar datos"><?PHP $actualizar = $_REQUEST['actualizar']; if ($actualizar) print("Se han actualizado los datos"); ?>

Botón de examinar archivo:

<FORM ACTION="procesa.php" METHOD="post" ENCTYPE="multipart/form-data"><INPUT TYPE="file" NAME="fichero"></FORM>

Formulario invisible:

<?PHP print("<INPUT TYPE='hidden' NAME='username' VALUE='$usuario'>\n"); ?><?PHP $username = $_REQUEST['username']; print($username); ?>

Formulario contraseña:

Contraseña:

<INPUT TYPE="password" NAME="clave"><?PHP $clave = $_REQUEST['clave']; print($clave); ?>

Botón submit:

<INPUT TYPE="submit" NAME="enviar" VALUE="Enviar datos"><?PHP $enviar = $_REQUEST['enviar']; if ($enviar) print("Se ha pulsado el botón de enviar"); ?>

Select simple (se muestra uno con flecha desplegable):

Color:

<SELECT NAME="color"><OPTION VALUE="rojo" SELECTED>Rojo<OPTION VALUE="verde">Verde<OPTION VALUE="azul">Azul</SELECT><?PHP $color = $_REQUEST['color']; print($color); ?>

Select múltiple (se muestran todas las opciones):

Idiomas:

<SELECT MULTIPLE SIZE="3" NAME="idiomas[]"><OPTION VALUE="ingles" SELECTED>Inglés<OPTION VALUE="frances">Francés<OPTION VALUE="aleman">Alemán<OPTION VALUE="holandes">Holandés</SELECT><?PHP $idiomas = $_REQUEST['idiomas']; foreach ($idiomas as $idioma) print("$idioma<BR>\n"); ?>

Formulario para comentario:

Comentario:

<textarea COLS="50" ROWS="4" NAME="comentario">Este libro me parece ...</textarea><?PHP $comentario = $_REQUEST['comentario']; print($comentario); ?>

Descargar

PDF Word HTML

Preguntas frecuentes

¿Cómo recupera PHP los datos de un formulario?

Se usa la variable $_REQUEST con el nombre del campo entre corchetes, por ejemplo $edad = $_REQUEST['edad']; . Permite capturar datos enviados tanto por GET como por POST.

¿Qué diferencia hay entre el botón submit y el botón reset?

El botón submit envía los datos del formulario al destino indicado, mientras que el botón reset reinicia los campos con sus valores por defecto o los deja vacíos.

¿Para qué sirve enctype="multipart/form-data"?

Sirve para adjuntar ficheros al formulario y enviarlos al destino. Debe incluirse junto al campo de tipo file.

Ponte a prueba

Tarjetas de repaso

Pulsa una tarjeta para ver la respuesta.

Test

1. ¿Qué texto muestra por defecto un botón submit sin atributo value?
2. ¿Qué atributo de la etiqueta FORM indica la dirección a la que se envían los datos?
3. ¿Qué función cumple la etiqueta ?
4. ¿Qué variable de PHP permite capturar datos enviados con GET o POST?
5. ¿Cómo se indica que un campo checkbox puede enviar varios valores?
6. ¿Qué tipo de input se usa para elegir una sola opción entre varias con forma de círculo?
7. ¿Qué atributo de select permite elegir varias opciones a la vez?

Preguntas generadas con IA a partir del documento: comprueba las respuestas con el texto.