Etiquetas para la creación de formularios HTML

4. Formularios

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.

4.1. Etiquetas para la creación de formularios

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.

Tabla 4.1: Etiquetas para la creación de formularios

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

Ejemplo

<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

4.2. Tipos de inputs

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:

Ejemplo

 <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

4.3. Atributos para la validación de campos en los formularios

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

Atributo Pattern y expresiones regulares

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}».

Ejemplo

En el ejemplo se muestra un formulario que solicita los siguientes datos:

• Nombre de 40 caracteres como máximo y sólo permite letras y números.
• Código postal que admite 5 números.
• Edad (solo dos dígitos numéricos).

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

Comprueba tu aprendizaje