Atributo required de HTML

Autor: | Última modificación: 14 de noviembre de 2022 | Tiempo de Lectura: 2 minutos
Temas en este post:

¿Conoces el atributo required de HTML? HTML es un lenguaje de programación que nos permite desarrollar proyectos para la web a partir de distintas etiquetas. Una de las etiquetas más importantes para la interacción con un usuario web es form, con la que creamos un formulario de diversos input. En este post, te enseñaremos qué es y cómo funciona el atributo required de HTML, fundamental para definir el comportamiento de los input de un formulario.

¿Qué es el atributo required de HTML?

El atributo required de HTML es una característica de tipo booleana que puede introducirse en una etiqueta input. Al ser de tipo booleano, este atributo ejerce su función con el simple hecho de existir dentro de la etiqueta.

¿Exactamente qué hace este atributo? La palabra clave required nos permite hacer que un input de un formulario sea obligatorio. Es decir, hacer que el usuario deba insertar un valor en este input para que el formulario pueda enviarse, ya sea con un botón o con un enter de teclado.

Como puedes leer en el artículo HTML attribute:required de la página oficial de Mozilla Developer Network, el atributo required es soportado por los distintos tipos de input. Sin embargo, no lo soportan algunas de las opciones de visualización, como range, color y hidden, ni ninguno de los tipos de la etiqueta button, a pesar de que las etiquetas button e input son similares.

Otra de las características de este atributo es que, cuando está presente dentro de un input, puede accederse a él con la pseudoclase:required.

Puedes conocer más sobre estos conceptos en nuestros posts sobre pseudoclases y pseudoelementos en CSS y tipos de input en React.

Para ejecutar la función de este atributo, basta con insertar la palabra required en el listado de atributos del input deseado. No hay que darle un valor determinado, solo basta con que esté presente. A continuación, te mostramos un ejemplo de esta inserción:

<div>

<label for=textInput»>Contraseña:</label>

<input

type=»text»

name=»textInput»

id=»textInput»

placeholder=»nombre de usuario»

required

/>

</div>

Con las líneas de código anteriores, hemos logrado que el usuario deba insertar un valor antes de enviar el formulario. Si el usuario no ejecuta esta acción, verá una alerta automática como la siguiente:

Atributo required de HTML 1
Consecuencia del atributo required de HTML

Al poder ser o no insertado, el uso de este atributo nos permite delegar la responsabilidad de que uno o varios campos de un formulario sean obligatorios. Es decir, en vez de tener que programar está lógica desde JavaScript, podremos hacerlo directamente dentro de HTML.

¿Qué sigue?

Tras leer este post, sabes exactamente qué es y cómo funciona el atributo required de HTML. Sin embargo, ¡todavía queda mucho que aprender sobre este y otros lenguajes de programación! Por ello, te invitamos a participar en nuestro Desarrollo Web Full Stack Bootcamp, donde aprenderás a desarrollar con lenguajes fundamentales para la web, como JavaScript, HTML, CSS y JSX. ¡No te lo pierdas y pide más información!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Trabajo? Aprende a programar y consíguelo.

¡No te pierdas la próxima edición del Aprende a Programar desde Cero Full Stack Jr. Bootcamp!

 

Prepárate en 4 meses, aprende las últimas tecnologías y consigue trabajo desde ya. 

 

Solo en España hay más de 120.400 puestos tech sin cubrir, y con un sueldo 11.000€ por encima de la media nacional. ¡Es tu momento!

 

🗓️ Próxima edición: 13 de febrero

 

Reserva tu plaza descubre las becas disponibles.

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!