Voyons donc ce que propose web forms 2. Ce que je vais décrire correspondent à une spécification en travaux. La version finale des web forms 2 est donc succeptible de changer (mais pas trop je pense).

Tout d'abord, web forms 2 sont une nouvelle version des web forms tels qu'on les connait dans html. Ils reprennent toutes les balises des web forms 1 (<form>, <input>, <button>..), mais en les améliorant grandement, comblant les manques les plus courants quand on veut faire des formulaires html de base.

Nouveautés sur la balise <input>

Il y a des petites fonctionnalités sympa comme indiquer au navigateur de préremplir ou non le formulaire (attribut autocomplete), et de donner le focus aprés le chargement de la page (attribut autofocus). Mais ce n'est pas tout.

Validation automatique des valeurs saisies
  • On peut indiquer des nouveaux types à la balise <input> : email, date, time, datetime, datetime-local, month, week, time, number, range, url. Le navigateur affichera le contrôle correspondant (un datepicker par exemple)
  • attributs required, min, max, step, pour spécifier le caractère obligatoire de la saisie, l'espace des valeurs.
  • on peut specifier aussi une expression regulière à laquelle doit coincider la valeur (attribute pattern)
  • attribut list + element <datalist> : pour rattacher/définir à un champs de saisie un ensemble de valeurs possibles
Nouvelles relations entre <input> et <form>

Il y a la possiblité de rattacher un <input> à plusieurs balises <form> (attribut form sur <input>, contenant les id des formulaires). D'ailleurs il est possible de mettre un <input> en dehors d'une balise <form>.

Nouvelle balise <output>

C'est un contrôle non modifiable par l'utilisateur, mais peut être utilisé pour afficher une valeur calculée selon les valeurs d'autres champs, afficher un message lié à un formulaire etc.. exemple :

<form><p>
 <input name="a" type="number" step="any" value="0"> *
 <input name="b" type="number" step="any" value="0"> =
 <output name="result" onforminput="value = a.value * b.value">0</output>
</p></form>

Repetition d'un modèle de saisie

Il arrive que l'on ait besoin d'avoir un formulaire où l'utilisateur puisse saisir une serie d'informations de même type. Par exemple, saisir plusieurs couple de nom/prenom. Web forms 2 propose un mécanisme qui évite de passer par javascript/dom pour faire ce genre de chose, et d'avoir à écrire 15 fois les mêmes balises.

Sur l'élément (une <div>, un <tr>) contenant le html à répeter, il suffit de placer un attribut repeat="template". On peut placer ensuite l'id de cet element dans les noms des champs de saisie qu'il contient. Cet id sera remplacé par l'index de l'élément répété.

Par exemple, ceci :

<tr id="order" repeat="template" repeat-start="3">
  <td><input type="text" name="row[order].product" value=""></td>
  <td><input type="text" name="row[order].quantity" value="1"></td>
</tr>

Est équivalent à

<tr>
  <td><input type="text" name="row0.product" value=""></td>
  <td><input type="text" name="row0.quantity" value="1"></td>
</tr>
<tr>
  <td><input type="text" name="row1.product" value=""></td>
  <td><input type="text" name="row1.quantity" value="1"></td>
</tr>
<tr>
  <td><input type="text" name="row2.product" value=""></td>
  <td><input type="text" name="row2.quantity" value="1"></td>
</tr>

On peut ajouter un <button type="add" template=""> et <button type="remove" template=""> (ou <input>) pour ajouter ou enlever un exemplaire de template dynamiquement (sans javascript donc). On peut aussi ajouter des boutons pour déplacer un exemplaire en avant ou en arrière (type="move-up", type="move-down"), permettant à l'utilisateur de ré-ordonner chaque exemplaire du template (donc ici dans l'exemple, chaque ligne du tableau).

Nouveaux évènements DOM

En plus des traditionnels évènement change, et submit (attributs onchange et onsubmit) , il y a ces nouveaux évènements, par lequel on peut interagir en javascript :

  • input : similaire à change, mais plus atomique (envoyé à chaque touche, à chaque nouveau caractère en gros)
  • formchange et forminput : les contrôles reçoivent ces évènements quand un autre contrôle reçoit un change ou input. On peut alors gérer programmativement les dépendances entre champs.
  • invalid : quand le champs devient invalide
  • reset : quand il y a une remise à zéro du formulaire
  • received : reçu sur le <form> quand il vient d'être envoyé (différent de submit, qui lui est reçu avant que les données du formulaire soient envoyées)

Envoi du formulaire

Là encore, web forms 2 apporte plus de souplesse.

Les boutons submits peuvent comporter les attributs action, method, enctype et target (qui sont aussi des attributs classiques de <form>). Cela permet de proposer plusieurs boutons submit pour un même formulaire, avec des modalités différentes d'envoi des données.

Par exemple, l'attribut enctype peut avoir les valeurs suivantes :

  • application/x-www-form-urlencoded : format traditionnel, que ce soit en get ou en post dans le body. Ex: foo=bar&baz=truc&baz=machin
  • multipart/form-data : comme classiquement, quand il y a plusieurs contenu à envoyer (typiquement, quand on a des <input> type file)
  • application/x-www-form+xml : les données sont envoyées dans un format xml du genre
<formdata xmlns="http://n.whatwg.org/formdata">
 <field name="foo" index="0">bar</field>
 <field name="baz" index="0">truc</field>
 <field name="baz" index="1">machin</field>
</formdata>
  • text/plain : les données sont envoyées dans un format texte lisible, du genre
foo=bar 
baz=truc
baz=machin

Il est possible, comme avec Xforms, d'indiquer ce qu'il faut faire du contenu reçu en retour, aprés l'envoi des données du formulaire. Cela est en priorité conditionné par le code de la réponse http :

  • 200 ok, on fait ce qu'il y a dans l'attribut replace
    • replace="document" : le contenu recu remplace la page (comportement traditionnel)
    • replace="values" : le contenu reçu doit comporter les valeurs qu'il faut mettre dans le formulaire
  • 204 no content : le formulaire est laissé tel quel
  • 205 Reset Content : le formulaire est remis à zéro

API Dom

En conséquence de tous ces nouveaux attributs et balises, des nouvelles propriétés et méthodes sur les éléments DOM correspondant ont été crées.

Par exemple, la propriété validity, permet de savoir l'état du champs de saisie : savoir si la valeur est valide, en dehors de l'espace de valeurs autorisés etc..

Selecteurs css

Comme dans xforms, des pseudos classes peuvent être utilisée pour styler automatiquement les contrôles lorsqu'ils sont invalides, désactivé etc.. En voici la liste : :enabled , :disabled, :checked, :indeterminate, :default, :valid ,:invalid, :in-range,:out-of-range, :required, :optional, :read-only, :read-write.

Conclusion

Web forms 2 améliore grandement les formulaires html traditionnels. Ils permettent d'écrire moins de code javascript pour la validation des formulaires, et d'éviter de faire appel à de l'ajax en certaine circonstance.

Il faudra attendre quelques mois pour que cela soit implémenter dans les navigateurs (et cela le sera, Opera, Mozilla et Apple sont à l'origine de ce draft), le temps que la spécification web forms 2 sorte en recommandation.