¿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:
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.
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!
