Normalmente los campos de un formulario son validados con Javascript. Sin embargo, existe una posibilidad de validar un campo requerido a través de HTML que es poco utilizada.
required es un atributo de la etiqueta <input> de tipo booleano que devuelve “True” o “False” al validar si el <input> tiene algún valor. En caso de devolver “False”, este atributo evita que el formulario sea enviado.
El atributo required se puede aplicar a los siguientes tipos de <input>:
- text
- search
- url
- tel
- password
- date
- number
- checkbox
- radio
- file
La sintaxis correcta para especificar que un campo input en un formulario HTML es:
<input type=”password” required />Navegadores que aceptan el uso del atributo required
Aplicación del atributo required en un formulario HTML
Por si solo, este atributo no le informa a la persona que el dato que está ingresando es requerido, entonces, debemos informar que el campo es requerido a través del label.
Normalmente un campo requerido se indica en el label con: la palabra “requerido” o con un “*”.
Ejemplo de uso del atributo required en inputs de un formulario HTML
En este ejemplo estamos indicando en el formulario que los campos: nombre y correo electrónico son campos requeridos. Por lo tanto, el navegador le indicará a la persona que debe diligenciar los campos antes de enviar el formulario. Así mismo, evita que el formulario se envíe.
<form action="url_destino">
<label for="nombre">
<span>Indique su nombre por favor *</span>
<input type="text" id="nombre" name="nombre" autocomplete="name" required>
</label>
<label for="sexo">
<span>Indique su sexo por favor</span>
<input type="text" id="sexo" name="sexo" autocomplete="sex">
</label>
<label for="correo">
<span>Indique su correo electrónico por favor *</span>
<input type="text" id="correo" name="correo" autocomplete="email" required>
</label>
<label for="nickname">
<span>Indique su Nickname por favor</span>
<input type="text" id="nickname" name="nickname" autocomplete="nickname">
</label>
<label for="calle">
<span>Indique su calle de residencia por favor</span>
<input type="text" id="calle" name="calle" autocomplete="street-address">
</label>
<label for="telefono">
<span>Indique su teléfono de contacto por favor</span>
<input type="text" id="telefono" name="telefono" autocomplete="tel">
</label>
</form>Finalmente, esta podría ser una primera capa de validación de formularios utilizando solamente HTML. El resto o personalización puede hacerse con Javascript.