☣ HTML Básico

Menú

Enlaces

Visitas

3.8. Formularios

Dentro de esta etiqueta <form> debemos especificar algunos atributos.

Está delimitado por las etiquetas:
<form></form>

3.8.1. Atributos para formularios

Va dentro de la etiqueta:
<form>

3.8.1.1. action

Define el tipo de acción a llevar a cabo con el formulario. Existen dos posibilidades:
<form action="mailto:direccion@correo.com" ...></form>

<form action="dirección del archivo" ...></form>

3.8.1.2. method

Este atributo se encarga de especificar la forma en la que el formulario es enviado. Los dos valores posibles que puede tomar este atributo son post y get. A efectos prácticos y, salvo que se os diga lo contrario, daremos siempre el valor post.
<form action="mailto:direccion@correo.com (o nombre del archivo de proceso)" method="post"></form>

3.8.1.3. enctype

Se utiliza para indicar la forma en la que viajará la información que se mande por el formulario. En el caso más corriente, enviar el formulario por correo electrónico, el valor de este atributo debe de ser "text/plain". Así conseguimos que se envíe el contenido del formulario como texto plano dentro del email. Si queremos que el formulario se procese automáticamente por un programa, generalmente no utilizaremos este atributo, de modo que tome su valor por defecto, es decir, no incluiremos enctype dentro de la etiqueta <form>.
<form action="mailto:direccion@correo.com (o nombre del archivo de proceso)" method="post" enctype="text/plain"></form>

3.8.2. Elementos de Formularios

3.8.2.1. Campos de texto

3.8.2.1.1. Texto corto

Dentro de esta etiqueta hemos de especificar el valor de dos atributos type y name. 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, maxlength y value.

Va dentro de la etiqueta:
<input>
Ejemplo:
<form action="mailto:direccion@correo.com (o nombre del archivo de proceso)" method="post" enctype="text/plain">
<input type="text" name="nombre">
</form>
Resultado:
3.8.2.1.1.1. 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.

Va dentro de la etiqueta:
<input>
Ejemplo:
<form action="mailto:direccion@correo.com (o nombre del archivo de proceso)" method="post" enctype="text/plain">
<input type="text" name="nombre" size="5">
<input type="text" name="nombre2" size="10">
<input type="text" name="nombre3" size="15">
</form>
Resultado:


3.8.2.1.1.2. maxlength
Indica el tamaño máximo del texto, en número de caracteres, que puede ser escrito en el campo. En el 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.

Va dentro de la etiqueta:
<input>
Ejemplo:
<form action="mailto:direccion@correo.com (o nombre del archivo de proceso)" method="post" enctype="text/plain">
<input type="text" name="nombre" maxlength="5">
<input type="text" name="nombre2" maxlength="10">
<input type="text" name="nombre3" maxlength="15">
</form>
Resultado:


3.8.2.1.1.3. value
Asigna 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.

Va dentro de la etiqueta:
<input>
Ejemplo:
<form action="mailto:direccion@correo.com (o nombre del archivo de proceso)" method="post" enctype="text/plain">
<input type="text" name="nombre" value="Pedro">
<input type="text" name="nombre2" value="Fernando">
<input type="text" name="nombre3" value="Escribe tu comentario.">
</form>
Resultado:


3.8.2.1.2. Texto oculto

Hay determinados casos en los que podemos desear esconder el texto escrito en el campo <input>, por medio de 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".

Va dentro de la etiqueta:
<input>
Ejemplo:
<form action="mailto:direccion@correo.com (o nombre del archivo de proceso)" method="post" enctype="text/plain">
<input type="password" name="nombre">
</form>
Resultado:

3.8.2.1.3. Texto largo

Dentro de la etiqueta <textarea> deberemos indicar el atributo name para asociar el contenido a un nombre que será asemejado a una variable en los programas de proceso. 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. Podemos definir las dimensiones del campo a partir de los atributos rows y cols.

Va dentro de la etiqueta:
<textarea>
Ejemplo:
<form action="mailto:direccion@correo.com (o nombre del archivo de proceso)" method="post" enctype="text/plain">
<textarea type="text" name="comentario">Escribe tu comentario</textarea>
</form>
Resultado:
3.8.2.1.3.1. rows
Define el número de líneas del campo de texto.

Va dentro de la etiqueta:
<textarea>
Ejemplo:
<form action="mailto:direccion@correo.com (o nombre del archivo de proceso)" method="post" enctype="text/plain">
<textarea type="text" name="comentario" rows="3">Escribe tu comentario</textarea>
<textarea type="text" name="comentario" rows="8">Escribe tu comentario</textarea>
</form>
Resultado:
3.8.2.1.3.2. cols
Define el número de columnas del campo de texto.

