Veamos ahora, con detalle, todas las marcas que para la elaboración de formularios prevé HTML 5.0.
<FORM></FORM>
Esta marca abre y cierra la plantilla y recoge el contenido de la misma, que puede variar según una serie de marcas que veremos más adelante. No es posible insertar una plantilla dentro de otra. Dicho de otro modo, los formularios no permiten anidamientos.
La sintaxis usual de las marcas citadas es la siguiente:
<FORM method="get|post" action="http://www.tuosito.com/cgi-bin/nome_script.cgi">
Si METHOD está impostado como GET los datos se envían al servidor y se separan en dos variables.
Para este método el número máximo de caracteres que puede contener el formulario es de 255.
Utilizando "method=post", el script CGI recibe directamente los datos sin un proceso previo de descodificación. Esta característica hace que el script pueda leer una cantidad ilimitada de caracteres.
Una vez impostada la primera marca <FORM> de la plantilla, es posible, siempre y cuando el script CGI lo permita, crear algunos elementos que resultan de gran utilidad para una adecuada gestión de los datos:
<INPUT TYPE=HIDDEN NAME=MAILFORM_SUBJECT VALUE="Asunto del formulario">
Este código determina el asunto (subject) del mensaje que recibirás por correo electrónico con el contenido del formulario. Es muy útil que los mensajes recibidos lleven especificado el asunto, no sólo para quienes usan filtros de selección del correo, sino también para ordenar la correspondencia.
<INPUT TYPE=HIDDEN NAME=MAILFORM_URL VALUE="http://www.tuosito.it">
Este código es muy útil ya que, una vez rellenado y enviado correctamente, el formulario responde con una página HTML sucesiva, dentro de la cual es posible incluir cualquier tipo de comentario. Lo más normal es visualizar una página de confirmación "Tu formulario ha sido enviado correctamente", pero se puede también mandar directamente a la portada del sitio. Se trata de comandos no estándar que varían según el CGI utilizado. Por tanto, el código antes descrito no funciona en todos los casos, sino únicamente con el ejemplo práctico que os mostraremos más adelante.
La marca de base para la definición de los elementos de un formulario es <INPUT>, que se utiliza para agregar botones, menús de selección, contraseñas, etc. A <INPUT> se le pueden asignar los 8 valores que analizamos a continuación.
<INPUT type="TEXT" name="nombre" maxlength="40" size="33" value="Tu nombre">
Este valor crea los típicos campos de texto, en los que generalmente se solicitan datos tales como el nombre o la dirección de correo electrónico. Es un valor usado sobre todo para informaciones no predefinidas, que cambian cada vez. TEXT tiene tres atributos opcionales, presentes también en el ejemplo: maxlength (el número máximo de caracteres que puede ser introducido en el campo y que no es posible superar), size (la anchura de la cadena dentro de la página) y value (visualiza un texto por defecto dentro de la cadena).
<INPUT type="PASSWORD" name="nombre" maxlength="40" size="33">
Este campo de texto funciona como el anterior, pero con una pequeña diferencia que su propio nombre indica: cuando se escribe dentro del cajetín blanco, no se ven los caracteres sino los clásicos asteriscos de las contraseñas. En realidad, los datos no se codifican de ningún modo por lo que esta marca no consigue eliminar la inseguridad de fondo.
<INPUT type="CHECKBOX" name="edad" value="sí" checked>
Este atributo se utiliza para representar datos de tipo "sí/no" y "verdadero/falso". Crea pequeñas casillas cuadradas que hay que puntear o dejar en blanco. Si la casilla está punteada, INPUT restituye un valor al CGI; en caso contrario, no restituye ningún valor. Value impostado en "sí" significa que por defecto la casilla está punteada. Checked controla el estado inicial de la casilla, en el momento de cargar la página.
<INPUT type="RADIO" name="calificación" value="suficiente">
<INPUT type="RADIO" name="calificación" value="bueno">
<INPUT type="RADIO" name="calificación" value="excelente">
Este atributo tiene funciones similares al visto anteriormente, pero contiene más posibilidades de selección. Seleccionando una de las voces presentes, y siempre y cuando tengan todas un valor "name" idéntico, las restantes se deseleccionan automáticamente.
BUENO
EXCELENTE
<INPUT type="SUBMIT" value="Envía">
El clásico botón de envío que remite el formulario con todo su contenido. La dimensión del botón depende de la longitud del texto.
<INPUT type="RESET" value="Reinicio">
Botón que vuelve a impostar todo el formulario eliminando los datos introducidos.
<INPUT type="IMAGE" src="pulsante.gif">
Función similar a la de la tecla "ENVÍA" pero con la diferencia de que en lugar del botón de la opción por defecto, aparece una imagen.
<TEXTAREA cols=40 rows=5 WRAP="physical" name="comentario"></textarea>
TEXTAREA se utiliza para introducir comentarios o campos que prevén muchas líneas de texto. La anchura se imposta con "cols" y la altura con "rows". WRAP="physical" establece que, en el caso de que el texto introducido supere la anchura de la ventana, salte de línea automáticamente.
<SELECT size=1 cols=4 NAME="calificación">
<OPTION selected value=ninguna>
<OPTION value=bueno> Bueno
<OPTION value=suficiente> Suficiente
<OPTION value=excelente> Excelente
</select>
SELECT es un elemento que permite la creación de listas con varias posibilidades de selección. En nuestro ejemplo, hemos hipotizado que se solicita una calificación sobre un sitio web.
Comenta: