Imagen con un fondo que tiene las letras "HTML" y tiene dos monitores, uno con código y otro con un layout
|

Atributo required de un input en formularios HTML

Poresteban

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
  • email
  • password
  • date
  • number
  • checkbox
  • radio
  • 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

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.

Publicaciones Similares