Tags:
create new tag
, view all tags
Tests Web Forms 2.0

1 - Les nombres
Code Résultat Explications
<input type="number" name="exNb1" /> Permet de saisir et/ou d'incrémenter un nombre entier
<input type="number" name="exNb1b" step="0.01" /> Permet de saisir et/ou d'incrémenter un nombre décimal
<input type="number" name="exNb2" step="3" /> Permet d'incrémenter le champs selon un pas (ici 3)
<input type="number" name="exNb3" value="2" /> Place la valeur du champs par défaut à 2
<input type="number" name="exNb4" min="2" max="8" /> Encadre la valeur en définissant des valeurs extrêmes
<form>
<input name="a" type="number" step="any" value="0"> *
<input name="b" type="number" step="any" value="0"> =
<output name="result" onformchange="value = a.value * b.value">0
</form />
* = 0
Permet d'effectuer des calculs entre valeur de champ de type "number"




2 - Les dates
Code Résultat Explications
<input type="datetime" name="exDate1" /> Permet de sélectionner une date dans le format "date et heure"
<input type="datetime-local" name="exDate2" /> Idem que l'exemple précédent
<input type="date" name="exDate3" /> Permet de sélectionner une date
<input type="month" name="exDate4" /> Permet de sélectionner un mois
<input type="week" name="exDate5" /> Permet de sélectionner une semaine
<input type="time" name="exDate6" /> Permet de saisir et/ou d'incrémenter une heure au format "heure minute"
<input type="time" name="exDate7" min="08:00" max="17:00" value="08:00" step="1800" /> Place la valeur par défaut &agrave 8h et impose une tranche horaire (min/max). L'unité du step est la seconde (ici, step=1800 soit 30min)
<input type="date" name="exDate8" value="2006-07-30" min="2005-01-01" max="2007-12-31" step="5" /> Place la date "2006-07-30" en valeur par défaut avec des valeurs extrêmes et donne la possibilité de choisir une date valable : toutes les dates distantes de 5 jours (le step) à partir de la première date (valeur de l'attribut min)




3 - Les ranges
Code Résultat Explications
<input type="range" name="exRange1" />
<input type="range" name="exRange2" min="0" max="120" step="20" value="60" /> Affiche une "règle" ayant des valeurs extrêmes (de 0 à 120), dont le curseur est placé par défaut sur la valeur 60 et qui peut être déplaçé par pas de 20
<input type="range" name="exRange3" min="0" max="120" step="20" value="60" />
valeur
<output onformchange="value = exRange3.value">60</output>

valeur: 60
Binding entre le range et un champ de type output afin d'afficher la valeur sélectionnée avec le range
<input type="range" name="exRange4" min="0" max="120" step="20" onformchange="value=saisiValeur.value" />
valeur: <input type="number" name="saisiValeur" min="0" max="120" step="20" onformchange="value=exRange4.value" />

valeur
 Binding entre un range et un champ de type number permettant à l'un de contrôler l'autre (Bug si déplacement du range de plus d'un cran d'un coup)




4 - Les validations
Code Résultat Explications
<input name="exVal1" type="text" required />
Spécifie qu'il s'agit d'un champ obligatoire
<input type="email" name="exVal2" />
Vérifie que les données saisies correspondent bien &agrave une adresse mail de format xxx@xxx
<input type="url" name="exVal3" />
Vérifie que les données saisies correspondent bien à une URI de format xxx:xxx
<input type="file" name="exVal4b" max="3" accept="image/jpg" />
Spécifie le type de format attendu (ici jpg) ainsi q'un nombre maximum de fichier (3)




5 - Les patterns
Code Résultat Explications
<input name="exPat1" type="text" pattern="^\d{2}((-|.| )\d{2}){4}$" />
Expression régulière du format "numéro de téléphone" (suite de 5 blocs de deux chiffres) acceptant comme séparateur l'espace, le signe +, ou le point
<input name="exPat2" type="text" pattern="^(([0-9]{2}( [0-9]{2}){0,1})|(([0-9]{2} ){2}(([0-9]{2})|([0-9]{2}.[0-9]{1,3}))))$" />
Expression régulière pour le format h:m:s du champ RAJ2000 (VizieR). Il est possible de saisir :
  • uniquement l'heure au format hh
  • l'heure et les minutes au format hh mm
  • l'heure, les minutes et les secondes avec les secondes au format entier ou décimal soit :
    • hh mm ss
    • hh mm ss.x
    • hh mm ss.xx
    • hh mm ss.xxx




6 - Les dataLists & XML
Code Résultat Explications
<input type="url" name="Dlst1" list="urls" />
<datalist id="urls">
<option label="google" value="http://www.google.fr">
<option label="cds" value="http://cdsweb.u-strasbg.fr/">
<option label="W3C" value="http://www.w3.org">
<option label="WebForms 2.0" value="http://www.w3.org/2007/03/WF2/">
<option label="XForms implementation" value="http://www.w3.org/MarkUp/Forms/wiki/XForms_Implementations">
</datalist>
 Permet d'afficher une liste de suggestions au cours de la frappe
<form data="WF2data.xml">
Données XML : <textarea name="txt1"></textarea>
</form>
Données XML :
Le fichier XML 		Permet de récupérer et d'afficher des données enregistrées dans un fichier XML
<form name="monFormulaireDlst">
<select name="monSelectDlst" data="WF2dataDlst.xml"></select>
<input type="button" onclick="document.monFormulaireDlst.monSelectDlst.data = 'WF2dataDlst2.xml';" value="changer les données (WF2dataDlst2.xml)"/>
<input type="button" onclick="document.monFormulaireDlst.monSelectDlst.data = 'WF2dataDlst3.xml';" value="ajouter les données (WF2dataDlst3.xml)"/>
</form >
 le fichier chargé par défaut WF2dataDlst2.xml)"/> WF2dataDlst3.xml)"/>
