info
Gracias por visitar la web del profesor Rafael Barzanallana.

Formularios en HTML 5. Asignatura Desarrollo de Aplicaciones Web. Facultad de Informática

Lista de instrucciones reconocidas por los navegadores actuales, con el código fuente y forma de utilización.

<form name="MiFormulario" id="MiFormulario" action="page" onSubmit="return fun()">
...objetos...
</form>

El atributo name permite a un script acceder a su contenido. Es preferible utilizar los dos atributos con el mismo identificador, por motivos de compatibilidad.

El atributo action indica la página a la que se envían los datos del formulario. Si este atributo está vacío, es la página que contiene el formulario la que se recargará con los datos como parámetros.

El atributo onSubmit permite asociar una función de test en el formulario. Si la función retorna falso, les datos del formulario no se envían, quedan en la página.

Objeto
Apariencia
Código
Botón simple
<input type="button" value="Botón" onclick="mifuncion()">

Se trata de un simple botón y no de envío, es necesario asociarle código JavaScript que se ejecuta con el evento onclick.
Se puede personalizar mediante una hoja de estilo CSS.

Campo de texto
<input type="text" name="texto" value="texto por defecto"

Para introducir un texto. Como se ve, el campo puede tener un valor preestablecido con el atributo value.

Otros atributos son:

  • type="password" para mostrar el contenido oculto.
  • size="" longitud del campo de texto.
  • maxlength="" máximo número de caracteres.
Zona de texto
<textarea name="textarea">contenido</textarea>

Campo de texto en varias líneas. La diferencia con el objeto precedente es que el contenido inicial se ubica entre las etiquetas de inicio y fin, y no en un atributo.

Palabra de paso (password)
<input type="password" name="pass" value="12345">
Campo oculto  
<input type="hidden" value="code">

Permite añadir datos a los valores que se pasan por el formulario, siendo definidos por un script y no por el usuario.

Casilla de selección
<input type="checkbox" name="cb" value="true" checked>
  • El atributo checked permite seleccionar por defecto
Botón radio

<input type="radio" name="radiox" value="radio1">
Grupo radio

<label>Elección 1
<input type="radio" name="radio1" value="radio1">
</label><br>
<label>Elección 2
<input type="radio" name="radio1" value="radio2">
</label>

Un botón radio funciona como una casilla a marcar. Un grupo de botones radio permite una elección alternativa.

Si No

<input type="radio" name="identificador" value="true" checked>Si
<input type="radio" name="identificador" value="false">No

Para que los botones sean alternativos, han de tener todos el mismo nombre.

Menu
<select name="select">
<option>Madrid</option>
<option>Murcia</option>
<option>Oviedo</option>
</select>

La etiqueta select y las etiquetas internas options permiten construir un menú que puede tener la forma de una lista estática o estilo persiana.

  • El atributo size especifica el número de líneas. Si este número es inferior al número de opciones, aparecerá una barra de visualización vertical.
  • El atributo multiple permite múltiples selecciones simultáneas.
  • El atributo opción selected el elemento seleccionado inicialmente.
Lista
<select name="select2" size="3">
<option>Madrid</option>
<option>Murcia</option>
<option>Oviedo</option>
</select>
Fichero
<input type="file" name="file">
Campo imagen
<input type="image"  src="xul.png">
  • El aributo src indica la dirección donde se encuentra la imagen.

image sirve para personalizar un botón

Explorador local

HTML dispone de una función de selección de fichero "file" que combina un campo de texto y un botón.

<input type="file"  value="">

El fichero elegido es asignado al atributo value del objeto.
El contenido del fichero local es incluido con los datos del formulario y es enviado con ellos.

Botón de envío
<input type="submit" name="Submit" value="Enviar">

Envía los datos del formulario.

  • El atributo value el texto que se muestra en el botón.

Cuando se pulsa el botón, el fichero definido por el atributo action del formulario, es cargado en lugar de la página actual y los datos del formularios se pasan como parámetros.

Si el campo action está vacío, la página actual se recarga con los parámetros con los datos del formulario.

Es posible tener varios botones de envío y modificar dinámicamente el contenido de action con JavaScript para cargar diferentes páginas. En este caso se asociará un evento onclick al botón de envío.