Formularios HTML

Formularios en HTML
Guía práctica de como diseñar los formularios HTML para tu sitio.

Los formularios
Los formularios son usados para que el usuario ingrese datos.

Esos datos son enviados a un documento, que se encuentra en un servidor, para que los procese (por ej., a un servidor web, a un servidor de email, etc.).

La etiqueta form
La etiqueta  se utiliza para definir un formulario.El atributo action es obligatorio y nos indica el documento que procesará los datos del formulario enviado.
También contamos con el atributo method que nos define el método por el cual se enviarán los datos del usuario al servidor.
Sintaxis

...


La etiqueta input
Nos define el registro donde el usuario puede ingresar los datos.
Los usuarios interaccionan con los formularios a travésde las llamados controles.
Tipos de controles:
Botones (buttons)
Casillas de verificación (checkboxes)
Radiobotones (radio buttons)
Menúes (menus)
Entrada de texto (text input)
Selección de ficheros (file select)
Controles ocultos (hidden controls)
Controles tipo objeto (object controls)
El atributo type especifica el tipo de control a crear.
Sintaxis



El control "text"
Crea uncontrol que nos permite ingresar un texto en una línea.
Ejemplo

Código

Nombre: 
Apellido: 

Resultado
Principio del formulario
Nombre: 
Apellido: 
Final del formulario
Nota: la propiedad name le asigna un nombre al elemento que luego puede ser usado en scripts o en hojas de estilo
El control "radio"
Se usa cuando queremos que el usuario elija una sola opción de entre una serie deposibilidades.
Ejemplo

Código

¿Edad?
menor de 17
entre 18 y 60
mayor de 61

Resultado
Principio del formulario
¿Edad?
menor de 17
entre 18 y 60
mayor de 61
Final del formulario
Nota: la propiedad name debe utilizar el mismo valor para todos los elementos de radio.
La propiedad value asigna un valor al elemento que será utilizado por el documento que procese el formulario.
Elcontrol "checkbox"
Permite al usuario elegir varias opciones entre todas las posibilidades.
Ejemplo

Código

¿Pasatiempos?
TV
Libros
Música
Otros

Resultado
Principio del formulario
¿Pasatiempos?
TV
Libros
Música
Otros
Final del formulario
Nota: la propiedad name debe utilizar el mismo valor para todos los elementos de checkbox.
La propiedad value asigna un valor al elemento queserá utilizado por el documento que procese el formulario.
El control "password"
Funciona igual que text, pero el texto introducido se presenta mediante una serie de puntitos. Es utilizado generalmente para ingresar contraseñas.
Ejemplo

Código

Nombre:
Password: 

Resultado
Principio del formulario
Nombre: 
Password: 
Final del formulario
El control "submit" y el control "reset"El control submit es el botón de envio de datos del formulario y el control reset es el botón de reinicialización. Al ser pulsado reinicializa todos los controles a sus valores iniciales.
Ejemplo

Código

Nombre:
Contraseña:



Resultado
Principio del formulario
Nombre: 
Contraseña: 
 
Final del formulario
Nota: el valor de la propiedad value define el texto dentro del botón.
Elcontrol "file"
El control file nos permite enviar archivos por medio de un formulario.
Ejemplo

Código

Ingrese la foto: 

Resultado
Principio del formulario
Ingrese la foto: 
Final del formulario
El control "hidden"
El control hidden nos permite enviar información oculta a los ojos del usuario.
Ejemplo

Código

Nombre:
Contraseña:


Resultado
Principio del formularioNombre: 
Contraseña: 
Final del formulario
El control "image"
El control image nos permite utilizar una imagen personalizada como botón de un formulario.
Ejemplo

Código

Nombre:
Contraseña:


Resultado
Principio del formulario
Nombre: 
Contraseña: 

Final del formulario

Las etiquetas select y option
La etiqueta  es usada para crear un menú desplegable.
Cada opción...