Nouveautés HTML 5 – Formulaires et champs de formulaires
Petite introduction aux formulaires HTML 5… Je vous propose de voir en images et en code les différentes modifications apportées par les nouveaux attributs HTML 5.
Introduction :
HTML 5 apporte son lot de nouveautés également sur les formulaires. Il est important de prendre en considération ces modifications car elles vont permettre un meilleur échange entre les utilisateurs et éditeurs de contenu. Elles sont également là pour nous rendre service et optimiser le WEB de demain.
Information : A ce jour, ces nouveautés ne sont compatible qu’avec les navigateurs « WEBKIT » (Safari et Google Chrome).
Placeholder attribut :
Cet attribut permet d’insérer dans votre champ un exemple de texte à saisir qui a la propriété de disparaître au focus. Ceci remplace l’utilisation de javascript pour réaliser cette opération…
Avant…
<script>
$(document).ready(function(){
$('.placeholder').focus(function(){
if($(this).val() == $(this).attr('alt')){
$(this).val('');
};
});
$('.placeholder').blur(function(){
if($(this).val() == ""){
$(this).val($(this).attr('alt'));
}
});
});
</script>
<form>
<input type="text" class="placeholder" name="first-name" alt="John" value="John"/><br/>
<input type="text" class="placeholder" name="last-name" alt="Doe" value="Doe"/><br/>
<input type="submit" name="submit" value="Save"/>
</form>
Après…
<form> <input type="text" name="first-name" placeholder="John"/><br/> <input type="text" name="last-name" placeholder="Doe"/><br/> <input type="submit" name="submit" value="Save"/> </form>
Autofocus
cet attribut permet de sélectionner un champ en particulier au chargement de la page
Avant…
<script>
$(document).ready(function(){
$('.selectedInput').focus();
});
</script>
<form>
<input type="text" name="first-name" placeholder="John"/><br/>
<input class="selectedInput" type="text" name="last-name" autofocus/><br/>
</form>
Après…
<form> <input type="text" name="first-name" placeholder="John"/><br/> <input type="text" name="last-name" autofocus/><br/> </form>
Exemple HTML 5 Autofocus
Attribut Required
Permet de spécifier si un attribut est obligatoire. Si le champ reste vide au submit, il sera mis en évidence.
Avant…
<script>
$(document).ready(function(){
$(".verifForm").click(function(){
if($(".required").val() == ""){
alert("Vous devez remplir tous les champs...");
return false;
}
});
});
</script>
<form>
<label>Nom d'utilisateur : </label><br/>
<input class="required" type="text" name="username" value=""/><br/>
<label>Mot de passe : </label><br/>
<input class="required" type="text" name="password" value=""/><br/>
<label>Prénom : </label><br/>
<input type="text" name="subname" value=""/><br/>
<input class="verifForm" type="submit" name="submit" value="Save"/>
</form>
Aperçu Required avant HTML5
Aperçu Required avant HTML5
Après…
<form> <label>Nom d'utilisateur : </label><br/> <input required="required" type="text" name="username" value=""/><br/> <label>Mot de passe : </label><br/> <input required="required" type="text" name="password" value=""/><br/> <label>Prénom : </label><br/> <input type="text" name="subname" value=""/><br/> <input type="submit" name="submit" value="Save"/> </form>
Résultat attribut HTML5 Required
Champ email & url
Permet de spécifier un type de champ email ou url et execute des vérifications
Avant…
<script>
function isValidEmailAddress(emailAddress) {
var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
return pattern.test(emailAddress);
}
function isValidUrlAddress(urlAdress) {
var pattern = new RegExp(/http:\/\/[A-Za-z0-9\.-]{3,}\.[A-Za-z]{3}/);
return pattern.test(urlAdress);
}
$(document).ready(function(){
$('.mail').blur(function(){
if (!isValidEmailAddress($(this).val())) {
alert("Email non valide !");
return false;
};
});
$('.url').blur(function(){
if(!isValidUrlAddress($(this).val())){
alert("URL non valide !");
return false;
}
});
});
</script>
<form>
<label>News Letter : </label><br/>
<input class="mail" type="text" placeholder="YouMail@provider.com" required /><br/>
<label>Votre site Web : </label><br/>
<input class="url" type="text" name="yourWebSite" placeholder="www.yoursite.com"/><br/>
<input type="submit" name="submit" value="Inscription"/>
</form>
Check mail avant HTML5
Check URL avant HTML5
Après…
<form> <label>News Letter : </label><br/> <input type="email" placeholder="YouMail@provider.com" required /><br/> <label>Votre site Web : </label><br/> <input type="url" name="yourWebSite" placeholder="www.yoursite.com"/><br/> <input type="submit" name="submit" value="Inscription"/> </form>
Résultat Champ de type Mail HTML5
Les messages d’erreurs seront directement gérés par les navigateurs.
Il est également possible d’utiliser l’attribut « pattern » qui vous permettra de spécifier la structure des données saisies en lieu et place d’un REGEX javascript :
<input type="text" name="username" placeholder="Nom d'utilisateur" pattern="[A-Za-z]{4,10}"/>
Si vous êtes familier avec les expressions régulière vous aurez compris que le format accepté devra contenir uniquement des lettres de 4 à 10 caractères.
Les nouveaux types de champs :
Voici les différentes valeurs pouvant être attribuées :
- tel
- search
- url
- datetime
- date
- month
- week
- time
- datetime-local
- number
- range
- color
Conclusion
Certes ces nouveautés ne sont encore applicable que sur les navigateurs « WEBKIT » mais il est clair que ces nouveaux attributs seront disponible sous peu pour les navigateurs Mozilla (voir IE…). Alors n’hésitez pas à utiliser ces nouveaux attributs dès maintenant.
Lien : Documentation W3C
