Gestion de Contenu, de Communauté et de groupes de travail collaboratif - Open Source, français, sécurisé, stable et performant

Validation par le navigateur

Afin de vérifier que la validité du format de certaines entrées ou que les champs obligatoires ont bien été remplis avant d'envoyer les données au serveur, HTML5 introduit de nouveaux mécanismes puissants :

Les nouveaux attributs comme required ou pattern, utilisés conjointement avec les pseudoclasses CSS facilitent grandement ces vérifications et l'affichage des informations utiles à l'utilisateur. D'autres techniques plus avancées permettent d'utiliser !! pour définir des règles personnalisées de validation et les messages associés, ou de déterminer si un élément est invalide et pourquoi.

L'attribut required

Si l'attribut required est présent, alors le champ en question doit contenir une valeur lorsque le formulaire est soumis. Voici un exemple de champ input concernant une adresse e-mail obligatoire et permettant de vérifier que l'adresse est bien renseignée et valide selon les critères définis ici :

<input id="email_addr" type="email" name="email_addr" />

L'attribut pattern

L'attribut pattern permet de définir une expression régulière qui sera utilisée pour déterminer si la saisie est conforme au format attendu. L'exemple suivant correspond à un champ texte requis et représentant un code particulier. Dans l'exemple, nous souhaitons que ce code soit composé de trois lettres majuscules suivies de quatre chiffres. Les attributs required et pattern permettent de s'assurer que le champ sera rempli au format souhaité lors de la soumission. Enfin, lors du survol du champ, l'utilisateur verra apparaître un message correspondant à l'attribut title lui indiquant le format attendu.

<input id="part" title="<span style=" type="text" name="SN" />SN - 3 majuscules + 4 chiffres."/>

À partir de l'exemple précédent, on peut ajouter une bordure rouge à l'input tant que le champ ne contient pas de saisie valide. Pour cela, nous ajoutons le code CSS suivant pour créer la bordure rouge si le champ est invalide :

