¿Qué es un formulario?
Una de las vías de comunicación que podemos ofrecerle a los visitantes es el enlace de correo electrónico para que se puedan poner en contacto con quien corresponda. Es una posibilidad que debería existir en cualquier página WEB, siempre que exista alguna persona que se responsabilice de consultar el buzón, tal como ya hemos comentado.
Pero habrá ocasiones en las que el correo electrónico será demasiado abierto y necesítemos especificar una serie de campos para que se rellenen y la información que nos llegue sea ajuste a lo que necesitamos. En ese caso recurriremos a los formularios.
Vamos pues a pasar revista a los diferentes tipos de campos que podemos incluir en un formulario.
Tipos de campos
Vamos a ir presentando los diferentes tipos de campos. Teniendo en cuenta que Composer no dispone de herramientas para la construcción de formularios, una vez comentado el formato y la utilidad, y vista la apariencia gráfica se mostrará el código que corresponde.
Campos de texto de una línea
Utilizaremos este tipo de campos para recoger datos tales como los nombres, apellidos, direcciones, teléfonos y, en general, todos aquellos de los que podamos esperar una extensión limitada. El principal problema lo tendremos, precisamente, al estimar cual debe ser la longitud adecuada para que puedan caber los datos que introduzca el visitante, ya que tan nombre es Ana como María de las Mercedes, y mientras el primero tiene suficiente con tres caracteres, el segundo necesita un total de veintiuno.
Su presentación en pantalla será de este tipo:
El código que sirve para representar este tipo de campos
es
<input type="text" name="nombre" size="30">
Fíjate en el orden de presentación de los elementos de la etiqueta
puesto que va a ser común:
Tipo de campo (type): en este caso text.
Nombre del campo (name): el texto que pongamos
será el que encabece el valor cuando recibamos el mensaje por correo.
Suele coincidir con el texto que escribimos junto al campo para indicar el contenido
que se debe incluir. En el ejemplo se ha utilizado apellidos.
Tamaño (size): En el caso de los campos
de texto representa la anchura que tendrá la caja.
A este tipo de campos puedo añadirle otro atributo que será maxlength="n",
donde n será el número máximo de caracteres que se podrán
introducir en la caja de texto.
Aunque
habitualmente el nombre que le damos al campo suele coincidir con el texto que
ponemos a su lado no tiene por qué ser necesariamente así. Además,
si en algún momento tienes acceso a programas para procesar los formularios,
comprobarás que una simple variación de minúscula por mayúscula
a la hora de referirnos a los nombres de los campos es suficiente para que no
funcione.
Campos de texto de varias líneas
Estos campos se utilizan, no sólo porque no podamos prever la extensión, sino, fundamentalmente, porque se trata de campos abiertos en los que dejamos al visitante que se exprese sin limitaciones. La apariencia que podríamos encontrar sería similar a la siguiente.
En este caso, el código es el siguiente (observa que,
mientras en el campo de texto de una sola línea no había etiqueta
de cierre en éste tipo sí que la hay)
<textarea name="aportaciones" cols="50" rows="4"> </textarea>
Cols y rows me sirven para especificar el ancho y el alto del
cuadro de introducción de texto.
El campo que se ha mostrado en el ejemplo lleva otro atributo más en
la etiqueta:
wrap="virtual"
Con este atributo se especifica la forma en la que se irán partiendo
los renglones cuando alguien introduzca texto. Si pusiéramos otro atributo
sería necesario que la persona que escribe pulsara la tecla INTRO, mientras
que utilizando el modo virtual se irá saltando automáticamente
al llegar al margen derecho.
Botones de opción
Los botones de opción se utilizan para que el usuario escoja entre dos o más opciones exluyentes. Por ejemplo:
El código que utilizaremos será
<input type="radio" name="entrevista" value="mañana">
donde el tipo radio indica que se trata de botones de opción.
Lo importante de los botones de opción es que todos los pertenecientes
al mismo grupo deben llevar el mismo atributo en name, variando el correspondiente
a value para diferenciar la opción marcada.
Si quisiéramos que una de las opciones apareciera marcada por defecto
podríamos añadir como última palabra de la etiqueta el
atributo checked
Casillas de verificación
Las casillas de verificación se asemejan a los botones de opción, pero permiten que se marque más de una opción. Por ejemplo:
El código correspondiente es:
<input type="checkbox" name="Teatro" value="X">
Checkbox indica que se trata de casillas de verificación. En name iremos
poniendo palabras que identifiquen las opciones y en el campo value pondremos
el texto que queremos recibir cuando se marque la casilla. En el ejemplo se
ha puesto una X, aunque podríamos haber puesto un Sí o cualquier
otro conjunto de caracteres.
Cuadros de menú y listas
Los cuadros de menú permitirán presentar una lista de opciones predeterminadas cuando creamos el formulario. Tienen dos formas de presentación: los menús desplegables y las listas. Salvo la forma de presentarlo, la única diferencia importante entre ambos modos de presentación es que mientras que en los menús desplegables sólo se puede seleccionar una opción, en las listas es posible seleccionar varias si así lo indicamos al construir el formulario.
El código necesario es idéntico para ambos tipos
de presentaciones e incluye el identificador de tipo select, un nombre para
el menú o lista (puede ser el que quieras aunque en este caso se haya
puesto "selecciones". A continuación se colocan las diferentes
posibilidades de la lista encerradas entre <option> y </option>.
Observa que, nuevamente este tipo de campo tiene etiquetas de cierre, tanto
en las opciones como en la propia definición del tipo.
<select name="selecciones">
<option>África</option>
<option>América</option>
<option>Asia</option>
<option>Europa</option>
<option>Oceanía</option>
</select>
La diferencia entre un menú y una lista estriba en que la lista lleva
en la primera etiqueta un atributo size="n"
donde n es el número de filas que tendremos a la vista simultáneamente.
Si le añadimos al final de la etiqueta de entrada la palabra multiple
podremos marcar varias de las posibilidades mostradas, algo que no podemos hacer
cuando se trata de un menú.
Botones de acción
El último tipo de componente del formulario es el botón que se utiliza para proceder al envío o la eliminación de los datos.
Los códigos de ambos botones son muy similares
<input type="submit" name="submit" value="Enviar">
<input type="reset" name="reset" value="Borrar datos">
Por comodidad lo más sencillo es hacer que los atributos type y name
sean coincidentes en cada uno de los casos. En el atributo value pondremos el
texto que queremos que aparezca en el botón.
Crear campos de un formulario con 
Vamos
a crear un formulario para realizar una encuesta Recuerda que puedes
escribir etiquetas con la opción Insertar /Etiqueta HTML pero
sólo te permitirá hacerlo de una en una (la de aparertura se considera
una etiqueta y la de cierre otra). Si optas por este método la forma
más rápida de activar la ventana de entrada es pulsar la tecla
Alt y, sin soltarla, pulsar primero la I y después la H. Si prefieres
hacerlo todo de un tirón puedes recurrir a Edición / Origen
de HTML y arrancar el bloc de notas.