Va dentro de la etiqueta:
<textarea>
Ejemplo:
<form action="mailto:direccion@correo.com (o nombre del archivo de proceso)" method="post" enctype="text/plain">
<textarea type="text" name="comentario" cols="15">Escribe tu comentario</textarea>
<textarea type="text" name="comentario" cols="30">Escribe tu comentario</textarea>
</form>
Resultado:

3.8.2.2. 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. Definiremos su nombre por medio del atributo name. Cada opción va entre <option> y </option>. Va entre las etiquetas:
<select>
Ejemplo:
<form action="mailto:direccion@correo.com (o nombre del archivo de proceso)" method="post" enctype="text/plain">
<select name="estacion">
<option>Primavera</option>
<option>Verano</option>
<option>Otoño</option>
<option>Invierno</option>
</select>
</form>
Resultado:

3.8.2.2.1. size y multiple

size. Indica el número de valores mostrados a la vez en la lista.

multiple. Permite la selección de 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.

Va dentro de la etiqueta:
<select>
Ejemplo:
<form action="mailto:direccion@correo.com (o nombre del archivo de proceso)" method="post" enctype="text/plain">
<select name="estacion" size="3" multiple>
<option>Primavera</option>
<option>Verano</option>
<option>Otoño</option>
<option>Invierno</option>
</select>
</form>
Resultado:

3.8.2.2.2. selected y value

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.

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 llegará al programa (o correo) es una variable llamada estacion que tendrá como valor 1. En el correo electrónico recibiríamos: estacion=1.

Va dentro de la etiqueta:
<option>
Ejemplo:
<form action="mailto:direccion@correo.com (o nombre del archivo de proceso)" method="post" enctype="text/plain">
<select name="estacion">
<option value="1">Primavera</option>
<option value="2">Verano</option>
<option value="3" selected>Otoño</option>
<option value="4">Invierno</option>
</select>
</form>
Resultado:

3.8.2.3. 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 que ha de tomar el valor radio.
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.

Va dentro de la etiqueta:
<input>
Ejemplo:
<form action="mailto:direccion@correo.com (o nombre del archivo de proceso)" method="post" enctype="text/plain">
<input type="radio" name="estacion" value="1">Primavera<br>
<input type="radio" name="estacion" value="2">Verano<br>
<input type="radio" name="estacion" value="3">Otoño<br>
<input type="radio" name="estacion" value="4">Invierno<br>
</form>
Resultado:
Primavera
Verano
Otoño
Invierno

3.8.2.3.1. checked

Preselecciona por defecto una de las opciones.

Va dentro de la etiqueta:

<input>
Ejemplo:
<form action="mailto:direccion@correo.com (o nombre del archivo de proceso)" method="post" enctype="text/plain">
<input type="radio" name="estacion" value="1">Primavera<br>
<input type="radio" name="estacion" value="2">Verano<br>
<input type="radio" name="estacion" value="3" checked>Otoño<br>
<input type="radio" name="estacion" value="4">Invierno<br>
</form>
Resultado:
Primavera
Verano
Otoño
Invierno

3.8.2.4. 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 única diferencia fundamental es el valor adoptado por el atributo type. El atributo type="text" se sustituye por type="checkbox".

Va dentro de la etiqueta:
<input>
Ejemplo:
<form action="mailto:direccion@correo.com (o nombre del archivo de proceso)" method="post" enctype="text/plain">
<input type="checkbox" name="estacion">Primavera<br>
<input type="checkbox" name="estacion">Verano<br>
<input type="checkbox" name="estacion">Otoño<br>
<input type="checkbox" name="estacion">Invierno<br>
</form>
Resultado:
Primavera
Verano
Otoño
Invierno

3.8.2.4.1. checked

Preselecciona por defecto una de las opciones. El tipo de información que llegara a nuestro correo (o al programa) será del tipo: oto=on (u off dependiendo si ha sido activada o no).

Va dentro de la etiqueta:
<input>
Ejemplo:
<form action="mailto:direccion@correo.com (o nombre del archivo de proceso)" method="post" enctype="text/plain">
<input type="checkbox" name="Prima" value="1"> Primavera<br>
<input type="checkbox" name="Vera" value="2"> Verano<br>
<input type="checkbox" name="Oto" value="3" checked> Otoño<br>
<input type="checkbox" name="Invier" value="4"> Invierno<br>
</form>
Resultado:
Primavera
Verano
Otoño
Invierno

3.8.3. Envío, borrado y demás en formularios HTML

3.8.3.1. Botón de envío

Para dar por finalizado el proceso de relleno del formulario y hacerlo llegar a su gestor, el navegante ha de validarlo por medio de un botón previsto a tal efecto. La construcción de dicho botón no reviste ninguna dificultad una vez familiarizados con las etiquetas <input> ya vistas. Como puede verse, tan solo hemos de especificar que se trata de un botón de envío type="submit" y hemos de definir el mensaje del botón por medio del atributo value.