Permet de charger des données contenues dans un fichier XML dans un champ de type select. On peut également changer ces données par celles d'un autre document XML, ou bien ajouter des données d'un autre document XML (le type "incremental" doit alors être précisé dans le fichier XML)
<form name="monFormulaireDlst2">
<input type="text" list="maDatalistDlst2">
<datalist id="maDatalistDlst2">
<select name="monSelectDlst2" data="WF2dataDlst4.xml"></select>
</datalist>
</form>
Combinaison de l'élément datalist et de la fonction d'auto-remplissage des champs à partir d'une ou plusieurs sources XML




7 - Les templates et répétitions
Code Résultat Explications
<form>
<div id="ligne" repeat="template">
<input type="text" name="contenu.[template1]" value=""><button type=remove>Retirer</button>
</div>
<button type=add template=ligne>Ajouter une ligne</button>
</form>
Permet de définir un template et d'ajouter ou supprimer des instances de ce template
<form>
<div id="ligne2" repeat="template" repeat-start=3 repeat-min=2 repeat-max=5>
<input type="text" name="contenu.[template1]" value=""><button type=remove>Retirer</button>
</div>
<button type=add template=ligne2>Ajouter une ligne</button>
</form>
En reprennant l'exemple précédent, on peut ajouter des attributs permettant de spécifier le nombre initial, minimum, et maximum de bloc (un bloc correspond à une instance du template).
<form>
<div id="ligne3" repeat="template" repeat-start=3 repeat-min=2 repeat-max=5>
<input type="text" name="contenu.[template1]" value="">
<button type="move-up">Monter</button>
<button type="move-down">Descendre</button>
<button type=remove>Retirer</button>
<button type=add template=ligne3>Ajouter une ligne</button>
</div>
</form>
En reprennant l'exemple précédent, on peut ajouter des attributs permettant de spécifier le nombre initial, minimum, et maximum de bloc (un bloc correspond à une instance du template).



Edit | Attach | Print version | History: r1 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r1 - 2008-04-24 - CedricCapoulun
 
This site is powered by the TWiki collaboration platform Powered by PerlCopyright © 2008-2024 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback