Formularios en HTML

Las etiquetas que delimitan el comienzo y el final de una formulario son <form> y su cierre </form>. Todos los campos que pertenezcan a un mismo formulario (incluido el botón “Enviar") deberán estar dentro de estas dos etiquetas.

Dentro de un formulario se puede introducir cualquier contenido HTML, además de los propios campos del formulario. Es una práctica muy habitual la utilización de tablas para la alineación y organización de los campos de un formulario.

2.1 Los atributos fundamentales de la etiqueta form

Dentro de la etiqueta de apertura de un formulario <form> deben definirse algunos atributos fundamentales para el correcto funcionamiento y gestión de los datos del formulario.

name: atributo que identifica al formulario en el servidor y lo relaciona con los datos que lo acompañan. También se utiliza en los campos del formulario. En una misma página no puede haber más de un elemento con el mismo nombre.

action: determina lo que ocurrirá al pulsar el botón enviar. Ya vimos que lo más profesional es que se ejecute un programa en el servidor, pero sólo veremos cómo enviar los datos por correo (action=mailto:correo@correo.com) o cómo cargar una página concreta (action="pagina.html").

method: determina el método en el que se van a transferir los datos del formulario. El método usado por defecto es "get" pero o si queremos enviar los datos por correo electrónico debemos indicar el valor "post".

enctype: Este atributo especifica el tipo de encriptación de los datos que se envían. Para enviar datos legibles, deberá indicarse enctype="text/plain".

<form name="registro" method="post"
action=mailto:admin@desarrollo.com
enctype=text/plain">

CONTENIDO DEL FORMULARIO

</form>

3. El HTML de los campos de un formulario

La mayoría de los elementos o campos que puede contener un formulario se definen con la etiqueta <input>, que no tiene etiqueta de cierre. Cada uno de estos “input" puede contener atributos e iremos viendo poco a poco algunos de ellos.

Es importante tener presente que los campos que se incluyen dentro de un formulario pueden verse de manera distinta en diferentes navegadores y también conviene saber que hay atributos o características que pueden definirse pero que según la versión del navegador pueden no estar implementados y por tanto no funcionar en algunas versiones.

3.1 Campos de texto

Se generan con la etiqueta <input> y se trata de campos en los que se puede introducir cualquier tipo de texto en una sola línea. Este tipo de campos pueden contener cualquier valor alfanumérico. Desde HTML5 es posible definir el tipo de texto que se puede introducir en un campo y validar su contenido antes de ser enviado al servidor.

El tipo de texto que va a poder introducirse en un campo de este tipo se determina mediante el atributo “type" dentro de la etiqueta <input>.

El atributo “type" dentro de un campo de texto de un formulario

<input name="xxx" type="xxx">

El valor del atributo “type" determina el tipo de texto que va a permitir introducirse dentro de un campo. Vemos algunas de las posibilidades.

• type="text": Acepta cualquier valor alfanumérico. Por ejemplo, podemos utilizarlo para que el usuario nos informe de su nombre, de su código postal,…

  Nombre

• type="password": Acepta cualquier valor alfanumérico, pero muestra asteriscos a la hora de introducirlos.

  Contraseña

• type="email": Para verificar que el campo se rellena con el formato de correo electrónico (texto@texto.texto)

  Correo electrónico

• type="url": Para verificar que el campo se rellena con el formato de una dirección URL completa.

  Página web

• type="tel": Para verificar que el campo se rellena con el formato de un teléfono.

  Teléfono móvil

• type="number": Establece que el campo se debe rellenar con un número. En este caso es posible añadir los atributos “min" y “max" para establecer un rango de números concreto. Por ejemplo: <…type="number" min="18" max="67" /> determina que se deberá cumplimentar el campo con un número comprendido entre el 18 y el 67.

  Edad

• type="range": Permite establecer un rango de números y unos valores intermedios. Por ejemplo: <…type="range" min="10" max="100" step="10"/> determina que se establecerá un número entre el 10 y el 100 en rangos de 10 en 10. Este campo, según el navegador se podrá mostrar de diferentes formas.

  Valora la web

• type="date": Permite cumplimentar el campo en formato fecha (dd/mm/aa), desplegando un calendario al pinchar sobre el campo. Actualmente he comprobado que funciona en Google Chrome y Mozilla Firefox.

  Fecha de cita

• type="month": Permite cumplimentar el campo en formato “mes" de “año". Actualmente he comprobado que funciona en Google Chrome.

  Selecciona el mes

• type="week": Permite cumplimentar el campo en formato “nº de semana" de “año". Actualmente he comprobado que funciona en Google Chrome.
• type="hour": Permite cumplimentar el campo en formato “horas:minutos". Actualmente he comprobado que funciona en Google Chrome.

  Selecciona la semana

Otros posibles atributos de los campos de texto

<input pattern="[0-9]{8}[A-ZÑ]{1}" size="10" maxlength="32" value="xxx" >

• pattern: Con este atributo es posible definir el patrón del texto que debe introducirse en un campo. En el ejemplo de arriba, se determina un patrón formado por una secuencia de 8 caracteres numéricos (entre 0 y 9) y una letra mayúscula (de la “A" a la “Z" incluyendo la Ñ).

  DNI

• size: Determina la longitud visual del campo.

  Código postal

  
  
  

  Dirección

• maxlength: Establece el número máximo de caracteres que se pueden introducir en campos de texto de una línea. Puede utilizarse para limitar los códigos postales a 5 dígitos, teléfonos a 9 u otras.

  Teléfono fijo

• value: Determina el texto mostrado en el campo cuando se carga el formulario.

  Completa tu identificación

3.2 Área de texto

<p>Envía tus comentarios</p>

<textarea name="comentarios" cols="25" rows="5" id="cometarios" form="registro" placeholder="Envía tus comentarios" title="Envía tus comentarios"/></textarea>

Es un campo similar al campo de texto, pero que se define con la etiqueta <textarea> </textarea> y permite introducir texto en varias líneas y normalmente se utiliza para permitir la introducción de comentarios o textos largos en un formulario.

En el ejemplo de arriba, además de los atributos “cols", que determina el ancho del área de texto y “rows", que determina el número de líneas del área de texto, vemos otros posibles atributos como “name" o “id" que sirven para identificar el campo, “placeholder" que muestra un texto en el campo, que desaparece cuando se introduce algo o “title" que muestra un tooltip cuando se detiene el cursor sobre el campo.

3.3 Campos de selección

<input … type="color" … >

<input … type="file" … >

Existen unos campos especiales que permiten al usuario la selección de un archivo de su ordenador y la selección de un color. Como vemos en el ejemplo de arriba, estos campos se definen con el atributo “type" dentro de la etiqueta <input>.

• Selección de un color: Genera un campo que al pinchar sobre él permite seleccionar un color dentro de una paleta de colores (según sistema operativo). Actualmente he comprobado que funciona en Google Chrome y Firefox.

  Selecciona un color

• Selección de un archivo: Genera un campo que al pinchar sobre él se abre una ventana de diálogo para seleccionar un fichero de nuestro ordenador. No se realiza ningún tipo de validación del fichero ni se envía, eso habría que realizarlo mediante JavaScript o en el servidor una vez se hayan enviado los datos.

  Selecciona un archivo

3.4 Botón de opción

<p>Sexo</p>
<input type="radio" name="sexo" value="hombre" >Hombre <br>
<input type="radio" name="sexo" value="mujer" checked >Mujer

Se trata del “típico" elemento redondo que ofrece varias alternativas de las que sólo puede seleccionarse una de ellas. Todas las opciones forman parte de un mismo “grupo de opción", utilizan la misma etiqueta y comparten el mismo atributo name. En cada opción variará el atributo value que será el valor que se envíe.

En el ejemplo planteado, además del atributo type, name y value podemos ver en uno de los botones el atributo checked, que sirve para que quede seleccionada la opción al cargar la página.

3.5 Casillas de verificación

<p>Aficiones</p>
<input type="checkbox" name="aficiones" value="deportes"> Deportes <br>
<input type="checkbox" name="aficiones" value="musica" checked > Música: <br>
<input type="checkbox" name="aficiones" value="cine" > Cine <br>
<input type="checkbox" name="aficiones" value="tecnologia" > Tecnología <br>

Estas casillas se muestran como unos pequeños cuadraditos y en este caso si sería posible marcar o activar más de una opción. Todas las opciones forman parte de un mismo “grupo", utilizan la misma etiqueta y comparten el mismo atributo name. En cada opción variará el atributo value que será el valor que se envíe.

En el ejemplo planteado, además del atributo name podemos ver el atributo checked, que sirve para que quede seleccionada una opción por defecto al cargar la página; el atributo disabled, que se usa para que alguna de las opciones no sea seleccionable; el atributo value, cuyo valor es lo que se transmitirá en las respuestas del formulario, si ese elemento se encuentra seleccionado.

3.6 Listas o Menús desplegables

Con estos campos dentro de un formulario podremos seleccionar una o varias opciones dentro de un menú desplegable o de una lista desplegada.

• Menú desplegable, sólo se podrá seleccionar una opción y sólo se mostrará la opción elegida.

  <label for="oficina"> <p>Selecciona oficina</p> </label>

  <select name="oficina">

  <option>Madrid</option>
  <option>Sevilla</option>
  <option>Valencia</option>
  <option>Málaga</option>

  </select>

  Selecciona oficina

  Madrid Sevilla Valencia Málaga
• Lista desplegada se podrá seleccionar más de una opción y determinaremos el alto o número de las opciones visibles o desplegadas.

  <label for="ocio"> <p>Ocio</p> </label>

  <select name="ocio" size="4" multiple >

  <option>Deportes</option>
  <option>Música</option>
  <option selected>Tecnología</option>
  <option>Amigos</option>

  </select>

  Ocio

  Deportes Música Tecnología Amigos

  La diferencias con el menu desplegable es el atributo multiple, que permite la selección de varias opciones, y size, que indica el número de elementos de la lista que serán visibles. También puede usarse el atributo selected para que aparezca seleccionada alguna opción al cargar la página.

• En cualquiera de los dos tipos podemos usar el elemento “optgroup" para agrupar las distintas opciones en categorías.

  <label for="delegacion"> <p>Delegaciones</p> </label>

  <select name="delegacion">

  <optgroup label="ES">
  <option>Madrid</option>
  <option>Sevilla</option>
  </optgroup>

  
  <optgroup label="EN">
  <option>Londres</option>
  <option>Manchester</option>
  </optgroup>

  </select>

  Delegaciones

  Madrid Sevilla Londres Manchester

3.7 Menús de salto como listas de navegación

Este campo se muestra como un menú desplegable en el que al elegir una de las opciones disponibles nos lleva directamente a una dirección URL asociada a esa elección.

<label for="elige_diario"> <p>Elige tu diario</p> </label>

<select name="elige_diario" id="jumpMenu" onchange="MM_jumpMenu ('parent',this,0)">

<option value= "http://www.marca.com" selected>Marca</option>
<option value= "http://www.as.com">As</option> <option value= "http://www.elpais.com">El País</option>

</select>

Para que esto funcione es necesario la creación de un script de JavaScript asociado a la función “onchange". Desde Dreamweaver este código se genera automáticamente y podemos fácilmente determinar las opciones de este menú desde el panel propiedades.

<script type="text/javascript">
<!--
function MM_jumpMenu (targ,selObj,restore){ //v3.0
eval(targ+".location= '"+selObj.options [selObj.selectedIndex] .value+"'");
if (restore) selObj.selectedIndex=0;
}
//-->
</script>

En este tipo de menu, es posible añadir un botón para dirijirse a la dirección URL asociada a la elección. En este caso, se eliminaría la opción “onchange" (manteniéndose el script), y habrá que añadir, antes de cerrar el campo, la siguiente línea que añade el botón.

<input type="button" name="go_button" id= "go_button" value="Ir" onclick="MM_jumpMenuGo ('jumpMenu','parent',0)" />

4. Otras etiquetas frecuentes en formularios

4.1 La etiqueta <label>

El elemento o etiqueta <label> sirve para asociar cualquier contenido a un campo de texto, de forma que si el usuario pulsa sobre cualquier texto o elemento que se encuentre dentro la etiqueta <label>, el cursor aparecerá en el interior de dicho campo igual que si hubiese pulsado dentro de él. Es una forma de facilitar al usuario la edición de los formularios.
Existen dos formas de realizar esta asociación. La primera de ellas consiste en anidar el elemento de edición entre las etiquetas <label> y </label>:

<label>

<h3>Elige Ciclo</h3>
<input type="text" name="ciclo" size="50" maxlenght="80">

</label>

El segundo método consiste en identificar ambos objetos mediante el valor del argumento “for" del elemento label y el valor del argumento “id" del elemento de edición:

<label for="txtdir"> <h3>Dirección:</h3> </label>

<input type="text" name="direccion" size="80" maxlenght="120" id="txtdir">

4.2 Juego de campos: <fieldset> <legend>

Los juegos de campos son una opción “decorativa" muy utilizada para agrupar campos de un formulario, que además ayuda a identificar los campos de un formulario que están relacionados entre sí.

Para generar este marco visual se utiliza el elemento <fieldset>, el cual se cierra después del último campo que queramos englobar dentro del marco. Dentro de un “juego de campos" El elemento <legend> sirve para poner un título a dicho recuadro.

<fieldset>
<legend>Datos personales</legend>
…
</fieldset>

4.3 Botones

Todo formulario debe tener, al menos, un botón para enviar los datos que se han rellenado. También suele añadirse un botón que restablece todos los campos del formulario a su estado inicial. Generalmente ambos botones se ponen debajo de todos los campos.

•  “Enviar". Este botón debe incluir el type="submit" y al pulsar se envía el formulario. En el campo “value" se introduce el texto que mostrará el botón.

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

•  “Restablecer". Este botón debe incluir el type="reset" y al pulsarlo, el formulario vuelve a los valores por defecto. En el campo “value" se introduce el texto que mostrará el botón.

  <input type="reset" value="BORRAR DATOS" >

La etiqueta <button>

Con la etiqueta <button> podemos generar también botones de un formulario. 

Ambos elementos se comportarían igual. La diferencia está en que al texto del botón que aparece usando la opción del “input" no es posible aplicarle un estilo, mientras que con la etiqueta “button", el texto es el contenido del elemento y es posible aplicarle estilos con libertad o incluso, e incluso poner una imagen.

<button type="submit">
ENVIAR
</button>

ENVIAR

<button type="submit">
<img src="img/boton_enviar.png">
</button>