Niveau : Confirmé

Formulaires HTML5 : placeholder, required, pattern et validation

Tutoriel par (WebDesigner grapilleur de Kiwiz, Strasbourg)
Créé le , mis à jour le (16104 lectures)
Tags : formulaire, html5, placeholder, pattern, required

Sommaire


Les bibliothèques JavaScript comme complément

Pour combler le retard des anciens navigateurs quant à la compatibilité avec les nouveautés introduites par HTML5 pour les formulaires, quelques solutions construites sur JavaScript existent. Il s'agit de charger une bibliothèque qui va détecter si le navigateur ne reconnaît pas les attributs évoqués, ou les nouveaux types de champs, et tenter de les simuler dynamiquement avec JavaScript le cas échéant.

La prise en charge par les navigateurs web est très inégale et variée. Étant donné qu'il s'agit de fonctionnalités disparates, il se peut très bien qu'une version relativement passée prenne en charge un attribut mais pas l'autre et inversement selon le moteur de rendu, voire qu'un type spécifique pour <input> soit passé sous silence. Il n'est donc pas possible de déclarer - dans l'état actuel du parc de navigateurs - que l'ensemble des apports des formulaires HTML5 est supporté par une version précise, bien que de nombreux progrès eussent été accomplis.

Alternatives pour l'émulation des fonctionnalités de formulaires HTML5 avec JavaScript

Ces bibliothèques sont couramment nommées polyfills en version originale, et prennent parfois en compte de bien anciens navigateurs (jusqu'à Internet Explorer 6). Dans les cas d'utilisation les plus simples, il suffira d'inclure le fichier JavaScript dans la page courante grâce à la balise <script>.

  • H5F : propose un support des nouveautés apportés par HTML5 Forms pour les vieux navigateurs.
  • H5Validate : propose un support des validations.
  • Webforms 2 : comprend une émulation de certains attributs (pattern, required, autofocus), des nouveaux types pour <input>, et des méthodes JavaScript pour connaître l'état de la validation.
  • html5Widgets : embarque une panoplie de contrôles supplémentaires (datepicker/calendrier pour les champs de dates), une gestion des attributs required, pattern, autofocus, placeholder, etc et des éléments range, output.