html5

Voici la suite du billet formulaires HTML5 partie 1. Ce billet comporte deux exemples reprenant les attributs décrient dans la première partie. Vous remarquerez que ces deux formulaires ressemblent beaucoup à ceux que vous pouvez construire en HTML4 ou XHTML.

Comme je l’avais mentionné, il n’y a rien de très complexe dans les nouveautés concernant les formulaires en HTML5. Les nouveautés vont surtout nous permettre de valider plus rapidement les champs de nos formulaires.

<form id="presetForm1" method="post" action="">
    <ul>
        <li><label for="txtName">courriel</label></li>
        <li><input class="text" type="email" id="txtName" maxlength="100"
        autofocus required /></li>
        <li><label for="txtPass">mot de passe</label></li>
        <li><input class="text" type="password" id="txtPass"
        required /></li>
        <li><label for="txtNom">nom</label></li>
        <li><input class="text" type="text" id="txtNom" value="Optionel..."
        onfocus="this.value='';"/></li>
        <li><label for="txtDate">date de naissance (ex: 1900-03-27)
        </label></li>
        <li><input class="text" type="date" id="txtDate" /></li>
        <li><label for="txtTel">téléphone (ex: 514-123-4567)</label></li>
        <li><input class="text" type="tel" id="txtTel" value="Optionel..."
        onfocus="this.value='';" /></li>
        <li><label for="txtUrl">site web</label></li>
        <li><input class="text" type="url" id="txtUrl" maxlength="250"
        value="Optionel..." onfocus="this.value='';" /></li>
        <li><input class="submit" type="submit" value="Send" /></li>
   </ul>
</form>

Observations sur l’exemple

Le champ courriel contient les attributs « autofocus » et « required » ce qui veut dire qu’en arrivant sur la page, c’est sur ce champ que le pointeur de notre souris sera. Ce champ est également obligatoire avec l’attribut required. De plus, le champ est de type « email » ce qui indique qu’il faut nécessairement entrer un courriel dans ce champ.

Le champ password est obligatoire avec l’attribut required.

Le champ date de naissance est de type « date » ce qui indique qu’il faut nécessairement entrer une date au format (Year-Month-Day) dans ce champ.

Le champ téléphone est de type « tel » ce qui indique qu’il faut nécessairement entrer un numéro de téléphone dans ce champ.

Le champ site web est de type « ul » ce qui indique qu’il faut nécessairement entrer une url dans ce champ.

Les nouveaux attributs et valeurs de l’attribut type sont assez simples. Nous comprenons rapidement leurs utilisations. Dans un billet futur, je ferai un exemple en intégrant Javascript aux nouveaux formulaires d’HTML5.

Tweet This Post

Tagged: blog html5, form 2.0 html5, forms html5, formulaires html5, HTML5