Elementos de Formularios en HTML5

Elementos de Formularios en HTML5

Los formularios son el medio para enviar datos a una aplicación web. Analizaremos algunos de los elementos de formularios más importantes en HTML5.

formulario

Aprende más sobre formularios html5

Estructura del formulario

Etiqueta <form>

Contiene todo el formulario. Todos los elementos de formularios se escriben dentro de las etiquetas <form> y </form>. Entre sus atributos se cuentan: ACTION para indicar el programa que procesará los datos,  y METHOD para especificar el método de envío de datos, donde METHOD = “GET” envía los datos utilizando la URL y METHOD = “POST” utiliza el formulario.

Etiqueta <fieldset>

Agrupa visualmente los elementos del formulario. No es imprescindible, solo dibuja una linea agrupando los elementos que quedaron entre las etiquetas <fieldset> </fieldset>

Etiqueta <label>

Se utiliza para escribir un texto asociado a algún campo. Utilizando su atributo FOR podemos especificar el id de un elemento de formulario asociado al texto.

Campo de texto

Etiqueta <input>

Para crear un campo de texto utilizamos la etiqueta <input> con su atributo TYPE=”TEXT”. Se le puede asignar un id con el atributo ID, que permitirá referenciar ese campo en algún script de JavaScript o en una hoja de estilos CSS.

Su atributo NAME permite asignarle un nombre que será utilizado por el programa que procese los datos.

Su atributo VALUE se utiliza para especificar un valor inicial al campo.

Área de texto

Se emplea la etiqueta <textarea> </textarea> para crear un campo de texto largo. Se puede especificar el número de líneas y columnas que deseamos asignarle al campo con los atributos ROWS y COLS.

Campo de contraseña

La etiqueta <input type = “password”> permite crear un campo de contraseña para ocultar visualmente los caracteres pulsados en un campo de texto.

Cabe aclarar que este campo no encripta la información sino que solo la enmascara en la interfaz gráfica.

Lista de selección  (combobox)

Nos permite crear un combobox o lista de selección con una serie de valores de los cuales el usuario elegirá o seleccionará uno.

 

 

Si añadimos el atributo SIZE podemos mostrar más de una opción a la vez.

Si utilizamos el atributo MULTIPLE el usuario puede seleccionar más de una opción a la vez.

Lista de botones radio (radio button)

Este tipo de control permite al usuario elegir solo una opcion de entre varias.

 

 

Lista de cajas de selección (checkbox)

Permiten una respuesta de Positivo (activado) o Negativo (desactivado). Puede existir una sola caja de selección o varias. Pueden no estar activadas ninguna o todas.

 

 

Boton para enviar información

Un <input type=”submit”> crea un boton que al pulsarlo, envía los datos recibidos por todos los campos del formulario a la dirección utilizada en el atributo ACTION de la etiqueta FORM.

Su atributo VALUE permite escribir una leyenda o texto sobre el botón.

Botón para borrar información del formulario

Si se desea borrar lo escrito en un formulario de una forma rápida y sencilla, el desarrollador puede dejar un boton <input type=”reset”> para resetear o borrar el formulario. También se utiliza su atributo VALUE.

Botón simple

Es posible crear un botón dentro de un formulario que tenga un comportamiento específico definido por código Javascript. Es posible hacerlo de dos formas:

  1. Con input

 

  1. Con button

 

La segunda opción es más intuitiva, pues un botón realmente no es un “input” en el sentido de que no es un campo que reciba algún dato.

Campo oculto

Existe un elemento de formulario <input type=”hidden”> que se utiliza para enviar datos sin que el usuario se de cuenta. Esto es necesario en ocasiones para procesar algún dato adicional que sea complementario a los datos enviados en el formulario.

Ejemplo:

 

Nuevos elementos en HTML5

Todos los elementos anteriormente descritos ya funcionaban en la versión anterior de HTML. Con la llegada de HTML5 aparecieron nuevos elementos que tienen gran utilidad. Veamos a continuación algunos cambios en el elemento INPUT.

email

Presenta un campo de texto estándar sobre el que se va a introducir una dirección de email. Al momento de enviar el formulario el navegador comprobará si es una dirección válida (si está escrita como dirección de email).

 

number

Crea un campo para introducir números. En Chrome aparecen dos flechas para incrementar o decrementar la cantidad. Es posible especificar el valor máximo, el valor mínimo, el incremento y el valor inicial del campo.

 

search

Es un campo para búsquedas. Chrome le incluye una X para borrar el contenido del campo.

 

tel

Campo para introducir números telefónicos. Si se estuiese ejecutando la página desde un dispositivo móvil, se invocaría el teclado numérico para facilitar el ingreso del teléfono.

url

Permite introducir un campo de tipo url, es decir donde el usuario introduce una dirección web. El navegador realiza una validación para ver si está correctamente escrito.

Nuevos atributos en HTML5

autofocus

Especifica qué campo obtendrá primero el foco donde se introducirán datos. Se le añade este atributo solo a uno de los campos de la página.

 

pattern

Este atributo se utiliza para especificar un patrón de validación que deberá cumplir el dato introducido en un campo.

 

placeholder

Especifica un texto que se mostrará en un campo mientras este esté vacío.Cuando el usuario empieza a escribir sobre el campo, el texto del placeholder desaparecerá.

 

Referencias

  1. Herrera (2012). Arrancar con HTML5.  Alfaomega Grupo Editor. México.
  2. Gauchat(2012). El gran libro de HTML5. Marcombo. Barcelona.

 

¿Qué te pareció este artículo?
  • Regular 
  • No era lo que buscaba 
  • Poco informativo 
  • Interesante 
  • Excelente 
(Visto 7.877 veces)
Facebooktwitterlinkedinmail

Tu comentario

opiniones

Comments are closed