Nouveaux éléments des formulaires dans HTML5 Ref:

Les nouveaux éléments de forumlaires De nouveaux types d'éléments de champs des saisie ont été introduits – color, date, datetime-local, , month, number, range, search, tel, week, url, etc. De nouveaux attributs ont été introduits – autocomplete, autofocus, validate, novalidate, list, min, max, multiple, pattern, placeholder, required, step, readonly, disabled, etc.

Les nouveaux types de champs de saisie Champs de type et url: – Pour le moment aucune vérification n’est offerte – Certains téléphones intelligents adaptent leurs claviers en fonction de ces types.

Les nouveaux types de champs de saisie Champ de type number Les navigateur affiche un menu pour défiler les nombres Attributs (optionnels): – max : valeur maximale permise. – min : valeur minimale permise – step : pas des nombres – Value: valeur par défaut Donnez votre age (entre 10 et 90):

Les nouveaux types de champs de saisie Le champ de type range Le navigateur affiche un menu de défilement Attributs (optionnels): – max: valeur max permise. – min : valeur min permise – step : intervalles des nombres – value : valeur par défaut <input type="range" min="0" max="10" step="2" value="6 » />

Les nouveaux types de champs de saisie Le champ de type date, datetime-local, month, time permettent de saisir la date et le temps sous différents formats. Certains navigateurs offrent des interfaces pour faciliter la saisie. :

Les nouveaux types de champs de saisie Le type search est utilisé pour soumettre une requête à un engin de recherche. – Semblable à un champ text – Certain navigateurs adaptent la forme de ce champ!

Les nouveaux types de champs de saisie Le type color permet de saisir une couleur à partir d’une palette présentée par le navigateur

Les nouveaux attributs placeholder: contient un texte qui parait dans un champ lorsqu’il est vide. autofocus : permet de focusser sur un champ dans la page. autocomplete (on /off): permet de compléter le champ à partir de valeurs passées. required : déclare un champ comme obligatoire. – Oblige à saisir des données sinon on ne peut pas soumettre des donnés. <input type="text" name= "leNom" placeholder= " Donnez votre nom ici" autofocus autocomplete="on" />

Les nouveaux attributs Plusieurs navigateurs valident les données saisies si nécessaire. novalidate : enlève la validation du (champ du) formulaire disabled : le champ est desactivé. – Le champ parait mais on ne peut pas y saisir des données. Nom : <input type="text" name="Session" value="Jean" disabled> Age : <input type="number" name="Age" min="10" max="90">

Les nouveaux attributs datalist: réfère à une liste (avec l'élément ) qui présente une liste de choix. Choisissez un des OS:

Les nouveaux attributs Plusieurs navigateurs (par défaut) valident les données saisies si nécessaire. novalidate : enlève la validation du (champ du) formulaire

Les nouveaux attributs readonly : le champs est en lecture uniquement (ne peut pas être modifié). – Son contenu valeur est specié dans l'attribut value. disabled : le champ est desactivé. – Le champ parait mais on ne peut pas y saisir des donnée. – Son contenu valeur est specié dans l'attribut value. Nom : <input type="text" name="Session" value="Jean" readonly> Age : <input type="number" name="Age" min="10" max="90"> Nom : <input type="text" name="Session" value="Jean" disabled> Age : <input type="number" name="Age" min="10" max="90">

Les nouveaux attributs multiple : permet de saisir plusieurs données dans un champ (pour les champs de types file et ). – On peut sélectionner plusieurs fichiers – Ou peut donner une liste d’adresses de courriel Courriels :

Les nouveaux attributs pattern : permet de donner une expression régulière afin de vérifier le contenu saisi. – Exemple: l'experssion {0-9]{3}-{0-9]{4} correspond à un téléphone sans le code régional (ex ) Certains navigateurs réagissent ne cas de non respect du pattern Telephone : <input type="tel" name="leTelephone" pattern="\([0-9]{3}\){0-9]{3}-{0-9]{5}" Title="Format: (nnn)-nnn-nnnn>