Formularios en HTML

Publicado en 9 noviembre 2010 por Prof & Lic. Luis E. Aponte I. Programando en PHP

Formulario - <form> <?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

Un formulario permite que el visitante al sitio cargue datos y sean enviados al servidor.

Es el medio ideal para registrar comentarios del visitante sobre el sitio, solicitar productos, sacar turnos etc.

De todos modos veremos que el lenguaje HTML solo tiene el objetivo de crear el formulario. El HTML no tiene la responsabilidad de registrar los datos en el servidor, esta actividad está delegada a un lenguaje que se ejecute en el servidor (PHP, ASP, ASP.Net, JSP etc.)

Para crear un formulario debemos utilizar el elemento form, que tiene marca de comienzo y fin. Dentro de la marca form veremos otros elementos para crear botones, editores de línea, cuadros de chequeo, radios de selección etc.

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

1) action

Define el tipo de acción a llevar a cabo con el formulario. Como ya hemos dicho, existen dos posibilidades:

• El formulario es enviado a una dirección de correo electrónico

• El formulario es enviado a un programa o script que procesa su contenido

En el primer caso, el contenido del formulario es enviado a la dirección de correo electrónico especificada por medio de una sintaxis de este tipo:

Si lo que queremos es que el formulario sea procesado por un programa, hemos de especificar la dirección del archivo que contiene dicho programa. La etiqueta quedaría en este caso de la siguiente forma:

2) method

Este atributo se encarga de especificar la forma en la que el formulario es enviado. Los dos valores posibles que puede tomar esta atributo son post y get.

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>

Ejemplo de Etiqueta <form>

Así, para el caso más habitual -el envío del formulario por correo- la etiqueta de creación del formulario tendrá el siguiente aspecto:

Elementos de Formularios.

1) Campos de Texto.

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 es de la siguiente forma:

El empleo de estas cajas esta fundamentalmente destinado a la toma de datos breves: palabras o conjuntos de palabras de longitud relativamente corta.

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:

a)size.

Define el tamaño de la caja en número de caracteres. Si al escribir el usuario llega al final de la caja, el texto ira desfilando a medida que se escribe haciendo desaparecer la parte de texto que queda a la izquierda.

b) maxlength.

Indica el tamaño máximo del texto que puede ser tomado por el formulario. Es importante no confundirlo con el atributo size. Mientras el primero define el tamaño aparente de la caja de texto, maxlength indica el tamaño máximo real del texto que se puede escribir.

c) 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:

d) Texto oculto.

Podemos esconder el texto escrito por medio asteriscos de manera a aportar 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":

e) 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 o cualquier otro dato breve, sino más bien, un comentario, opinión, etc.

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 programas 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:

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.

<textarea name="comentario" rows="10" cols="40">Escribe tu comentario....</textarea>

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. Para construirlas emplearemos una etiqueta con su respectivo cierre: <select>

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>

Esta estructura puede verse modificada principalmente a partir de otros dos atributos:

a) size. Indica el número de valores mostrados de la lista. El resto pueden ser vistos por medio de la barra lateral de desplazamiento.

b) múltiple. 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 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.

Ejemplo.

<select name="estacion"> por: <select name="estacion" size="3" multiple> La lista quedara de esta forma:

<?xml:namespace prefix = v ns = "urn:schemas-microsoft-com:vml" />

La etiqueta <option> puede asimismo ser matizada por medio de otros atributos:

c) 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>

d) 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 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.

3) Botones de Radio.

Alternativa para plantear una elección entre las opciones presentadas.

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

<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

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

4) Casillas de Verificació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

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.

5) Botones de Envío y Borrado en un Formulario.

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.

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. Su estructura sintáctica es análoga a la anterior:

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.

6) Botones Normales en un Formulario.

Dentro de los formularios también podemos colocar botones normales, pulsables como cualquier otro botón.

Su sintaxis es la siguiente.

Ejemplo de Formulario.

<html>

<head>

</form>

<body>

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>

<br> Frecuencia de los viajes

<br>

<select name="utilizacion"> <option value="1">Varias veces al dia

<option value="2">Una vez al dia

<option value="3">Varias veces a la semana

<option value="4">varias veces al mes

</select>

<br>

<br> Comentarios sobre su satisfacción personal

<br>

<br>

<br> <input type="checkbox" name="recibir_info" checked> Deseo recibir notificación de las novedades en las líneas de autobuses.

<br>

<br>

</form>

</body>

</html>

Casos de Formularios.

1. Formularios input type= “file”

El control de tipo file nos permite enviar un archivo al servidor. Nuevamente el HTML solo indica al navegador que debe enviar el archivo al servidor pero debe haber en el servidor un programa que lo almacene en una carpeta del servidor.

Veamos la sintaxis para disponer un control de tipo file:

Otra cosa muy importante a tener en cuenta cuando hacemos upload de archivos al servidor es inicializar la propiedad enctype del elemento form:

Con esto indicamos al navegador que el formulario almacena uno o más archivos que deben ser enviados al servidor.

Ejemplo.

