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>
Listas de opciones
<select name="archivosmeses">
<option>Enero</option>
<option>Febrero</option>
<option>Marzo</option>
<option>Abril</option>
</select>
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">
Atributos de option:
selected: Opción elegida por defecto.
<option selected>Marzo</option>
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
Con opción preseleccionada:
<input type="radio" name="opinion" value="1" checked>A favor
Cajas de validación:
<input type="checkbox" name="opinion">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
Sindica el feed