# Controles en formularios

Estos son los diferentes tipo de controles que pueden incluirse en un formulario:

## Explicación previa

Para que un control envíe información es necesario:

- que el control esté incluido en un formulario (<form>).
- que el formulario tenga establecido el atributo action, con la dirección absoluta o relativa del fichero php que procesará la información
- que el control tenga establecido el atributo name
  Nota: el atributo name puede contener cualquier carácter (números, acentos, guiones, etc), pero si contiene espacios, PHP sustituye los espacios por guiones bajos (_) al procesar los datos enviados.
- que el formulario contenga un botón de tipo submit

El siguiente ejemplo muestra un formulario válido (ejemplo.html):

    <form action="ejemplo.php">
      <p>Nombre: <input type="text" name="nombre" /></p>
      <p><input type="submit" value="Enviar" /></p>
    </form>
| Nombre:

El programa que recibe los datos los guarda automáticamente en la matriz $_REQUEST. Mediante la orden print_r($_REQUEST) se puede mostrar el contenido de la matriz $_REQUEST.

El siguiente ejemplo muestra lo que escribiría el programa PHP (ejemplo.php) si recibiera la información del formulario anterior (ejemplo.html).

    <?php
    print_r($_REQUEST);
    ?>
| Array ( [nombre] => Pepito Conejo)

En los ejemplos que se encuentran en esta página, cada ejemplo muestra el código fuente de la página html, el aspecto que tiene el control y el contenido de la matriz $_REQUEST cuando se recibe la información.

Volver al principio de la página

## Caja de texo, caja de contraseña y área de texto

Este control se envía siempre. El valor enviado es el contenido de la caja o área.

Código fuente | Control | $_REQUEST
--- | --- | ---
    <input type="text" name="cajatexto1" />
|  | Array ( [cajatexto1] => )
    <input type="text" name="cajatexto2" value="Cualquier cosa" />
|  | Array ( [cajatexto2] => Cualquier cosa )
    <input type="password" name="cajapassword1" />
|  | Array ( [cajapassword1] => )
    <input type="password" name="cajapassword2" value="pezespada" />
|  | Array ( [cajapassword2] => pezespada )
    <textarea rows="4" cols="20" name="areadetexto1"></textarea>
|  | Array ( [areadetexto1] => )
    <textarea rows="4" cols="20" name="areadetexto2">Cualquier cosa</textarea>
| Cualquier cosa | Array ( [areadetexto2] => Cualquier cosa )

En XHTML no se puede limitar el tamaño del contenido de un área de texto, aunque sí que se puede hacer con JavaScript.

Hay un ejemplo en este foro: limitar contenido área de texto.

Volver al principio de la página

## Casilla de verificación

Este control se envía solamente si se marca la casilla. El valor enviado es "on" si la casilla no tiene definido el atributo value o el valor del aributo value si éste está definido.

Código fuente | Control | $_REQUEST
--- | --- | ---
    <input type="checkbox" name="casilla1" />
| (sin marcar) | Array ( )
    <input type="checkbox" name="casilla2" />
| (marcada) | Array ( [casilla2] => on )
    <input type="checkbox" name="casilla3" value="Tres" />
| (marcada) | Array ( [casilla3] => Tres )

Volver al principio de la página

## Botón radio

Este control se envía solamente si se marca alguno de los botones radio que forman el control. El valor enviado es "on" si el botón marcado no tiene definido el atributo value o el valor del atributo value si éste está definido.

Código fuente | Control | $_REQUEST
--- | --- | ---
    <input type="radio" name="radio1" />
    <input type="radio" name="radio1" />
| (sin marcar) | Array ( )
    <input type="radio" name="radio2" />
    <input type="radio" name="radio2" />
| (marcado uno) | Array ( [radio2] => on )
    <input type="radio" name="radio3" />
    <input type="radio" name="radio3" />
| (marcado otro) | Array ( [radio3] => on )
    <input type="radio" name="radio4" value="Uno" />
    <input type="radio" name="radio4" value="Dos" />
| (marcado uno) | Array ( [radio4] => Uno )
    <input type="radio" name="radio5" value="Uno" />
    <input type="radio" name="radio5" value="Dos" />
| (marcado otro) | Array ( [radio5] => Dos )

