¡Descarga formularios en html5 y más Guías, Proyectos, Investigaciones en PDF de Programación Web y Tecnologías solo en Docsity!
GUIA COMPLEMENTARIA – FORMULARIOS EN HTML
ING. KEVIN SOLARTE ENRIQUEZ
Formularios en HTML
En un documento HTML el elemento "form" permite crear formularios. En ellos, los usuarios
pueden introducir datos (información) para ser enviados y procesados en un servidor.
Formulario básico - Elementos "form" e "input"
EJEMPLO Para crear un formulario sencillo:
Se puede escribir ( "formulario-basico.html" ):
Ejemplo de formulario básico
Nombre:
Edad:
** **
Como se puede observar, las etiquetas **** y **** delimitan el formulario, el cual
contiene en este ejemplo tres elementos "input" para que el usuario pueda:
- Introducir su nombre (dato de tipo texto, type="text" ).
- Introducir su edad (dato de tipo número, type="number" ).
- Enviar dichos datos, type="submit". Por otra parte, véase que al atributo value se le ha asignado el texto que se muestra en el
botón de envío, "Enviar datos".
Atributo action
Cuando alguien hace clic en el botón de envío de datos de un formulario, habitualmente estos
son enviados a otra página web para su procesamiento en un servidor. Para indicar la URL de
dicha página, en el elemento "form" se utiliza el atributo action.
Nota: para procesar los datos en un servidor, se utilizan lenguajes que pueden ejecutarse en un
servidor, tales como: ASP, PHP, etc.
Atributo method El atributo method del elemento "form" permite especificar el método HTTP que se va a utilizar
para enviar los datos de un formulario. Pudiendo ser el método GET o el método POST.
Ejemplo método GET en el atributo method
Google:
Fíjese que, con el atributo name del elemento "input" se ha indicado el nombre (identificador) del
dato que se va a enviar. Esto es necesario hacerlo con todos los datos que se envíen – en este
Ejemplo método POST en el atributo method
Nombre de usuario:
Contraseña:
Si, por ejemplo, el usuario "iker" escribiese la contraseña "TdidA822" :
Se puede comprobar que, al utilizar el método POST – a diferencia del método GET– en la URL
de la página de destino no se mostrarán los datos enviados.
Controles de un formulario - Elementos "button", "input", "select" y "textarea"
En un formulario, a los elementos que permiten la interacción del usuario (botones, campos de
texto, etc.) se les denomina controles.
E "button": representa a un botón.
- "input": puede representar diferentes tipos de control (texto, contraseña, etc.) en función del valor que se asigne a su atributo type.
- "select": define una lista de opciones, donde cada una de las opciones se representa
con un elemento "option".
- "textarea": permite introducir varias líneas de texto.
Ejemplo de formulario con algunos de los controles más utilizados
Campo de texto:
Lista de selección:
**
**
Área de texto:
Resetear
Área de texto:
**
Agrupación de botones:** Resetear Enviar
En pantalla se vería:
Obsérvese que, el elemento "legend" permite especificar una leyenda – o título– en cada una de
las agrupaciones.
Elemento "label"
El elemento "label" permite definir etiquetas – o títulos– a los controles de un formulario,
incrementando de esta forma su accesibilidad.
Ejemplo uso del elemento label
**Usuario: **
**Contraseña: **
En pantalla se mostraría:
Fíjese que, ambos controles etiquetados se han escrito dentro de sendos elementos "label". No
obstante, también se pueden etiquetar controles utilizando atributos for en los elementos "label" y asociándolos con atributos id de los controles ( "uso-elemento-label-y-atributo-for.html" ):
Ejemplo uso del elemento label y del atributo for
