Validation formulaire html.pdf


Aperçu du fichier PDF validation-formulaire-html.pdf

Page 1 2 3 4 5 6 7 8 9




Aperçu texte


Validation d’un formulaire HTML

Abdallah EL Asmar

3. Utilisation des contrôles offerts par HTML5
Parmi les possibilités offertes par HTML5, on peut citer les nouveaux types de la balise input
(date, number, time,.. ) et les attributs required, pattern, autofocus et
placeholder de la balise input.
 L’attribut required spécifie qu'un champ doit avoir une valeur avant d'envoyer le
formulaire (required ="required" ou tout simplement required). Si aucune
valeur n’est spécifiée au moment d’envoi, un message prédéfini est affiché : « Please fill
out this field » ou « This is required field » ça dépend du navigateur.
 L’attribut pattern spécifie une expression régulière qui est vérifiée par rapport à la
valeur du champ avant d'envoyer le formulaire (pattern = "^[0-9]{3}$"). Si la
valeur saisie ne correspond pas au pattern au moment d’envoi, un message prédéfini est
affiché : « Please match the requested format » ou « you must use this format » ça
dépend du navigateur.
 L’attribut autofocus spécifie qu'un champ doit obtenir automatiquement le focus lorsque
la page est chargée (autofocus ="autofocus" ou tout simplement autofocus)
 L'attribut placeholder spécifie une brève description de la valeur attendue d'un
champ. Cette description s'affiche dans le champ lorsqu'il est vide et disparaît lorsque le
champ obtienne le focus ou l’utilisateur commence à saisir une valeur.
 Le type number spécifie que la valeur d’un champ doit être un nombre ; avec ce type, on
peut utiliser les attributs min, max et step.
 L'attribut title spécifie un message qui apparait quand la souris passe au-dessus du
champ. Ce message est affiché aussi avec les messages prédéfinis des attributs
required et pattern.

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="language" content="fr">
<title>Validation d'un formulaire</title>
<script>
function afficherDate() {
var listjours = ["Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi"];
var datecourante = new Date();
var jour = datecourante.getDay();
var nojour = datecourante.getDate();
nojour = (nojour <10)? "0"+nojour : ""+nojour;
var mois = datecourante.getMonth() + 1;
mois = (mois <10)? "0"+mois : ""+mois;
var an = datecourante.getFullYear();
var heure = datecourante.getHours();

www.facebook.com/a.asmar.isae

Page 7