Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Formularios........................................................................................................................................3
Formularios básicos........................................................................................................................3
Elementos de formulario................................................................................................................6
Cuadro de texto..........................................................................................................................7
Cuadro de contraseña................................................................................................................9
Checkbox....................................................................................................................................9
Radiobutton.............................................................................................................................10
Botón de envío de formulario..................................................................................................11
Botón de reseteo del formulario..............................................................................................12
Ficheros adjuntos.....................................................................................................................12
Campos ocultos........................................................................................................................13
Botón de imagen......................................................................................................................14
Botón........................................................................................................................................14
Formularios avanzados.................................................................................................................16
Bibliografía...................................................................................................................................22
Formularios
HTML es un lenguaje de marcado cuyo propósito principal consiste en estructurar
los contenidos de los documentos y páginas web. Sin embargo, HTML también
incluye elementos para crear aplicaciones web. El estándar HTML/XHTML permite
crear formularios para que los usuarios interactúen con las aplicaciones web.
Formularios básicos
Los formularios más sencillos se pueden crear utilizando solamente dos
etiquetas: <form> y <input>. Si se considera el formulario que muestra la siguiente
imagen:
<html>
<body>
Escribe tu nombre:
<br/>
</form>
</body>
</html>
Etiqueta <form>
Atributos
básicos, internacionalización y eventos
comunes
Tipo de
Bloque
elemento
Si no sabes que método elegir para un formulario, existe una regla general que
dice que el métodoGET se debe utilizar en los formularios que no modifican la
información (por ejemplo en un formulario de búsqueda). Por su parte, el
método POST se debería utilizar cuando el formulario modifica la información
original (insertar, modificar o borrar alguna información).
Elementos de formulario
Los elementos de formulario como botones y cuadros de texto también se
denominan "campos de formulario" y "controles de formulario". La mayoría de
controles se crean con la etiqueta <input>, por lo que su definición formal y su lista
de atributos es muy extensa:
Etiqueta <input>
Atributos
básicos, internacionalización, eventos y foco
comunes
Tipo de
En línea y etiqueta vacía
elemento
Descripció
Se emplean para insertar un control en un formulario
n
A continuación se muestran ejemplos para los diez controles que se pueden crear
con la etiqueta<input>.
Cuadro de texto
Se trata del elemento más utilizado en los formularios. En el caso más sencillo, se
muestra un cuadro de texto vacío en el que el usuario puede escribir cualquier
texto:
Nombre <br/>
Cuando el usuario pulsa el botón de envío del formulario, el navegador envía los
datos a una aplicación del servidor para que procese la información y genere una
respuesta adecuada. En el servidor, la aplicación que procesa los datos debe
obtener en primer lugar toda la información introducida por el usuario. Para ello,
utiliza el valor del atributo name para obtener los datos de cada control del
formulario.
Cuadro de contraseña
La única diferencia entre este control y el cuadro de texto normal es que el texto
que el usuario escribe en un cuadro de contraseña no se ve en la pantalla. En su
lugar, los navegadores ocultan el texto utilizando asteriscos o círculos, por lo que
es ideal para escribir contraseñas y otros datos sensibles.
Contraseña <br/>
Checkbox
Los checkbox o "casillas de verificación" son controles de formulario que permiten
al usuario seleccionar y deseleccionar opciones individualmente. Aunque en
ocasiones se muestran varios checkbox juntos, cada uno de ellos es
completamente independiente del resto. Por este motivo, se utilizan cuando el
usuario puede activar y desactivar varias opciones relacionadas pero no
excluyentes.
Radiobutton
Los controles de tipo radiobutton son similares a los controles de tipo checkbox,
pero presentan una diferencia muy importante: son mutuamente excluyentes.
Los radiobutton se utilizan cuando el usuario solamente puede escoger una opción
entre las distintas opciones relacionadas que se le presentan. Cada vez que se
selecciona una opción, automáticamente se deselecciona la otra opción que
estaba seleccionaba.
Sexo <br/>
<input type="radio" name="sexo" value="hombre" checked="checked" /> Hombre
Ficheros adjuntos
Los formularios también permiten adjuntar archivos para subirlos al servidor.
Aunque desde el punto de vista de HTML y del navegador no existe ninguna
limitación sobre el número, tipo o tamaño total de los archivos que se pueden
adjuntar, todos los servidores añaden restricciones por motivos de seguridad.
Fichero adjunto
...
</form>
Campos ocultos
Los campos ocultos se emplean para añadir información oculta en el formulario:
Botón
Algunos formularios complejos necesitan botones más avanzados que los de
enviar datos (type="submit") y resetear el formulario (type="reset"). Por ese
motivo, el estándar HTML/XHTML define un botón de tipo genérico:
Ejercicio
Formularios avanzados
Utilizando solamente las etiquetas <form> y <input> es posible diseñar la mayoría
de formularios de las aplicaciones web. No obstante, HTML define algunos
elementos adicionales para mejorar la estructura de los formularios creados.
Etiqueta <fieldset>
Atributos
básicos, internacionalización y eventos
comunes
Atributos
-
propios
Tipo de
Bloque
elemento
Etiqueta <legend>
Atributos
básicos, internacionalización y eventos
comunes
Atributos
-
propios
Tipo de
En línea
elemento
<fieldset>
<legend>Datos personales</legend>
Nombre <br/>
<br/>
Apellidos <br/>
<br/>
DNI <br/>
</fieldset>
<fieldset>
<legend>Datos de conexión</legend>
Nombre de usuario<br/>
<br/>
Contraseña<br/>
<input type="password" name="password" value="" maxlength="10" />
<br/>
Repite la contraseña<br/>
</fieldset>
</form>
Por otra parte, todos los controles de formulario salvo los botones presentan una
carencia muy importante: no disponen de la opción de establecer el título o texto
que se muestra junto al control. En el código HTML del ejemplo anterior, el nombre
de cada campo se incluye en forma de texto normal, sin ninguna relación con el
campo al que hace referencia.
Etiqueta <label>
Atributos
básicos, internacionalización y eventos
comunes
Tipo de
En línea
elemento
Etiqueta <label>
Nombre <br/>
Apellidos <br/>
DNI <br/>
http://www.w3schools.com/html/html_forms.asp
http://www.lawebera.es/diseno-web-html-5/etiquetas-html5-formularios-inputs.php
http://librosweb.es/xhtml/capitulo_8.html