1. Página que solicite el ingreso de un nombre y la foto de la persona.

 <html>

 <head>

 <title>Prueba de formulario</title>

 </head>

 <body>

 <form action="/registrardatos.php" method="post" enctype="multipart/form-data">

 Ingrese su nombre:

 <input type="text" name="nombre" size="30"><br>

 Seleccione la foto:

 <input type="file" name="foto">

 <br>

 <input type="submit" value="Enviar">

 </form>

 </body>

 </html>

2. Formulario de Agrupamiento de Controles.

El HTML dispone de un elemento llamado fieldset que solo tiene el objetivo de recuadrar y agrupar un conjunto de controles de un formulario.

Debemos encerrar todos los controles a agrupar entre las marcas <fieldset> y </fieldset>. Además para agregar un título a este recuadro debemos agregar otro elemento HTML llamado legend.

Ejemplo.

Desarrolle un formulario que solicite los datos personales de una persona y los datos del lugar donde trabaja, cada grupo de datos los dispondremos en un fieldset.

 <html>

 <head>

 <title>Prueba de formulario</title>

 </head>

 <body>

 <form action="/registrardatos.php" method="post">

 <fieldset>

 <legend>Datos personales</legend>

 Apellido y nombre:

 <input type="text" name="nombre" size="30"><br>

 Documento de identidad:

 <input type="text" name="dni" size="8"><br>

 Fecha de nacimiento:

 <input type="text" name="fechanacimiento" size="12"><br>

 Dirección:

 <input type="text" name="direccionpersona" size="30"><br>

 </fieldset>

 <fieldset>

 <legend>Datos Laborales</legend>

 Nombre de la empresa:

 <input type="text" name="nombreempresa" size="30"><br>

 Actividad:

 <input type="text" name="actividad" size="50"><br>

 Dirección:

 <input type="text" name="direccionempresa" size="30"><br>

 </fieldset>

 <input type="submit" value="Enviar">

 </form>

 </body>

 </html>

3. Formularios con Controles con Valores Iniciales.

Ejemplo.

Desarrolle un formulario que solicite el ingreso del nombre de una persona. Luego que seleccione si es mayor de edad o no (por defecto inicializar en sí), seguidamente el teléfono (cargar por defecto 453-) y por último en un textarea solicitar que ingrese comentarios.

 <html>

 <head>

 <title>Prueba de formulario</title>

 </head>

 <body>

 <form action="/registrardatos.php" method="post">

 Apellido y nombre:

 <input type="text" name="nombre" size="30"><br>

 Es mayor de edad?:<br>

 <input type="radio" name="radio1" checked

 value="si">Si<br>

 <input type="radio" name="radio1" value="no">No<br>

 Telefono:

 <input type="text" value="453-" name="telefono"

 size="15"><br>

 <textarea name="comentarios" rows="5" cols="40">Ingrese

 aqui sus comentarios</textarea><br>

 <input type="submit" value="Enviar">

 </form>

 </body>

 </html>

4. Formulario con Orden de Foco de Controles.

Todos los controles de formulario pueden definir una propiedad llamada tabindex que es un valor entero entre 0 y 32767. Este número indica el orden en que los controles toman foco. Cuando se presiona la tecla tab el navegador pasa el foco al siguiente control.

Ejemplo.

Desarrolle un formulario que contenga una matriz de tres filas y tres columnas de elementos de tipo text. Haremos que el foco sea por columna, es decir primero tomará foco el text de la primer fila y primer columna, luego del text de la segunda fila y primer columna etc (si no definimos la propiedad tabindex la carga de datos se efectua por fila).

<html>

<head>

<title>Prueba de formulario</title>

</head>

<body>

<br>

<br>

<br>

</form>

</body>

</html>

5. Formulario Inhabilitar Controles.

Todos los controles que hemos visto podemos hacer que aparezcan inhabilitados.

Ejemplo.

Supongamos que disponemos 3 controles de tipo radio para indicar que sección del sitio deseamos ingresar. Nosotros queremos mostrar que tiene 3 secciones pero una no está disponible. Esto lo resolvemos deshabilitando un radio:

 <html>

 <head>

 <title>Prueba de formulario</title>

 </head>

 <body>

 <form action="/registrardatos.php" method="post">

 Seleccione la sección donde desea ingresar:

 <br>

 <input type="radio" name="seccion" value="1"

 disabled>Niños<br>

 <input type="radio" name="seccion" value="2">Adolescentes<br>

 <input type="radio" name="seccion" value="3">Mayores<br>

 <input type="submit" value="Enviar">

 </form>

 </body>

 </html>

6. Formularios de Agrupamiento de Opciones.

<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post">
Seleccione una fruta o verdura:
<select name="articulo">
<optgroup label="Frutas">
<option value="1">Naranjas</option>
<option value="2">Manzanas</option>
<option value="3>Sandia</option>
<option value="4">Frutilla</option>
<option value="5">Durazno</option>
<option value="6">Ciruela</option>
</optgroup>
<optgroup label="Verduras">
<option value="7">Lechuga</option>
<option value="8">Acelga</option>
<option value="9">Zapallo</option>
<option value="10">Papas</option>
<option value="11">Batatas</option>
<option value="13">Zanahorias</option>
<option value="14">Rabanitos</option>
<option value="15">Calabaza</option>
</optgroup>
</select>
<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>