Atributo required HTML5: Establecer campos obligatorios en formularios

Con el atributo required HTML5 podemos establecer que un input de formulario sea de rellenado obligatorio.

Sintaxis del atributo required HTML5

Vamos a ver la sintaxis de este atributo extraída de su web oficial:

Nombre: <input type="text" name="nombre" required>

Tal y como podéis ver en la sintaxis es sencillo añadir el atributo al input.

Ejemplo del atributo required HTML5

Vamos a ver en este sencillo ejemplo cómo hacer que un input tenga que ser rellenado obligatoriamente.

<form action="005-ejemplo-atributo-required-html5.php" method="POST">
 Fecha de nacimiento: <input type="date" name="fechanac" required>
 <input type="submit" value="Enviar">
</form>

En el ejemplo he creado un formulario con método POST y 2 input, uno es de tipo submit y el otro de tipo date.

Solo nos queda probar no rellenando el input del ejemplo y ver el mensaje automático de aviso.

Compatibilidad del atributo required HTML5

Este atributo es compatible con los siguientes input:

• email
• password
• number
• checkbox
• search
• radio
• date pickers
• tel
• text
• url
• file

Listado de los nuevos atributos HTML5

En esta otra url tenéis todos los nuevos atributos HTML5 para inputs y formularios.

Listado de los nuevos input HTML5

En esta url tenéis el listado completo de los nuevos input de HTML5.