WEB-d Développement Web

PHP, SQL, HTML5, CSS3, Javascript, Mootools, Référencement, SEO, CMS, e-commerce, Apache, Linux, Ubuntu, ...

Formulaires HTML5

HTML5 apporte beaucoup de nouvelles fonctionnalités extrêmement utiles pour le développeur web, notamment en ce qui concerne les formulaires. Elles ne sont pas encore toutes supportées par tous les navigateurs, mais cela ne saurait tarder...

input type='color' dans un formulaire HTML5

Nouveaux types

En plus des classiques type="text", "checkbox", "radio", "password", "file" et "submit", de nouveaux types sont apparus, parmi lesquels:

Ces nouveaux types présentent plusieurs avantages:

Nouveaux attributs

HTML5 introduit également de nouveaux attributs.

autofocus

Permet de sélectionner automatiquement l'élément

<input type="text" autofous >

placeholder

Exemple de valeur, affichée en gris clair

<input type="text" placeholder="Thibault">

required

Utilisé pour la validation (voir ci-dessous)

<input type="text" required >

autocomplete

Permet de désactiver la fonction autocomplete du navigateur

<input type="text" autocomplete="off">

form

Permet d'indiquer à quel(s) formulaire(s) appartient l'élément, si celui-ci ne se trouve pas entre les balises form.

<input type="text" form="id1 id2 id3">

pattern

Permet d'utiliser une expression régulière pour valider l'élément. L'attribut "title" doit être utilisé pour indiquer à l'utilisateur le type de valeur attendue.

<input type="text" name="country" pattern="[A-Za-z]{3}" title="Code pays en 3 lettres">

Validation

Comme expliqué ci-dessus, les nouveaux types HTML5, ainsi que les attributs "required" et "pattern" peuvent être utilisés pour valider automatiquement les données sur le navigateur. Si les données ne sont pas correctes, le navigateur ajoute automatiquement l'attribut "invalid" à l'élément. Il ne reste donc plus qu'à utiliser du code CSS pour mettre en forme le formulaire.

Formulaire HTML5 avec validation


<input type="text" placeholder="Nom" required>
<input type="email"  placeholder="Email">
 

input {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    border:1px solid #ccc;
    font-size:20px;
    width:300px;
    padding: 2px;
    min-height:30px;
    display:block;
    margin-bottom:15px;
    margin-top:5px;
    outline: none;

    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
    -ms-border-radius:5px;
    border-radius:5px;
}
:invalid {
    border-color: #E88;
    -webkit-box-shadow: 0 0 5px rgba(255, 0, 0, 0.8);
    -moz-box-shadow: 0 0 5px rbba(255,0,0,0.8);
    -o-box-shadow: 0 0 5px rbba(255,0,0,0.8);
    -ms-box-shadow: 0 0 5px rbba(255,0,0,0.8);
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.8);
}

:required {
    background: url('form.required.png') no-repeat transparent center right;
}
 

Attention, cette validation ne remplace naturellement pas la validation des données du côté serveur!

Articles similaires