¿Cómo hacer un campo obligatorio en HTML?

13 septiembre, 2021 • 2 minutos

Los formularios en los sitios webs son vitales para obtener información valiosa de tus clientes o visitantes. Por esa razón, es importante que especifiquemos qué campos queremos que sean obligatorios en los formularios hechos en HTML. Esto puede sonar un poco complicado, pero realmente hacer un campo obligatorio en HTML es más sencillo de lo que parece.

¿Cómo hacer un campo obligatorio en HTML?

Paso 1: Crear la estructura de tu formulario HTML

Inicialmente, debemos crear nuestro formulario HTML con todos los campos que deseamos. En este caso, estamos usando una estructura muy sencilla que solo pide: Nombre y Apellido.

<form>
 <label for="nombre">Nombre:</label>
 <input type="text" name="nombre" id="nombre">
 <label for="apellido">Apellido:</label>
 <input type="text" name="apellido" id="apellido">
 <input type="submit" value="Enviar">
</form>

Paso 2: Especificar campo obligatorio en HTML

Para especificar que un campo es obligatorio en un formulario de HTML debes colocar el atributo required. Esto significa que ese campo es obligatorio, y las personas no podrán enviar el formulario hasta que lo llenen. Este atributo se debe colocar en el campo, es decir, en la etiqueta input deseada.

En este ejemplo, vamos a especificar que el campo Nombre sea requerido.

<form>
 <label for="nombre">Nombre:</label>
 <input type="text" name="nombre" id="nombre" required>
 <label for="apellido">Apellido:</label>
 <input type="text" name="apellido" id="apellido">
 <input type="submit" value="Enviar">
</form>

Si quieres puedes agregar un pequeño aviso que el campo es obligatorio, colocando un asterisco al costado del nombre, y una pequeña nota al final.

Resultado final

A continuación, podrás ver el formulario que hemos creado, y verás el funcionamiento del atributo required. Intenta enviar el formulario sin llenar el Nombre, y verás que te sale un aviso y no te deja enviar el formulario.

See the Pen
Campo obligatorio en formulario HTML by regardis (@regardis)
on CodePen.

Si tienes alguna duda, por favor déjanos un comentario para ayudarte.

☕

¿Este contenido te fue útil? Invítame un cafecito y ayúdame seguir creando más contenido. ¡Gracias! ♥︎

Invítame un cafecito