Campos obligatorios en un formulario en HTML5
Veamos cómo creamos campos obligatorios en HTML5 de forma sencilla y rápida en nuestros formularios web de contacto.
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:
- 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