Va dentro de la etiqueta:
<input>
Ejemplo:
<form action="mailto:direccion@correo.com (o nombre del archivo de proceso)" method="post" enctype="text/plain">
<input type="submit" value="Enviar">
</form>
Resultado:

3.8.3.2. Botón de borrado

Este botón nos permitirá borrar el formulario por completo, en el caso de que el usuario desee rehacerlo desde el principio. A diferencia del botón de envío, indispensable en cualquier formulario, el botón de borrado resulta meramente optativo y no es utilizado frecuentemente. Hay que tener cuidado de no ponerlo muy cerca del botón de envío y de distinguir claramente el uno del otro, para que ningún usuario borre el contenido del formulario que acaba de rellenar por error.

Va dentro de la etiqueta:
<input>
Ejemplo:
<form action="mailto:direccion@correo.com (o nombre del archivo de proceso)" method="post" enctype="text/plain">
<input type="reset" value="Borrar">
</form>
Resultado:

3.8.3.3. Datos ocultos

En algunos casos, aparte de los propios datos rellenados por el usuario, puede resultar práctico enviar datos definidos por nosotros mismos que ayuden al programa en su procesamiento del formulario. Este tipo de datos, que no se muestran en la página pero si pueden ser detectados solicitando el código fuente, no son frecuentemente utilizados por páginas construidas en HTML, son más bien usados por páginas que emplean tecnologías de servidor. No os asustéis, veremos más adelante qué quiere decir esto. Tan solo queremos dar constancia de su existencia y de su modo creación. Esta etiqueta, incluida dentro de nuestro formulario, enviará un dato adicional al correo o programa encargado de la gestión del formulario. Podríamos, a partir de este dato, dar a conocer al programa el origen del formulario o algún tipo de acción a llevar a cabo (una redirección por ejemplo).

Va dentro de la etiqueta:
<input>
Ejemplo:
<form action="mailto:direccion@correo.com (o nombre del archivo de proceso)" method="post" enctype="text/plain">
<input type="hidden" name="sitio" value="www.pagweb.com">
</form>
Resultado:

3.8.3.4. Botones normales

Dentro de los formularios también podemos colocar botones normales, pulsables como cualquier otro botón. Igual que ocurre con los campos hidden, estos botones por si solos no tienen mucha utilidad pero podremos necesitarlos para realizar acciones en el futuro. El uso más frecuente de un botón es en la programación en el cliente. Utilizando lenguajes como JavaScript podemos definir acciones a tomar cuando un visitante pulse el botón de una página web.

Va dentro de la etiqueta:
<input>
Ejemplo:
<form action="mailto:direccion@correo.com (o nombre del archivo de proceso)" method="post" enctype="text/plain">
<input type="button" value="Texto escrito en el botón">
</form>
Resultado:

3.8.4. Ejemplo formulario

Vamos a ver lo que recibirían por correo electrónico en la empresa de aviones cuando un usuario cualquiera rellenase este formulario y pulsase sobre el botón de envío.

nombre=Raúl Gonzalez Blanco
email=raulgonzalezblanco@yayoo.es
poblacion=Gelsenkirchen, Renania del Norte-Westfalia (Alemania)
sexo=Varon
utilizacion=2
comentarios=No creo que sea una buena línea. Poner más líneas de aviones.
recibir_info=on
Ejemplo:
<form action="mailto:nombre@pagweb.com" method="post" enctype="text/plain"><br>
Nombre <input type="text" name="nombre" size="30" maxlength="100"><br>
Email <input type="text" name="email" size="25" maxlength="100" value="@"><br>
Población <input type="text" name="poblacion" size="20" maxlength="60"><br>
Sexo <br>
<input type="radio" name="sexo" value="Varon" checked>Hombre <br>
<input type="radio" name="sexo" value="Hembra">Mujer <br>
Frecuencia de los viajes <br>
<select name="utilizacion"><br>
<option value="1">Varias veces al día<br>
<option value="2">Una vez al día<br>
<option value="3">Varias veces a la semana<br>
<option value="4">Varias veces al mes<br>
</select><br>
Comentarios sobre su satisfacción personal<br>
<textarea cols="30" rows="7" name="comentarios"></textarea><br>
<br>
<input type="checkbox" name="recibir_info" checked>Deseo recibir notificación de las novedades en las líneas de aviones.<br>
<br>
<input type="submit" value="Enviar formulario"><br>
<br>
<input type="Reset" value="Borrar todo"><br>
</form>
Resultado:
Nombre
Email
Población
Sexo
Hombre
Mujer

Frecuencia de los viajes


Comentarios sobre su satisfacción personal


Deseo recibir notificación de las novedades en las líneas de aviones.





« 3.7. Tablas
A.1. Código de idiomas »
♼