Veurem amb un exemple molt senzill com crear camps obligatoris en un formulari de contacte amb HTML5.
I comencem un nou post dintre de la secció de tutorials de programació web en català. Aquesta vegada és de nivell molt baix. Crearem un formulari amb camps que serà obligatori que els usuaris omplin. Si no ho fan, sortirà un missatge i no s’enviarà el formulari.
L’atribut Required
L’acció que fa que un camp sigui obligatori, és afegir un atribut específic a l’etiqueta input del camp. Veiem un exemple en forma de formulari de contacte on es demana el nom i l’emal.
Inicialment el formulari, seria així i el camps no serien obligatoris:
<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>Ara que tenim el formulari, fem que els camps INPUTS de nom i email siguin obligatoris afegint l’atribut Required al final del camp:
<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>Atenció, que això no funciona a tot tipus de camps. Veiem en quins tipus es pot aplicar
Tipus de camps
A la majoria de camps dels formularis es pot aplicar l’etiqueta. Veiem quins:
- password
- number
- checkbox
- search
- radio
- date
- tel
- text
- url
- file
Què aporta Required
El missatge que surt quan l’usuari no omple el camp obligatori, surt en el missatge que tinguis el navegador. Si tens el navegador configurat en català, el missatge et sortirà en català.
L’aplicació, més fàcil no pot ser. Per tenir camps obligatoris en HTML5, Només és posar l’atribut required al final del camp.
Funciona en la majoria de navegadors moderns. Als antics no funcionarà…
Més informació