FORMULARIOS EN HTML

FORMULARIOS EN HTML
Tomado de: http://www.aulaclic.es/html/t_8_1.htm
Un formulario es un elemento que permite recoger datos introducidos por el
usuario.
Un formulario está formado, entre otras cosas, por etiquetas, campos de texto,
menús desplegables, y botones.
Los formularios se insertan a través de las etiquetas <form> y </form>. Entre
dichas etiquetas habrá que insertar los diferentes objetos que formarán el
formulario, la etiqueta <form> tiene los siguientes atributos:
El atributo action indica una dirección de correo electrónico a la que mandar el
formulario, o la dirección del programa que se encargará de procesar el contenido
del formulario.
El atributo enctype indica el modo en que será cifrada la información para su
envío. Por defecto tiene el valor application/x-www-form-urlencoded.
El atributo method indica el metodo mediante el que se transferirán las variables
del formulario. Su valor puede ser get o post.
El valor get se utiliza cuando no se van a producir cambios en ningún documento o
programa que no sea el navegador del usuario que pretende mandar el formulario,
como ocurre cuando se realizan consultas sobre una base de datos.
El valor post se utiliza cuando sí se van a producir cambios, como ocurre cuando
el usuario manda datos que deben ser almacenados en una base de datos.
Se recomienda utilizar el valor post.
Por ejemplo, podríamos insertar un formulario escribiendo el siguiente código:
<form
action="mailto:[email protected]"
method="post"
enctype="text/plain"
>
...
</form>
ATRIBUTOS COMUNES

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.

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").

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").
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
CONTROL
TEXTAREA
DESCRIPCIÓN
name: indica el nombre del área de texto.
rows indica el número de líneas que podrán ser visualizadas en el área
de texto por lo que determina al alto del área de texto.
cols indica el número de caracteres por línea que podrán ser
visualizados en el área de texto por lo que determina al ancho del área
de texto.
CAMPO
DE Para insertar un campo de texto, el atributo type debe tener el valor
TEXTO
text.
size indica el número de caracteres que podrán ser visualizados en el
campo de texto, determina el ancho de la caja.
maxlenght indica el número de caracteres que podrán ser insertados en
el campo de texto.
value indica el valor inicial del campo de texto.
CAMPO
DE Para insertar un campo de contraseña, el atributo type debe tener el
CONTRASEÑA valor password.
EJEMPLO
<textarea
name="ejemploarea"
cols="30" rows="3">Escribe el
texto que quieras</textarea>
<input name="campo" type="text"
value="Campo
de
texto"
size="20" maxlength="15">
<input
name="contra"
type="password"
value="contraseña"
size="20"
maxlength="15">
BOTÓN
Para insertar un botón, el atributo type debe tener el valor submit, <input
name="boton"
restore o button.
type="submit" value="Enviar">
Si el valor es submit, al pulsar sobre el botón se enviará el formulario.
Si el valor es restore, al pulsar sobre el botón se restablecerá el
formulario, borrándose todos los campos del formulario que hayan sido
modificados y adquiriendo su valor inicial.
Si el valor es button, al pulsar sobre el botón no se realizará ninguna
acción.
El atributo value indica el texto que mostrará el botón.
CASILLA
DE Para insertar una casilla de verificación, el atributo type debe tener el <input
name="casilla"
VERIFICACIÓN valor checkbox.
type="checkbox" value="acepto"
El atributo value indica el valor asociado a la casilla de verificación. Es
necesario poner este atributo, aunque el usuario no pueda ver su valor.
Es el valor a enviar.
La aparición del atributo checked indica que la casilla aparecerá
activada inicialmente. Este atributo no toma valores.
RADIO
Para insertar un botón de opción, el atributo type debe tener el valor
radio.
El atributo value indica el valor asociado al botón de opción. Es
necesario poner este atributo, aunque el usuario no pueda ver su valor.
Es el valor a enviar.
La aparición del atributo checked indica que el botón aparecerá
activado inicialmente. Este atributo no toma valores.
LISTA
Para insertar uno de estos menús o listas es necesario insertar las
DESPLEGABLE etiquetas <select> y </select> en un formulario.
Campos
de El atributo name indica el nombre del menú o lista será el nombre de la
selección
variable que contendrá el valor seleccionado.
<select> ...
El atributo size indica el número de elementos de la lista que pueden
ser visualizados al mismo tiempo, determina el alto de la lista.
Cada uno de los elementos de la lista ha de insertarse entre las
etiquetas <option> y </option>.
El atributo value indica el valor a enviar si se selecciona el elemento. Si
no se especifica este atributo, se enviará el texto de la opción, que se
encuentra entre las etiquetas <option> y </option>.
La aparición del atributo selected indica que el elemento aparecerá
seleccionado. Este atributo no toma valores.
AGRUPAR
Estos
controles,
pueden
estar
agrupados
dentro
de
CONTROLES
<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>.
checked>
<input
name="prefiere"
type="radio"
value="estudiar"
checked>
<input
name="prefiere"
type="radio" value="trabajar">
<select
name="mascota">
<option
selected>--Elige
animal
---</option>
<option>Perro</option>
<option>Gato</option>
</select>
<fieldset>
<legend>Datos
personales</legend>
... Controles para recoger
los datos personales ...
</fieldset>