Volver al principio de la página

## Menú

Este control envía siempre la opción elegida. El valor enviado es el contenido de la etiqueta option elegida si la opción elegida no tiene definido el atributo value o el valor del aributo value si éste está definido.

Si el menú admite selección múltiple, entonces el nombre del menú debe acabar con corchetes ([]) y se envía como una matriz, de tantos elementos como opciones se hayan elegido.

Código fuente | Control | $_REQUEST
--- | --- | ---
    <select name="menu1">
      <option selected="selected"></option>
      <option></option>
    </select>
|  | Array ( [menu1] => )
    <select name="menu2">
      <option selected="selected">Opción 1</option>
      <option>Opción 2</option>
    </select>
|  | Array ( [menu2] => Opción 1 )
    <select name="menu3">
      <option selected="selected" value="Uno">Opción 1</option>
      <option value="Dos">Opción 2</option>
    </select>
|  | Array ( [menu3] => Uno )
    <select name="menu4[]" size="3" multiple="multiple">
      <option selected="selected">Opción 1</option>
      <option>Opción 2</option>
      <option>Opción 3</option>
    </select>
| (Marcados 1 y 3) | Array ( [menu4] => Array ( [0] => Opción 1 [1] => Opción 3 ) )

Volver al principio de la página

## Control oculto

Este control se envía siempre y el valor enviado es el valor del atributo value.

Código fuente | Control | $_REQUEST
--- | --- | ---
    <input type="hidden" name="oculto1" />
|  | Array ( [oculto1] => )
    <input type="hidden" name="oculto2" value="Cualquier cosa" />
|  | Array ( [oculto2] => Cualquier cosa )

Volver al principio de la página

## Botón Enviar (submit)

Este control se envía siempre y el valor enviado es el valor del atributo value.

Código fuente | Control | $_REQUEST
--- | --- | ---
    <input type="submit" value="Submit" />
|  | Array ( )
    <input type="submit" value="Submit" name="boton2" />
|  | Array ( [boton2] => Submit )

Nota: Amaya 9.3 no permite establecer el atributo name, salvo editando el código fuente.

Volver al principio de la página

## Archivo

El selector de archivo permite enviar un archivo desde el ordenador del cliente al servidor.

En un formulario "normal", este control se envía siempre y el valor enviado es el nombre del archivo elegido.

Código fuente | Control | $_REQUEST
--- | --- | ---
    <input type="file" name="archivo1" />
|  | Array ( [archivo1] => loquesea.txt )

Para que este control envíe toda la información, el formulario debe tener el atributo enctype con el valor multipart/form-data y ser enviado con el método POST. La información se almacena entonces en la matriz $_FILES (pero no en la variable $_REQUEST).

Código fuente | Control | $_FILES
--- | --- | ---
    <form enctype="multipart/form-data"
      action="ejemplo.php" method="POST" >
    <input type="file" name="archivo2" />
|  | Array ( [archivo2] => Array ( [name] => loquesea.txt [type] => text/plain [tmp_name] => C:\ejemplos\loquesea.txt [error] => 0 [size] => 27890 ) )

Antes de utilizar este control, hay que configurar en el archivo php.ini el tamaño máximo de los archivos que se pueden enviar (mediante la directiva post_max_size) y es conveniente leer el capítulo correspondiente a la subida de archivos del manual de PHP para conocer la manera de evitar los posibles riesgos de seguridad.

En la lección Cargar archivos se comenta un poco más el uso de este control.

Volver al principio de la página

## Imagen

El control de tipo imagen inserta una imagen que funciona como un botón (aunque ni Firefox ni Internet Explorer le da relieve como a los botones). Al hacer clic en un punto de la imagen es como si se hubiera pulsado a un botón submit y se envían las coordenadas del punto en el que se ha hecho clic (junto con los valores de los otros controles del formulario).

Código fuente | Control | $_REQUEST
--- | --- | ---
    <input type="image" name="GNU" alt="GNU" src="gnu.jpg" />
|  | Array ( [GNU_x] => 89 [GNU_y] => 111 )

Si se define el atributo value, el formulario envía también el nombre del control con el valor del atributo.

Volver al principio de la página

Esta obra está bajo una licencia de Creative Commons.