Validaciones básicas de formulario
Una de las grandes preocupaciones al crear formularios es la validación de cada uno de los controles que lo contienen. Por ejemplo, una caja de texto en la que el usuario debe ingresar un número de teléfono, tiene que ser validada para verificar que la información ingresada por el usuario sean números y no letras, que el número tenga una sintaxis como tal de número telefónico.
En las versiones de HTML, la validación se realizaba a través de código Javascript. Era una tarea tediosa escribir código Javascript para validar cada control de formulario, más aún cuando cada control tenía su propia restricción en cuanto al ingreso de información.
HTML 5 provee varios controles de formulario que se auto-validan. Es decir, controlan que la entrada de datos sea la adecuada. En otras palabras, HTML 5 incluye código Javascript de validación en los controles y este código es transparente para ti como desarrollador, ya no debes preocuparte por escribir extensas líneas de código para validar el ingreso del usuario.
Algunos de los controles HTML5 se listan a continuación:
Controles de HTML 5
| Control |
Descripción |
| placeholder |
Proporciona sugerencias o ejemplo del contenido a ingresar por el usuario
<input type="text" placeholder="Ingrese su nombre">
|
| required |
Entrada de usuario obligatoria
<input type="text" id="username" name="username" required>
Nota: required o required="required" son correspondientes
|
| autofocus |
Enfocar en el control al cargar la página
<input name="q" autofocus />
|
| form |
Si por un lado se tiene formulario y por otro un control button o submit fuera del formulario. El atributo form es aplicado al control para indicar que al pulsar, se envíe el formulario (aun cuando el control no está dentro del formulario) [1].
<form id="myForm">
Add your telephone: <input type="tel" name="phone" required /><br />
</form>
<input type="submit" form="myForm" />
|
| autocomplete |
Permite especificar si el agente (browser) tiene permiso para permitir el autollenado de los valores de los campos de formulario. Aplicable a controles: input (con entrada numérica o texto), textarea, select, form
<input name="lastName" id="lastName" type="text" autocomplete="family-name" />
En este contexto, también es factible utilizar un control data-list para conectar valores a un control input [2]
<label for="browser">Choose your browser from the list:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
|
| pattern |
Permite indicar la expresión regular que validará la entrada del usuario.
Introduce tu TELEFONO con los 9 dígitos: <input type="tel" name="telefono" pattern="[0-9]{9}" title="El número ingresado no cumple con el formato">
|
| min, max |
Permite establecer un rango de valores permitidos. Se puede aplicar en controles tipo number, range, date, datetime-local, month, time y week [3]
<input type="number" id="quantity" name="quantity" min="1" max="5">
|
| type="date" |
Provee un control que permite al usuario ingresar una fecha. Soporta año, mes y día, mas no el tiempo. El tiempo es soportado por controles cuyo valor del atributo type es time y datatime-local [4]. Otros controles relacionados a fecha y tiempo son: month y week
<input type="date" id="start" name="trip-start" value="2018-07-22" min="2018-01-01" max="2018-12-31" />
|
| type="range" |
Permite al usuario indicar un número dentro de un rango especificado [5].
<input type="range" id="volume" name="volume" min="0" max="11" step="1" value="3"/>
|
| type="color" |
Permite al usuario especificar un color utilizando un selector de colores.
<input type="color" id="head" name="head" value="#e66465" />
|
| <progress> |
Etiqueta de HTML 5 que provee una barra de progreso [6]
<progress id="file" value="32" max="100"> 32% </progress>
|
Referencias
- Cravens, J., & Burtoft, J. (2012). HTML5 Hacks: Tips & Tools for Creating Interactive Web Applications. " O'Reilly Media, Inc.".
- https://www.w3schools.com/tags/tag_datalist.asp
- https://www.w3schools.com/tags/att_input_min.asp
- https://developer.mozilla.org/es/docs/Web/HTML/Element/input/date
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range
- https://www.w3schools.com/tags/tag_progress.asp
