Vemos detenidamente los distintos elementos de formulario que sirven para introducir texto.
El lenguaje HTML nos propone una gran diversidad de alternativas a la hora de crear nuestros formularios, es decir, una gran variedad de elementos para diferentes propósitos. Estas van desde la clásica caja de texto, hasta la lista de opciones en un menú desplegable, pasando por las cajas de validación, etc.
En el artículo anterior del Manual de HTML ya vimos cómo iniciar nuestro formulario con la etiqueta <form> y los distintos atributos que tenemos que utilizar para configurar su funcionamiento.
En el presente artículo veremos las etiquetas que tenemos que utilizar para crear campos de texto, que pueden ser de dos tipos. Veamos en qué consiste cada una de estas modalidades y como podemos implementarlas en nuestro formulario.
Etiqueta INPUT para texto corto
Las cajas de texto son colocadas por medio de la etiqueta <input>. Dentro de esta etiqueta hemos de especificar el valor de dos atributos: type y name.
La etiqueta tendrá la siguiente forma:
<input type="text" name="nombre">
De este modo expresamos nuestro deseo de crear una caja de texto cuyo contenido será llamado "nombre" (por ejemplo, en el caso de la etiqueta anterior, pero podemos poner distintos nombres a cada uno de los campos de texto que habrán en los formularios). El aspecto de este tipo de cajas es de sobra conocido, aquí lo podéis ver:
El nombre del elemento del formulario es de gran importancia para poder identificarlo en nuestro programa de procesamiento o en el mail recibido. Por otra parte, es importante indicar el atributo type, ya que, como veremos, existen otras modalidades de elementos de formulario que usan esta misma etiqueta INPUT.
El empleo de estas cajas esta fundamentalmente destinado a la toma de datos breves: palabras o conjuntos de palabras de longitud relativamente corta. Veremos más adelante que existe otra forma de tomar textos más largos a partir de otra etiqueta.
Además de estos dos atributos, esenciales para el correcto funcionamiento de nuestra etiqueta, existen otra serie de atributos que pueden resultarnos de utilidad pero que no son imprescindibles:
size
Define el tamaño de la caja de texto, en número de caracteres visibles. Si al escribir el usuario llega al final de la caja, el texto que escriba a continuación también cabrá dentro del campo pero irá desfilando, a medida que se escribe, haciendo desaparecer la parte de texto que queda a la izquierda.
maxlength
Indica el tamaño máximo del texto, en número de caracteres, que puede ser escrito en el campo. En caso que el campo de texto tenga definido el atributo maxlength, el navegador no permitirá escribir más caracteres en ese campo que los que hayamos indicado.
Nota:
Es importante no confundir el atributo maxlength con el atributo size. Mientras size define el tamaño visible de la caja de texto, maxlength indica el tamaño máximo real del texto que se puede escribir. Podemos tener una caja de texto con un tamaño aparente (size) que es menor que el tamaño máximo (maxlength). Lo que ocurrirá en este caso es que, al escribir, si sobrepasamos el espacio marcado por size, el texto ira desfilando dentro de la caja hasta que lleguemos a su tamaño máximo definido por maxlength, momento en el cual nos será imposible continuar escribiendo.
value
En algunos casos puede resultarnos interesante asignar un valor definido al campo en cuestión. Esto puede ayudar al usuario a rellenar más rápidamente el formulario o darle alguna idea sobre la naturaleza de datos que se requieren. Este valor inicial del campo puede ser expresado mediante el atributo value. Veamos su efecto con un ejemplo sencillo:
<input type="text" name="nombre" value="Perico Palotes">
Genera un campo de este estilo:
Veremos posteriormente que este atributo puede resultar bastante relevante en determinadas situaciones.
Nota: estamos obligados a utilizar la etiqueta <form>
Aunque esperamos que haya quedado claro a medida que se lee en estos capítulos sobre formularios, hemos querido remarcarlo para que quede muy claro: Cuando queremos utilizar, en cualquer situación elementos de formulario, debemos escribirlos siempre entre las etiquetas <form> y </form>. De lo contrario, los elementos se verán perfectamente en Explorer pero no en Netscape. (Actualizado: en estos momentos la mayoría de los navegadores pueden interpretar bien los campos de texto sin que estén en una etiqueta FORM, sin embargo, la etiqueta FORM sigue siendo imprescindible, porque indica qué se desea hacer con los campos de texto, como el action a realizar, y engloba qué elementos pertenecen a qué formularios)
Dicho de otra forma, en Netscape no se visualizan los elementos de formulario a no ser que esten colocados entre las correspondientes etiquetas de inicio y fin de formulario.
Es por ello que para mostrar un campo de texto no vale con poner la etiqueta <input>, sino que habrá que ponerla dentro de un formulario. Así:
<form>
<input type="text" name="nombre" value="Perico Palotes">
</form>
Etiqueta INPUT, modalidad de texto oculto
Hay determinados casos en los que podemos desear esconder el texto escrito en el campo INPUT, por medio asteriscos, de manera que aporte una cierta confidencialidad. Este tipo de campos son análogos a los de texto, con una sola diferencia: remplazamos el atributo type="text" por type="password":
<input type="password" name="nombre">
En este caso, podéis comprobar que, al escribir dentro del campo, en lugar de texto veréis asteriscos.
Estos campos son ideales para la introducción de datos confidenciales, principalmente códigos de acceso o claves. Se ve en funcionamiento a continuación.
Etiqueta TEXTAREA para texto largo
Si deseamos poner a la disposición de usuario un campo de texto donde pueda escribir cómodamente sobre un espacio compuesto de varias líneas, hemos de invocar una nueva etiqueta: <textarea> y su cierre correspondiente.
Este tipo de campos son prácticos cuando el contenido a enviar no es un nombre, teléfono, edad o cualquier otro dato breve, sino más bien, un comentario, opinión, etc. en los que existe la posibilidad que el visitante desee rellenar varias líneas.
Dentro de la etiqueta textarea deberemos indicar, como para el caso visto anteriormente, el atributo name para asociar el contenido a un nombre que será asemejado a una variable en los programás de proceso. Además, podemos definir las dimensiones del campo a partir de los atributos siguientes:
rows
Define el número de líneas del campo de texto.
cols
Define el número de columnas del campo de texto.
La etiqueta queda por tanto de esta forma:
<textarea name="comentario" rows="10" cols="40"></textarea>
El resultado es el siguiente:
Asimismo, es posible predefinir el contenido del campo. Para ello, no usaremos el atributo value, sino que escribiremos dentro de la etiqueta el contenido que deseamos atribuirle. Veámoslo:
<textarea name="comentario" rows="10" cols="40">Escribe tu comentario....</textarea>
Dará como resultado:
Como se podrá imaginar, los campos de texto son de vital importancia para los formularios, pero no son los únicos tipos de elementos que podemos colocar dentro de éstos. En el siguiente artículo veremos otros tipos de elementos para formularios.
Explicamos la sintaxis y el funcionamiento de las cajas y listas de selección, casillas de verificación y botones de radio.
Seguramente hayamos percibido que los textos son un manera muy practica de hacernos llegar la información del navegante. No obstante, en muchos casos, permitir al usuario que escriba cualquier texto permite demasiada libertad y puede que la información que éste escriba no sea la que nosotros estamos necesitando. Por otra parte, para determinados casos, los textos libres son difícilmente adaptables a programás que puedan procesarlos debidamente. Es por ello que, en determinados casos, puede resultar más efectivo proponer una elección al navegante a partir del planteamiento de una serie de opciones disponibles y definidas por nosotros.
Por ejemplo, pensemos que queremos que el usuario indique su país de residencia. En ese caso podríamos ofrecer una lista de países para que seleccione el que sea. Este mismo caso se puede aplicar a gran variedad de informaciones, como el tipo de tarjeta de crédito para un pago, la puntuación que da a un recurso, si quiere recibir o no un boletín de novedades, etc...
Este tipo de opciones predefinidas por nosotros pueden ser expresadas por medio de diferentes campos de formulario. Veamos a continuación cuales son:
Listas de opciones
Las listas de opciones son ese tipo de menús desplegables que nos permiten elegir una (o varias) de las múltiples opciones que nos proponen. Para construirlas emplearemos una etiqueta <select>, con su respectivo cierre:
Como para los casos ya vistos, dentro de esta etiqueta definiremos su nombre por medio del atributo name. Cada opción será incluida en una línea precedida de la etiqueta <option>.
Podemos ver, a partir de estas directivas, la forma más típica y sencilla de esta etiqueta:
<select name="estacion">
<option>Primavera</option>
<option>Verano</option>
<option>Otoño</option>
<option>Invierno</option>
</select>
El resultado es:
Esta estructura puede verse modificada principalmente a partir de otros dos atributos:
size
Indica el número de valores mostrados a la vez en la lista. Lo típico es que no se incluya ningún valor en el atributo size, en ese caso tendremos un campo de opciones desplegable, pero si indicamos size aparecerá un campo donde veremos las opciones definidas por size y el resto podrán ser vistos por medio de la barra lateral de desplazamiento.
multiple
Permite la selección de más varios elementos de la lista. La elección de más de un elemento se hace como con el explorador de Windows, a partir de las teclas ctrl o mayúsculas (la flecha hacia arriba, también llamada shift). Este atributo se expresa sin valor alguno, es decir, no se utiliza con el igual: simplemente se pone para conseguir el efecto, o no se pone si queremos una lista desplegable común.
Consejo: Si es posible, no uses multiple
No recomendamos especialmente la puesta en practica de esta opción ya que el manejo de las teclas ctrl o shift para elegir varias opciones puede ser desconocido para el navegante. Evidentemente, siempre cabe la posibilidad de explicarle como funciona aunque no dejara de ser una complicación para más para el visitante.
Veamos cual es el efecto producido por estos dos atributos cambiando la línea:
<select name="estacion">
por:
<select name="estacion" size="3" multiple>
La lista quedara de esta forma:
La etiqueta <option> puede asimismo ser matizada por medio de otros atributos
selected
Del mismo modo que multiple, este atributo no toma ningún valor sino que simplemente indica que la opción que lo presenta esta elegida por defecto.
Así, si cambiamos la línea del código anterior:
<option>Otoño</option>
por:
<option selected>Otoño</option>
El resultado será:
value
Define el valor de la opción que será enviado al programa o correo electrónico si el usuario elige esa opción. Este atributo puede resultar muy útil si el formulario es enviado a un programa para su procesamiento, puesto que a cada opción se le puede asociar un número o letra, lo cual es más fácilmente manipulable que una palabra o texto. podríamos así escribir líneas del tipo:
<option value="1">Primavera</option>
De este modo, si el usuario elige primavera, lo que le llegara al programa (o correo) es una variable llamada estacion que tendrá com valor 1. En el correo electrónico recibiríamos:
estacion=1
Botones de radio
Existe otra alternativa para plantear una elección, en este caso, obligamos al internauta a elegir únicamente una de las opciones que se le proponen.
La etiqueta empleada en este caso es <input> en la cual tendremos el atributo type ha de tomar el valor radio. Veamos un ejemplo:
<input type="radio" name="estacion" value="1">Primavera
<input type="radio" name="estacion" value="2">Verano
<input type="radio" name="estacion" value="3">Otoño
<input type="radio" name="estacion" value="4">Invierno
Nota:
Hay que fijarse que la etiqueta <input type="radio"> sólo coloca la casilla pinchable en la página. Los textos que aparecen al lado, así como los saltos de línea los colocamos con el correspondiente texto en el código de la página y las etiquetas HTML que necesitemos.
El resultado es el siguiente:
Como puede verse, a cada una de las opciones se le atribuye una etiqueta input dentro de la cual asignamos el mismo nombre (name) para todas las opciones y un valor (value) distinto. Si el usuario elige supuestamente Otoño, recibiremos en nuestro correo una línea tal que esta:
estacion=3
Cabe señalar que es posible preseleccionar por defecto una de las opciones. Esto puede ser conseguido por medio del atributo checked:
<input type="radio" name="estacion" value="2" checked>Verano
Veamos el efecto:
Cajas de validación
Este tipo de elementos pueden ser activados o desactivados por el visitante por un simple clic sobre la caja en cuestión. La sintaxis utilizada es muy similar a las vistas anteriormente:
<input type="checkbox" name="paella">Me gusta la paella
El efecto:
La única diferencia fundamental es el valor adoptado por el atributo type.
Del mismo modo que para los botones de radio, podemos activar la caja por medio del atributo checked.
El tipo de información que llegara a nuestro correo (o al programa) será del tipo:
paella=on (u off dependiendo si ha sido activada o no)
MP
MP( )
POSTS: 
PREMIOS: 
REPUTACIÓN: 
OBSERVACIONES: 
RANGO: 
