Nouveaux éléments des formulaires dans HTML5 Ref:

Présentation au sujet: "Nouveaux éléments des formulaires dans HTML5 Ref:"— Transcription de la présentation:

1 Nouveaux éléments des formulaires dans HTML5 Ref: http://html5doctor.com/html5-forms-introduction-and-new-attributes/http://html5doctor.com/html5-forms-introduction-and-new-attributes/ http://www.w3schools.com/html/html5_new_elements.asp

2 Les nouveaux éléments de forumlaires De nouveaux types d'éléments de champs des saisie ont été introduits – color, date, datetime-local, email, 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.

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

4 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):

5 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 » />

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. :

7 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!

8 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

9 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" />

10 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">

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

12 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

13 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">

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

15 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. 987-3000) 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>