Controles de formulario

El formulario

Todos los controles, o por lo menos los que queramos enviar juntos en una página, deben de estar recogidos dentro de un formulario <form></form>.

El formulario, puede tener los atributos comunes, como class, style o id. Además, tiene como mínimo dos atributos propios.

• method: es la manera en la que se enviarán los datos. Sus valores pueden ser 
• get, que muestra los datos en la barra de direcciones
• post, que los envía de forma separada.
• action: como valor, contiene a dónde se enviarán los datos. Por ejemplo, una página PHP que los procesará.

Por ejemplo, podríamos encontrar un formulario como:

 <form method="post" action="recoger_datos.php">
 ... controles ...
 </form>

Dentro del formulario, podemos tener cualquier elemento HTML. Pero los más importantes son los controles, que permiten al usuario introducir datos, marcar o seleccionar opciones, o incluso subir archivos.

Estos controles, pueden estar agrupados dentro de <fieldset></fieldset>. Esta etiqueta sirve para que agrupemos controles relacionados en formularios extensos. Además, nos permite mostrar una leyenda, si incluimos la etiqueta <legend>.

 <form method="post" action="recoger_datos.php">
 <fieldset>
 <legend>Datos personales</legend>
 ... Controles para recoger 
 los datos personales ...
 </fieldset>
 <fieldset>
 <legend>Preferencias</legend>
 ... Controles para recoger 
 las preferencias ...
 </fieldset>
 </form>

También podríamos utilizar <fieldset> fuera de un formulario.

Controles. Atributos comunes

La etiqueta y atributos dependen del tipo de control Pero muchos comparten una serie de atributos. Veámoslos:

El atributo type.

Varios controles comparten la etiqueta input. En estos casos, el valor atributo type distingue si se trata de un formulario de texto, de opción, etc.

<input type="text" /> Un control de texto <br />
<input type="radio" /> Un control de opción <br />
<input type ="checkbox" /> Una casilla de  verificación

El atributo name.

Con este atributo asignamos un nombre al control. Es importante, porque al recoger los datos, podremos hacerlo a través del nombre. Además, los controles sin nombre no envían sus datos.

El atributo value.

En controles como líneas de texto, establece el valor inicial, por lo que el usuario lo puede cambiar. En otros, como botones, establece el texto que se muestra. En controles de opción, el atributo determina el valor de cada opción.

El atributo disabled.

Permite deshabilitar un control, impidiendo que el usuario interactúe con él. Se utiliza con el valor disabled (disabled="disabled").

<input type="text" disabled="disabled" value="Texto inicial" />
<input type ="checkbox" disabled="disabled" />
<input type="submit" disabled="disabled" value="Botón" />

El atributo readonly.

Hace que al control sea de sólo lectura, es decir, que no se pueda cambiar su valor. Se utiliza con el valor readonly (readonly="readonly").

<input type="text" readonly="readonly" value="Texto inicial" />
<input type ="checkbox" readonly="readonly" />
<input type="submit" readonly="readonly" value="Botón" />

Como podemos ver, no afecta a todos los controles, como a la casilla de verificación, ya que al pulsarla no cambiamos su valor. Para simular el efecto en controles de este tipo, podemos utilizar este sencillo JavaScript onclick="return false;".

Los atributos tabindex y accesskey.

Estos atributos dan accesibilidad a nuestro formulario. Tabindex determina el orden de tabulación, es decir, qué control será el siguiente en tomar el foco si pulsamos la tecla Tab. Por defecto, el orden de tabulación será el orden de aparición de los controles. El valor debe de ser un número.

El atributo accesskey, toma como valor una tecla (una letra), hace que podamos dar el foco al control con una combinación de teclas. En Internet Explorer, con la combinación Alt + tecla, y en Firefox, con Alt + Shift + tecla. 

Controles de texto

Uno de los valores más empleados, es el texto. Para introducir una línea de texto, podemos emplear 

<input type="text" />.

Habrás observado que al introducir una contraseña, en vez del texto se muestran asteriscos. Para conseguir esto, empleamos 

<input type="password" />.

También pueden contener los siguientes atributos:

• value, con el valor inicial del texto.
• size, con un valor numérico, que representa el ancho de la caja.
• maxlength, con el máximo de caracteres que se pueden escribir.

1 <input type="password" /><br />
2 <input type="text" value="Escribe aquí" /><br />
3 <input type="text" value="Escribe aquí" size="10" /><br />
4 <input type="text" maxlength="5" />

Para escribir texto más largo, de varias líneas, utilizamos el control área de texto

<textarea></textarea>.

Este control, debe de llevar siempre los siguientes atributos para indicar su tamaño:

• rows, indicando el número de líneas de texto.
• cols, indicando el número de columnas que se muestra.

Estos atributos se refieren al tamaño de la caja que se muestra, pero no limitan el contenido. Para hacer eso, podemos emplear

<textarea rows="4" cols="30">Escribe...</textarea>

Observa que las áreas de texto no utilizan el atributo value. Para asignarle un valor inicial, lo escribimos directamente dentro de la etiqueta.

Casillas de verificación

Las casillas de verificación o checkbox, permiten a usuario marcar o no una opción. Se crean con la etiqueta

<input type="checkbox" />.

Si queremos que la casilla aparezca marcada por defecto, lo hacemos con el atributo checked="checked".

Las casillas, sólo se envían si están marcadas, y lo hacen con el valor on, aunque podemos cambiar este valor con el atributo value. De todas formas, el valor nos dará igual, ya que lo que comprobaremos es si se ha enviado o no.

