Campos obligatorios en un formulario en HTML5

Publicada el por

Veamos cómo creamos campos obligatorios en HTML5 de forma sencilla y rápida en nuestros formularios web de contacto.

Tutoriales HTML5
Logo HTML 5

HTML5 permite de forma sencilla, marcar los campos de un formulario como obligatorios.

El atributo required

Sólo hay que añadir el atributo required a las etiquetas input de los formularios. Veamos un ejemplo:

Tenemos un formulario con campos Nombre y email:

<form action="" nmethod="post">
 <label for="name">Name:</label>
 <input type="text" name="name" id="name">

 <label for="email">Email:</label>
 <input type="email" name="email" id="email">

 <input type="submit" value="Send">
</form>

A los dos campos, añadiremos el atributo ‘required’ a la etiqueta Input para que nuestro navegador lo detecte como campos obligatorios. Fijaos que lo hacemos en la parte final del campo.

<form action="" nmethod="post">
 <label for="name">Name:</label>
 <input type="text" name="name" id="name" required>

 <label for="email">Email:</label>
 <input type="email" name="email" id="email" required>

 <input type="submit" value="Send">
</form>

Tipos de campos

El atributo Required no es compatible con todos los tipos de campos del formulario. Veamos el listado de compatibilidad:

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

Algunas ventajas

  • El mensaje de que el campo es obligatorio, sale en el idioma del navegador. Si el navegador lo tienes en gallego, el mensaje te saldrá en gallego.
  • Sólo hay que poner REQUIRED al final de la etiqueta. Más cómodo imposible.
  • Si tu navegador está mínimamente actualizado, tanto PC como móvil, funcionará.

Espero que os sea de utilidad. Es sencillo y fácil de aplicar a vuestras webs si tenéis en cuenta que funcionará en navegadores actuales.

Más información