Jusque fin 2008, en parallèle de HTML 5, le WHATWG a travaillé sur Web Forms 2.0, une amélioration des formulaires présents dans HTML 4. Ces travaux ont maintenant été intégrés dans HTML 5.
Le dernier working draft de Web Forms 2.0 date du 5 janvier 2009.
<input>
Dans les formulaires que nous connaissons actuellement, nous ne pouvons pas spécifier ce que l'on demande à l'utilisateur de rentrer comme données. En effet, l'attribut type
ne peut prendre pour valeur que text
ou password
... Dans HTML 5, celui-ci pourra prendre les valeurs suivantes: datetime
, datetime-local
, date
, month
, week
, time
, number
, range
, email
et url
.
Pour les input de type numérique (et date / heure), des champs min
et max
pourront être ajoutés pour borner les valeurs acceptables. Il sera aussi possible de faire des input incrémentaux (toujours pour les numériques et dates). Il suffira de préciser le pas avec le champ step. Typiquement, l'incrémentation et la décrémentation pourront se faire via deux flèches sur le coté du contrôle, un concept bien connu dans les application lourdes.
Pour finir, il sera possible de créer ses propres types pour mieux coller aux besoins. L'expression du typage sera basée sur des expressions régulières, grâce à l'attribut pattern
. Par exemple, on demande à l'utilisateur de rentrer son INE (Identifiant National étudiant). Celui-ci est composé de 9 chiffres et d'une lettre à la fin. Voilà comment contrôle cela avec pattern:
<input type="text" pattern="[0-9]{9}[a-Z]" name="ine" />
<datalist>
Lorsque l'on effectue une recherche sur Google par exemple, une suggestion de mots nous est soumise au cours de la frappe. Ce comportement sera présent en natif dans HTML 5 grâce au nouvel attribut list de l'élément input. Celui-ci permet de faire référence à une datalist contenant l'ensemble des suggestions de texte pour la balise input. Voici un exemple :
<input type="text" name="monnaie" list="monnaies"> <datalist id="monnaies"> <option label="Dollar US" value="USD"> <option label="Dollar Canadien" value="CASD"> <option label="Euro" value="EUR"> <option label="Franc CFA" value="FCFA"> </datalist>
Note :Cette fonctionnalité n'est pas encore implémentée dans les versions actuelles des navigateurs.
<output>
Il existe par ailleurs une nouvelle balise <output>
, servant à afficher les résultats d'un calcul. Elle pourra alors être utilisée conjointement à une nouvelle API permettant de vérifier et de valider les résultats renvoyés (méthode checkValidity(), attribut validationMessage...) .