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.
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.
<select name=”nombre”> <option> Opcion 1 </option> <option> Opcion 2 </option> </select>
Si añadimos el atributo SIZE podemos mostrar más de una opción a la vez.
<select name=”nombre” size=”2”> deja ver en pantalla dos opciones del listado.
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.
<input type=”radio” name =” sexo” value=”1”> <label> Masculino </label> <input type=”radio” name =” sexo” value=”2”> <label> Femenino</label>
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.
<input type=”checkbox” name =”acepto” value=”1”> <label> Acepto recibir más información</label>
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:
- Con input
<input type=”button” id=”boton” value=”Ok”>
- Con button
<button type=”button” id=”boton”> Boton </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:
<input type=”hidden” id=”oculto” name=”id_empleado”>
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.
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).
<input type=”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.
<input type=”number” min=”1” max=”100” step=”1” value=”70”>
search
Es un campo para búsquedas. Chrome le incluye una X para borrar el contenido del campo.
<input type=”search”>
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.
<input type =”text” name=”control” autofocus=”autofocus”>
pattern
Este atributo se utiliza para especificar un patrón de validación que deberá cumplir el dato introducido en un campo.
<input type=”text” name=”nombre” pattern=”[Aa-Zz]{4-16}
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á.
<input type=”text” placeholder=”Escriba su nombre completo”>
Referencias
- Herrera (2012). Arrancar con HTML5. Alfaomega Grupo Editor. México.
- Gauchat(2012). El gran libro de HTML5. Marcombo. Barcelona.
Tu comentario
