Formulaires HTML5 multinavigateurs avec jQuery

Posted: août 25th, 2010 | Author: | Filed under: HTML5 / CSS 3, jquery | No Comments »

Parmi les types de champs classique d’un formulaire HTML4, on a :

  • Un type text (une seule ligne), textarea (champ texte multiligne) ou un password
  • Un type checkbox ou bouton radio.
  • Un bouton de validation submit, de réinitialisation reset ou bouton simple button
  • Un bouton avancé button.
  • Une liste déroulante select avec ses items option.
  • Un champ fichier file.
  • Un champ caché hidden.

Le HTML5 a introduit d’autres champs de formulaires. Ils ne sont pas encore implémentés par tous les navigateurs. J’avais fait un test sur ces nouveaux types de formulaires avec le navigateur Opera10. Le réndu était bluffant. On a l’impression d’avoir un validateur Javascript très puissant derrière. Et oui, puisque en plus d’afficher de nouveaux types de formulaires, le HTML5 permet de valider ces formulaires sans ajout de code Javascript.

En attendant cette compatibilité multi-navigateurs de ces nouveaux champs, voici venu jQuery.html5form. C’est un plugin JQuery qui permet d’anticiper les nouveaux formulaires HTML5. L’avantage est qu’il est multi navigateur.

Il suffit de l’appeler avec ces lignes de codes :

1
2
3
4
5
<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
$('#myform').html5form();
});
// ]]></script>

No related posts.

La liste des entrées complémentaires est établie par le module d’extension YARPP.



Leave a Reply