Interacción con el usuario: Formularios
Principales elementos de un formulario en HTML
Los elementos principales que se utilizan en un formulario son:
form: elemento principal que forma un formulario; todos los datos definidos en elementos que se encuentren entre la etiqueta de apertura y cierre serán enviados al pulsar el botón de envío.
input: este elemento permite que el usuario introduzca datos, y puede representarse de muchas maneras diferentes: botones, cuadros de texto, selectores de colores, valores numéricos,etc.
textarea: sirve únicamente para introducir textos. A diferencia de “input" de tipo text , el textarea es multilineal y se utiliza generalmente para la introducción de textos largos.
button: este elemento crea un botón clicable que, por defecto, su comportamiento es enviar el formulario. Puede dar problemas en versiones de navegadores antiguos.
label: para mejorar la estructura semántica del documento es recomendable utilizar este elemento para agregar las etiquetas correspondientes a cada elemento de entrada de datos.
datalist (HTML5): este elemento nos permite añadir listas en nuestro código HTML que pueden ser utilizadas para otros elementos del formulario. Un ejemplo:
select: envuelve todos los elementos que forman la lista, e incluye el atributo que determina el nombre del parámetro con el que se enviará la información al atributo “name”. Con las listas se suelen utilizar los siguientes elementos:
- option: este elemento contiene el valor que se pasará al enviar el formulario y el texto que se verá en desplegar la lista que corresponde a su atributo value .
- optgroup: sirve para agrupar las opciones de la lista, separadas por un título no seleccionable que se especifica en su atributo label.
Veamos un ejemplo de cómo se utiliza la etiquetas select, option y optgroup:
¿Cómo accedemos al objeto “forms” desde javascript?
Pues tendremos diversas formas de hacerlo. Vamos a partir de una línea HTML que defina el formulario:
Y en las siguientes líneas de código podremos ver diversas formas de obtener dicho elemento desde nuestro código JavaScript:
1ª forma: formulario.elements[] → Devuelve un array con todos los inputs del formulario.
2ª forma: formulario.getElementById("id") → Devuelve el elemento en concreto con el id seleccionado.
3ª forma: formulario.getElementsByTagName("tag") → Devuelve un array con todos los elementos que cumplan el tag (input, select, etc).
4ª forma: formulario.getElementsByName("nombre") → Devuelve un array con todos los elementos que tienen el mismo nombre (por ejemplo, radiobutton).
5ª forma: Métodos querySelector y querySelectorAll → Se verán en el próximo tema.
- maxlength, minlength: Representa el número máximo de caracteres que acepta un campo.
- max , min: Representa el máximo o mínimo valor numérico que acepta un campo.
- pattern: Representa una expresión regular que validará o no los valores introducidos en el campo.
- placeholder: Representa el texto de ayuda que aparece semi transparente y que desaparece cuando el usuario escribe (hint).
- required: Hace que el campo sea obligatorio, y si no se completa, se invalidará el envío del formulario y se resaltan de rojo indicando que es obligatorio.type: Indica el tipo de campo. Tenemos: button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week.
A continuación trataremos de explicar la funcionalidad de algunos de ellos:
Método:
checkValidity(): Devuelve true si un determinado campo contiene un valor válido.
setCustomValidity(): Nos permite customizar el mensaje de error si la validación no es positiva.
Propiedades:
validationMessage: Nos muestra un mensaje del error producido.
customError: Vale “true” si un mensaje customizado ha sido configurado.
patternMismatch: Vale “true” si el valor de un campo no valida la expresión regular configurada.
rangeOverflow: Vale “true” si el valor de un campo es mayor que el valor máximo configurado (atributo max).
rangeUnderflow: Vale “true” si el valor de un campo es menor que el valor mínimo configurado (atributo min).
tooLong: Vale “true” si el valor de un campo excede de la longitud marcada en su atributo “maxLenght”.
typeMismatch: Vale “true” si el valor de un campo por el tipo de valor introducido es diferente al fijado en su atributo “type” .
valueMissing: Vale “true” sin un campo no tiene valor y uno de sus atributos es “required”.
valid: Vale “true” si el de valor de una variable es válido.
Para usar estos valores debemos de acceder a ellos a través de la variable “validity”.
