Atributo required de un input en formularios HTML

En este artículo aprenderás qué es y para qué sirve el atributo required en un input de formulario HTML.

Imagen de portada con el texto: "Atributo required de un input en formularios HTML".

Muchas personas que desarrollan la web, normalmente validan los campos requeridos a través de Javascript. Sin embargo, existe una posibilidad de validar un campo requerido a través de HTML que es poco utilizada.

El atributo required es un valor de tipo booleano que indica si el campo del input está o no vacío; cuando se utiliza, este, avisa a la persona que diligencia el formulario si uno o más campos deben diligenciarse y a su vez, restringe la posibilidad de que el formulario sea enviado.

El atributo required en los formularios HTML funcionan con los <input> de tipo: text, search, url, tel, email, password, date, number, checkbox, radio y file.

La sintaxis correcta para especificar que un campo input en un formulario HTML es:

<input type=”password” required />

Aplicación del atributo required en un formulario HTML

De forma visual, el atributo required no le informa a una persona que el campo que debe diligenciar es requerido, entonces, la persona que diseña el formulario, debe agregar en el label la información que indique que el campo es requerido.

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.

Suscríbete a nuestro boletín mensual

* indicates required

Powered by Mailchimp