Juglar / v.CIII

Los formularios permiten al lector interactuar en nuestra web. Los ejemplos más claros serían los comentarios, las cajas de búsqueda, o los cuestionarios de registro.

Todos los formularios van definidos entre las etiquetas <form>, entre las que situaremos las cajas de texto y botones que lo componen.

Atributos de la etiqueta <form>:
action - La acción que realiza el formulario: enviar a un correo electrónico (action=”mailto:correo”) o a un programa (action=”url_programa”)
method - La forma en que se envia el formulario: post o get (normalmente, siempre post).
enctype - El formato de la información que se envía. Se usa en envío a correo electrónico con valor “text/plain” para garantizar la legibilidad de la información.

Ejemplo:
<form action="mailto:direccion@correo.com (o nombre del archivo de proceso)" method="post" enctype="text/plain">
....
</form>

Y a continuación, los elementos que puede contener un formulario:

Caja de texto corto (los atributos type y name son obligatorios):
<input type="text" name="nombre">

Atributos opcionales:
size=”(nº)” - Tamaño de la caja en número de caracteres.
maxlength=”(nº)” - Tamaño máximo del texto que puede ser tomado por el formulario.
value=”(texto)” - Texto predefinido de la caja.
<input type="text" name="nombre" value="Tu nombre...">

Texto oculto: Se muestra con asteriscos.
<input type="password" name="nombre"/>

Texto largo: Para que el visitante pueda escribir varias líneas, usamos <textarea>, con los atributos rows (nº líneas) y cols (nº columnas).
<textarea name="comentario" rows="3" cols="40"></textarea>

Para darle un contenido predefinido:
<textarea name="comentario" rows="3" cols="40">Escribe tu comentario....</textarea>

Escribe tu comentario….

Listas de opciones
<select name="archivosmeses">
<option>Enero</option>
<option>Febrero</option>
<option>Marzo</option>
<option>Abril</option>
</select>

EneroFebreroMarzoAbril

Atributos de select:
size: Nº valores mostrados de la lista.
multiple: Permite la selección de varios elementos a la vez. (no recomendable)

<select name="archivosmeses" size="2">

EneroFebreroMarzoAbril

Atributos de option:
selected: Opción elegida por defecto.
<option selected>Marzo</option>

EneroFebreroMarzoAbril

value: Define el valor de la opción que será enviado al programa.
<option value="1">Enero</option>

Botones de radio:
<input type="radio" name="opinion" value="1">A favor
<br>
<input type="radio" name="opinion" value="2">En contra
<br>
<input type="radio" name="opinion" value="3">Indiferente

A favor

En contra

Indiferente

Con opción preseleccionada:
<input type="radio" name="opinion" value="1" checked>A favor

A favor

En contra

Indiferente

Cajas de validación:
<input type="checkbox" name="opinion">Estoy de acuerdo

Estoy de acuerdo

Botón de envío:
<input type="submit" value="Enviar">

Botón de borrado:
<input type="reset" value="Borrar">

Botones normales (que usaremos para otras funciones javascript):
<input type="button" value="Texto del botón">

Tutoriales del HTML de los formularios:
W3C “HTML 4.01 Specification
DesarrolloWeb (he seguido este)
Web Taller
Programación Web
HTMLWeb
HTML Point
WebEstilo
Vitamina Web