Tabla de contenidos
Los formularios son los elementos en los que se integran los botones y las áreas de texto que se utilizan para que los usuarios introduzcan sus datos o que puedan elegir entre varias opciones. Veamos las etiquetas que se utilizan para la creación de formularios en HTML5.
El principio y final de un formulario se define con las etiquetas <form> y </form>. Dentro de las etiquetas de apertura y cierre de form se pueden incluir diferentes elementos que son enviados para ser procesados por el servidor web. HTML5 dispone de un gran número de elementos de formulario como puedes ver en la siguiente tabla.
Elemento | Descripción |
---|---|
<form> |
Define un formulario. |
<fieldset> |
Permite organizar en grupos los campos de un formulario. |
<legend> |
Representa el título de un <fieldset> . |
<label> |
Representa el título de un elemento de control de un formulario. |
<input> |
Se usa para crear controles interactivos que reciben datos del usuario. Ver atributos |
<button> |
Representa un botón. |
<option> |
Representa una opción en un elemento <select> o <datalist> . |
<select> |
Representa un elemento de control que permite la selección entre un conjunto de opciones <option> . |
<optgroup> |
Representa un conjunto de opciones, agrupadas lógicamente. |
<datalist> |
Representa un elemento de control que permite la selección entre un conjunto de opciones <option> . |
<textarea> |
Representa un elemento de control de edición de texto multilínea. |
<output> |
Representa el resultado de un cálculo. |
Ver atributos para formularios
<form> <!--Etiqueta fieldset--> <fieldset> <!--Etiqueta legend--> <legend>Datos personales</legend> <!--Etiqueta label--> <label>Nombre y apellidos: </label> <!--Etiqueta input tipo texto--> <input name='nombre' type='text'/><br> <label>Sexo: </label> <!--Etiqueta select--> <select name="select"> <!--Etiqueta option--> <option value="value1">Hombre</option> <option value="value2" selected>Mujer</option> </select><br><br> <label>Edad: </label> <!--Etiqueta input tipo checkbox--> <input type='checkbox' name='edad' value='20-39' /> 20-39 <input type='checkbox' name='edad' value='40-59' /> 40-59 <input type='checkbox' name='edad' value='60-79' /> 60-79<br><br> <label>Email: </label> <!--Etiqueta input tipo email--> <input name='nombre' type='email'/><br><br> <label>Estudios: </label> <!--Etiqueta select--> <select id="dino-select"> <!--Etiqueta optgroup--> <optgroup label="Estudios Universitarios"> <!--Etiqueta option--> <option>Doctorado</option> <option>Máster</option> <option>Grado</option> </optgroup> <optgroup label="Ciclo Formativo"> <option>Grado Superior</option> <option>Grado Medio</option> </optgroup> </select><br><br> <label>Elige tu navegador favorito: </label> <input list="browsers" name="myBrowser" /> <!--Etiqueta datalist--> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Internet Explorer"> <option value="Opera"> <option value="Safari"> <option value="Microsoft Edge"> </datalist><br><br> <!--Etiqueta textarea--> <textarea name="textarea" rows="10" cols="50">Escribe aquí tu mensaje</textarea> </fieldset> <input type="submit" value="Enviar" /> </form><br><br> <!--Nuevo formulario con output--> <form oninput="result.value=parseInt(a.value)+parseInt(b.value)"> <input type="range" name="b" value="50" /> + <input type="number" name="a" value="10" /> = <output name="result">60</output> </form>
0
Algunos de los inputs o controles más utilizados son los siguientes: button, checkbox, color, date, email, file, image, month, number, password, radio, range, search, submit, tel, text, time, url y week. Veamos un ejemplo con todos los tipos de inputs:
<form> <label for="check">Acepto condiciones</label> <input type="checkbox" id="check"><br> <label for="color">Elige un color:</label> <input type="color" id="color"><br> <label for="fecha">Elige una fecha:</label> <input type="date" id="fecha"><br> <label for="correo">Indica tu correo:</label> <input type="email" id="correo"><br> <label for="archivo">Selecciona un archivo:</label> <input type="file" id="archivo"> <br> <label for="archivo">Pincha en la imagen:</label> <input type="image" src="https://www.eniun.com/wp-content/uploads/eniun-icon-user-experience.svg" alt="Submit" width="38" height="38"><br> <label for="mes">Indica el mes:</label> <input type="month" id="mes"><br> <label for="numero">Selecciona un número:</label> <input type="number" id="numero"><br> <label for="contrasenya">Indica tu contraseña:</label> <input type="password" id="contrasenya"><br> <label for="radio">Esto es un radio button:</label> <input type="radio" id="radio"><br> <label for="rango">Selecciona un número del rango:</label> <input type="range" id="rango" min="0" max="100"><br> <label for="buscar">Campo de búsqueda:</label> <input type="search" id="buscar"><input type="submit" value="Enviar"><br> <label for="telefono">Indica tu teléfono:</label> <input type="tel" id="telefono"><br> <label for="nombre">Indica tu nombre:</label> <input type="text" id="nombre"><br> <label for="hora">Indica la hora:</label> <input type="time" id="hora"><br> <label for="url">Indica una URL:</label> <input type="url" id="url"><br> <label for="semana">Indica la semana:</label> <input type="week"><br> <input type="button" value="Enviar"> </form>
0
La validación de los datos introducidos por los usuarios en los campos de los formularios es esencial para ofrecer al usuario información sobre los datos que se están solicitando.
Gracias a los nuevos atributos que se introdujeron en HTML5 no es necesario utilizar JavaScript obligatoriamente para la validación de los campos ya que se validan de forma automática al pulsar en el botón de tipo submit. En la siguiente tabla se destacan los atributos más utilizados.
Atributo | Ejemplo |
placeholder | placeholder=”Indica tu nombre” |
required | required=”true” o required |
pattern | pattern=”[a-z]{1,5}” |
min | min=”1” |
max | max=”100” |
step | step=”2” (saltos en un rango de números: 0, 2, 4…) |
disabled | disabled=”true” o disabled |
autofocus | autofocus=”true” o autofocus |
autocomplete | autocomplete=”true” o autocomplete |
El atributo pattern nos permite definir nuestras propias reglas para validar el valor de entrada de los campos usando expresiones regulares o regexp (contracción de las palabras inglesas regular expression).
Veamos un resumen de algunos de los caracteres que nos ayudan a construir expresiones regulares:
Clases de caracteres | |
. | Cualquier carácter excepto salto de línea |
[abc] | Cualquiera de los caracteres entre corchetes |
[^abc] | Que NO sea cualquiera de los caracteres entre corchetes |
[a-g] | Cualquier carácter entre a y g (en minúscula) |
(a|b) | a o b |
Anclas | |
^abc | Comienzo de una línea |
abc$ | Final de una línea |
Caracteres específicos | |
\w\ d \s | Palabra, dígito, espacio en blanco |
\W \D \S | Que NO sea palabra, dígito o espacio en blanco |
\t \n \r | Tabulador, salto de línea, retorno de carro |
Cuantificadores | |
a* a+ a? | 0 o más veces, 1 o más veces, 0 o 1 vez |
a{5} a{2,} | Solo 5, 2 o más |
a{1,3} | Entre 1 y 3 |
En la siguiente página web puedes ver una referencia de patrones y expresiones regulares. Además, permite la validación de expresiones regulares: regexr.com
Por ejemplo, vamos a definir una regla usando el atributo pattern. En este caso, queremos que el nombre de usuario consista solo de letras minúsculas. Además, la longitud del nombre de usuario no debe ser mayor de 15 caracteres.
En RegExp, esta regla puede ser expresada como pattern=»[a-z]{1,15}».
En el ejemplo se muestra un formulario que solicita los siguientes datos:
Además, todos los campos son obligatorios y disponen de placeholder. Además, el foco se encuentra en el primer campo.
<h2>Formulario de Contacto</h2> <form> <input name="nombre" type="text" placeholder="Nombre" pattern="[a-zA-Z]{1,40}" required autofocus/> <input name="cp" type="text" placeholder="Código postal" pattern="[0-9]{5}" required /> <input name="edad" type="text" pattern="[0-9]{2}" placeholder="Edad" required /> <button id="enviar" name="enviar" type="submit">ENVIAR</button> </form>
0