<input type="checkbox" /> Acepto las condiciones<br />
<input type="checkbox" checked="checked" />Deseo recibir publicidad.

Radios o grupos de opciones

Estos controles se emplean para que el usuario elija una opción de varias posibles. Se crean con la etiqueta

<input type="radio" />

La diferencia con checkbox, es que no se desmarcan al volver a pulsar sobre ellos, aunque sí al pulsar otro del mismo grupo.

Si queremos que la opción aparezca marcada por defecto, lo hacemos con el atributo checked="checked".

Para que pertenezcan al mismo grupo, las opciones deben de tener el mismo name. En este caso sí es importante value, ya que lo que se enviará será el control name con el valor seleccionado.

<fieldset>
<legend>Género</legend>
<input type="radio" name="genero" value="hombre" /> Hombre 
<input type="radio" name="genero" value="mujer" /> Mujer
</fieldset>
<fieldset>
<legend>Estado civil</legend>
<input type="radio" name="estado" value="soltero" /> Soltero/a<br /> 
<input type="radio" name="estado" value="casado" /> Casado/a<br /> 
<input type="radio" name="estado" value="separado" /> Separado/a
</fieldset>

Etiquetas (label)

Utilizando una etiqueta, podemos hacer que un texto forme parte del control. Esto es muy útil sobretodo en checkbox y radio, ya que permite marcar la casilla al hacer clic sobre el texto. En caso de otros controles, como texto, permite poner el foco en el control al hacer clic sobre el texto.

Para emplear esta etiqueta, basta con poner el texto y control dentro de una etiqueta <label></label>.

Nombre: <input type="text" /><label>Nombre: <input type="text" /></label><br />
<label><input type="checkbox" /> Soy mayor de edad.</label>

No tienen por qué estar juntos el texto y control. Podemos asignarle al texto de dentro de una etiqueta un control, asignándole a la etiqueta el atributo for que tendrá como valor el id del control asociado.

Menús de selección

Otra forma de permitir a un usuario seleccionar valores, es a través de un menú de selección.

La estructura es una etiqueta <select></select>, dentro de la cual ponemos tantas etiquetas <option></option> como valores queramos mostrar.

Elige un color: <select>
 <option>Azul</option>
 <option>Verde</option> 
 <option>Rojo</option>
 <option>Amarillo</option>
</select>

El control enviará como valor el contenido de la opción elegida.

Por defecto, se muestra la primera opción como seleccionada. Podemos forzar otra opción como seleccionada, dándole a una opción el atributo selected="selected".

En vez de una lista desplegable, podemos convertir el select en un cuadro de lista, mostrando varios elementos, indicando en el atributo size cuántos elementos queremos que se muestren.

También podemos hacer que se pueda seleccionar más de un valor, con el atributo multiple="multiple". Para seleccionar varias opciones debemos de combinar las teclas Ctrl o Shift con el clic del ratón.

Elige colores:<br />
<select size="4" multiple="multiple">
 <option>Azul</option>
 <option>Verde</option> 
 <option>Rojo</option>
 <option>Amarillo</option>
</select>

Subir archivos

Utilizando el control <input type="file" /> podemos seleccionar un archivo del disco duro y enviarlo.

Imagen: <input type="file" />

Para que funcione, debemos de añadir al formulario el siguiente atributo y valor enctype="multipart/form-data".

Al recoger el archivo, deberemos de moverlo a la carpeta de nuestro sitio que queramos, o enviarlo como archivo adjunto en un correo electrónico. Esto es un poco más complejo que recoger un valor de texto, y no lo veremos en este curso.

Campos ocultos

Los campos ocultos se crean con la etiqueta <input type="hidden" />. Estos campos no los muestra el navegador, y su misión no es que el usuario rellene datos, si no permitirnos almacenar información que de otra forma se perdería.

Por ejemplo, pensemos en un formulario, en el que el usuario introduce su nombre, y el action lleva a otro formulario donde se introducen más datos. En este segundo formulario, utilizaríamos un campo oculto para almacenar el nombre. Esto tiene sentido en formularios creados en PHP.

Botones

Los botones son elementos fundamentales en los formularios, ya que nos permiten, entre otras cosas, enviar los datos.

Dependiendo de su funcionalidad, tenemos tres tipos de botones:

• Botón submit, que envía el formulario.
• Botón reset, que borra los campos del formulario, restableciendo su valor inicial.
• Botón genérico. Para que realice alguna función, debemos de asociarlo a un script.

En el formulario, podemos crear estos botones con la etiqueta <input />, y el atributo type con los valores submit, reset y button, respectivamente.

En estos botones, por defecto, el navegador muestra un texto, según el tipo. Podemos cambiarlo con el atributo value.

En vez de input, podemos crear los botones con la etiqueta <button></button>. Le asignamos el mismo type, pero en vez de establecer el texto con value, lo escribimos directamente dentro de la etiqueta. Esto nos permite, por ejemplo, poner imágenes dentro del botón.

Submit: <input type="submit" /><br />
Reset:  <input type="reset" /><br />
Button: <input type="button" /><br />
      <br /> 
Submit: <input type="submit" value="Enviar" />
      <br />
Reset:  <input type="reset" value="Borrar" />
      <br />
Button: <input type="button" value="Bot&oacute;n" />
      <br /> <br /> 
Submit: <button type="submit"></button><br />
Reset: <button type="reset">Restablecer</button><br />
Button: <button><img src="comunes/ico_home.gif" alt="" /></button>