:invalid { border: 2px solid #ff0000; }

L'attribut formnovalidate

L'attribut formnovalidate s'applique aux input et button de type submit. S'il est présent, alors la validation par le navigateur sera désactivée. Dans l'exemple suivant, la validation du formulaire est effectuée en cliquant sur "Submit" mais ne l'est pas en cliquant sur "Save".

<input id="part" title="SN - 3 majuscules + 4 chiffres" type="text" name="SN" />
<input type="submit" value="Save" />
<input type="submit" value="Submit" />

Pour le Fun ... uniquement

cliquez sur l'image pour l'agrandir

De nouveaux attributs concernant les formulaires et leurs éléments ont aussi été introduits par HTML5.

Autofocus : Donne le focus à l'élément au chargement de la page. Autofocus peut être appliqué aux balises input, select, textarea et button.

Placeholder : Donne une indication à l'utilisateur sur le type de donnée à entrer. La valeur de l'attribut placeholder est affichée jusqu'à ce que le champ prenne le focus, ainsi qu'à la perte du focus si le champ est vide. S'applique aux balises input et textarea.

Form :Précise à quel(s) formulaire(s) est (sont) attaché(s) le champ. En utilisant l'attribut form, le champ peut être placé n'importe où dans la page, même en dehors des balises

Required : Attribut booléen indiquant que le champ est obligatoire. Cet attribut sert essentiellement pour les vérifications côté navigateur sans utiliser !javascript!.

Autocomplete : Attribut booléen indiquant si les suggestions de précédentes saisies doivent être affichées. Le navigateur retient les saisies associées à un champ et les propose en suggestion lors de la saisie, cet attribut permet de désactiver cette fonctionnalité.

Pattern : Permet de préciser une expression régulière que doit satisfaire la saisie. Lorsque vous utilisez cet attribut, n'oubliez pas d'ajouter un attribut title pour indiquer à l'utilisateur le format attendu.

Dirname : La valeur de cet attribut permet d'envoyer à la soumission du formulaire un paramètre indiquant le sens d'écriture. Le sens d'écriture peut être "ltr" ou "rtl". Cette valeur est envoyée avec les autres champs du formulaire si l'attribut est précisé.

Novalidate : Désactive les vérifications du formulaire avant de l'envoyer.

Formaction : Permet de modifier l'attribut action du formulaire. Cet attribut est valable pour les éléments input (de type submit) et button.

Formenctype : Permet de modifier l'attribut enctype du formulaire. Cet attribut est valable pour les éléments input (de type submit) et button.

Formmethod : Permet de modifier l'attribut method du formulaire. Cet attribut est valable pour les éléments input (de type submit) et button.

Formnovalidate : Permet de modifier l'attribut novalidate du formulaire. Cet attribut est valable pour les éléments input (de type submit) et button.

Formtarget : Permet de modifier l'attribut target du formulaire. Cet attribut est valable pour les éléments input (de type submit) et button.

HTML5 introduit cinq nouveaux éléments de formulaire.

Progress : Représente la progression d'une opération. Par exemple, l'élément progress peut correspondre à la progression de l'envoi d'un fichier.

Meter : Représente une mesure scalaire dans un intervalle déterminé. L'élément meter peut servir par exemple à représenter une valeur comme une température ou un poids.

Datalist : Représente un ensemble d'options prédéfinies qui peuvent être utilisées avec le nouvel attribut list de la balise input pour créer un menu déroulant de valeurs possibles. Lorsque l'input lié à datalist prend le focus, les suggestions correspondant aux options apparaissent.

Keygen : Permet la génération de clés. Lorsque le formulaire est soumis, la clé privée est stockée par le navigateur et la clé publique est envoyée au serveur.

Output : Affiche le résultat d'un calcul. Peut par exemple servir à afficher la somme de deux champs numériques.

une association va naitre l'ASFA : Association science fiction Amelie .

Cette association a pour vocation de promouvoir la science fiction à Amélie les bains et pour animer la station thermale .

un module galerie vidéo est présent, un systéme de don est présent ,nous espérons avoir un module de gestion d'association avec les cotisations liées aux pseudos bientôt .

Si vous avez un esprit science-fiction venez nous voir ,si vous avez un peu d'argent faites nous un don !!!

Le but de cette association est de créer une convention annuelle , par la suite si nous avons suffisament de trésorerie c'est la remise en état d'un cinéma de quartier à l'abandon ...

Nous lançons donc l'annonce de la convention 2013 ASFA pour la deuxiéme quinzaine de juillet 2013 !
Et nous vous invitons au concours de court et long métrage qui aura lieu à cette occasion ,alors à vos caméras ... action !

Nous vous tiendrons au courant de l'avancée de l'association ...

PS : vous avez vu le site ? bah! NPDS pardi

Bonjour,

Modules.npds.org recherche des testeurs de module. Rien de difficile pour participer:

Il suffit d'avoir un compte sur le site modules.npds.org ou d'en créer un ici

Il faut ensuite  nous signaler votre envie de participer sur le forum Taverne.

Non, il ne faut pas de connaissance PHP, MYSQL, ou autres, il faut juste un environnement NPDS en derniere version, soit en ligne, soit en local.

Je ne serait vous conseiller la dernière version "TOUT EN 1"

Merci par avance de votre participation

Bonjour,

Un nouveau theme à disposition sur Styles.npds.org : TZ_maville

A force de voir des themes sur des communes, je me suis demandé comment je présenterais mon petit village.

Fainéant de nature j'ai tout simplement repris une présentation type proposée sur la toile, c'était pour une chambre de commerce mais les couleurs m'ont plus.

C'était en outre l'idéal pour tester une base (pas encore finit mais presque) ThemeZero, qui devrait nous permettre, nous les amateurs, de modifier rapidement les diverses parties d'un theme.

Vous pouvez voir un exemple sur Styles.npds.org depuis la boite déroulante des choix de thèmes

Testez : themezero_V2 : c'est le squelette, avec de simple bordures en couleur et une Css documentée

Passez ensuite à TZAMOI c'est un habillage basique, mais il a de la gueule

Et voilà encore un nouveau site à base de NPDS  - Cette fois pour la musqiue des Années 80 : http://www.lesannees80.free.fr

(Il est pas tout à fait fignoler mais il est actif !)