Crea tu web, tutor html, css

Formularios en las páginas web con HTML

Formularios web

Las páginas webs no son solo permiten presentar documentos de forma más o menos atractiva al destinatario final, sino que también proporcionan elementos para interactuar con él. De esta manera el usuario final puede enviar su opinión de la página al autor, o realizar una compra en línea.

Los elementos de las pa´gina web para realizar estas acciones se conocen como formularios y seguro que todos los habéis visto y utilizado alguna vez. Recuerda que en la última versión de HTML el uso y control sobre los formularios se mejora notablemente

Un ejemplo muy sencillo sería este:

Escribe tu nombre:

¿Estás registrado?    

Para crearlo se ha empleado este código

<form action="" method="post" name="formul">
Tu nombre: <input name="nombre" type="text">
¿Estás registrado?
<label>
<input type="radio" name="Si" value="1">Si</label>
<label>
<input type="radio" name="Si" value="0">No</label>
<input type="Submit" VALUE="Enviar">
<input name="Reset" type="reset" id="Reset" value="Borrar">
</form>

El formulario está formado por una serie de elementos (cajas de texto, casillas de verificación, botones...) encerrados entre las etiquetas <form> </form>. Como verás en esta etiqueta existen varios parámetros como son:

ACTION la acción que se ejecutará al pulsar el botón de enviar. Habitualmente será una URL a un programa CGI encargado de procesar los datos del formulario. Puede ser también mailto: seguido de una dirección de correo electrónico, en este caso el formulario se enviará por correo, en cuyo es recomendable añadir el parámetro enctype="text/plain" para que el mensaje sea fácil de leer.

METHOD indica como se enviarán los datos del formulario al programa que los procese: POST de forma interna (oculta) y GET añadido a la dirección URL del programa. Si usas el formulario para un mailto: debes usr el método POST

NAME es el nombre que identifica al formulario, útil si se usan scripts dentro de la página.

En HTML5 el uso y control sobre los formularios se amplía bastante, permitiendo incluso el control sobre los datos ingresados

Los datos enviados desde un formulario deben ser procesados por un programa que se ejecuta en el servidor

Campos de texto

Los controles o cajas de texto permiten al usuario escribir texto en el formulario. Pueden ser cajas de una solo línea o cuadros de texto con varias líneas. Las primeras usan la etiqueta <input> y pueden ser de texto simple (se ve lo que escribimos) o de tipo password (lo que escribimos es visto como una serie de asteriscos).

<input type="text">
<input type ="password">

Ojo, el dato escrito en el segundo campo no se ve pero eso no quiere decir que esté codificado en ninguna manera. Ambos tipos comparten todos sus atributos que son:

Parámetro Uso
size Tamaño en columnas de la caja de texto.
maxlenght Número máximo de caracteres que se pueden teclear.
value Texto por defecto que aparecerá en el campo.

Pero si necesitamos que el usuario escriba más llineas de texto pues usamos la etiqueta <textareaA></textareaA>:

<textarea>Comienza a escribir </textarea> (html form textarea)

Si escribimos algun texto dentro de esta etiqueta, ese texto aparecerá por defecto en ese area de texto. Admite estos parámetros:

Parámetro Uso
rows Filas que ocupará la caja de texto.
cols Columnas que ocupará la caja de texto.
Estos campos permiten al usuario escribir lo que deseen. El programa de gestión del formulario deberá filtrarlo adecuadamente por seguridad.

Opciones

Para que el usuario pueda marcar una de entre varias opciones podemos usar un campo input de tipo RADIO. En nuestro ejemplo lo hemos usado:

¿Tienes hijos?
Si <input name="Registrado" type="radio" value="1">
No <input name="Registrado" type="radio" value="0">
¿Tienes hijos?
Si
No

Fíjate que ambos input usan el mismo atributo name, de esa manera el navegador los reconoce como un conjunto de respuestas alternativas.

Parámetro Significado
value
Este es el valor que asignará a la variable.
checked Si lo indicamos en una de las opciones esta será la que esté activada por defecto.
Estas opciones son excluyentes, solo se puede marcar una de ellas

Lista de opciones

Hay una alternativa al control de selección de alternativas: las listas desplegables. Mediante este control el usuasrio puede seleccionar una opción de entre un grupo que aparece en una lista desplegable. La lista se encierra en etiquetas <select></select>, y las opciones se poenen en etiquetas <option></option>:

<select name="idioma">
  <option>Español</option>
  <option>Inglés</option>
  <option>Francés</option>
  <option>Alemán</option>
</select>

Este formulario te serviía para sleccionar un idioma

Los parámetros que admite select son las siguientes:

Parámetro Significado
size El número de opciones que podremos ver. Si es mayor que 1 veremos una lista de selección con un scroll y, si no, veremos una lista desplegable.
multiple Si lo indicamos podremos elegir más de una opción, para ello el usuario utilizará la tecla CTRL y el botón activo del ratón.

Y option estos otros:

Parámetro Significado
value Este es el valor que asignará a la variable.
selected La opción con esta propiedad será la que aparezca seleccionada por defecto.
lateralApdo

Botones de formulario

Existen dos clases e botones: uno que se utiliza para poner en marcha la operación indicada por ACTION (botones submit) y otro que sirve para resetear el formulario borrando el contenido de todos los controles:

<input type="submit"> <input type="reset"> Se mostrararía como este par de botones

En ambos casos su puede usar el parámetro VALUE para el texto que aparece dentro del botón. El botón de submit puede ser una imagen, por ejemplo

<input name="imageField" type="image" src="imgs/botonel.gif" width="85" height="46" border="0">

Que se vería como una imagen

Este botón actua como un botón tipo submit, pero además de los datos del formulario envía las coordenadas X Y del punto de la imagen donde pulsó el usuario.
lateralApdo

Marcas de verificación

Son controles parecidos a los campos de opciones pero que no van agrupados, o sea no son excluyentes, Sirven para que el usuario coloque una marca de si o no (verdadero o falso, marcado o no marcado). Lo podremos conseguir por medio de controles de confirmación:

<input name="Opina" type="checkbox">¿Te gusta el curso?
<input name="Recomendar" type="checkbox">¿Lo recomendarías?

Este código crearía en el formulario un cuestionario como éste:

¿Te gusta el curso? ¿Lo recomendarías?

Si queremos que el control esté activado por defecto le añadiremos el parámetro checked.

Las marcas de verificación no son excluyentes, se pueden seleccionar varias opciones

Campos ocultos

Mediante un formulario podemos también enviar datos al programa encargado de procesarlo. Esto se realiza mediante los llamados campos ocultos, que son campos input de tipo hidden, y se llaman así porque no se ven en la página web, o sea, el usuario no los ve a menos que se mete en la vista de código de la página, digo esto poruqe no vayamos a pensar que con estos campos podemos pasar información privada mediante los formularios. El código para este tipo de campos es algo como esto:

<input type="hidden" name="Curso" value="Javascript">

De esta manera si en un sitio tengo muchos formularios sabré que estos datos en concreto vienen de la página donde se encuentra este formulario en concreto, gracias al campo oculto Curso. Su uso realmente no lo verás hasta que no escribas o utilices programas para gestionar los formularios.

Los campos ocultos están ocultos solo para el usuario que ve la página como la muestra el navegador.
Si entra en el código de la página podrá ver este campo. Su utilidad está en el programa que gestione el formulario