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 direccionespost
,
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.
La etiqueta y atributos dependen del tipo de control Pero muchos comparten una serie de atributos. Veámoslos:
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
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.
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.
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" />
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;"
.
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.
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
<textarearows
="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.
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.
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>
Hombre
<legend>Género</legend>
<input type="radio" name="genero" value="hombre" />
<input type="radio" name="genero" value="mujer" />
Mujer
</fieldset><fieldset>
Soltero/a<br />
<legend>Estado civil</legend>
<input type="radio" name="estado" value="soltero" />
<input type="radio" name="estado" value="casado" />
Casado/a<br /><input type="radio" name="estado" value="separado" />
Separado/a
</fieldset>
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.
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>
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.
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.
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:
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ó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>