Erreur de webdesign : largeur d’un champ input

Publié le 22/08/2012 à 08h41

Lors de la conception d'un web design, il arrive qu'un design possède quelques erreurs de compatibilité. Cet article présente une erreur de webdesign relativement commune et pourtant méconnue. L'utilisation d'un champ input sans définir sa largeur en CSS.

Problème

Les champs input peuvent avoir une longueur plus ou moins longue en précisant le nombre de caractères visibles dans l'attribut "size". Le code peu donc ressembler à ça:

1
<input type="text" name="mon_champ" size="20" />

Avec uniquement un tel code pour définir la largeur du champ, il y aura un bug d'affichage pour certains navigateurs, notamment les utilisateurs sur Linux qui verront potentiellement ceci:

Erreur de largeur d'un champ input

Erreur de largeur d'un champ input

Voici une autre capture d'écran qui présent le problème de largeur.

Erreur de largeur d'un champ input

Erreur de largeur d'un champ input

Bien entendu, le design fonctionne correctement sur les autres navigateurs.

Solution

Pour éviter que le champ input ne dépasse du cadre il faut absolument utiliser un width ou un max-width en CSS. De cette manière, le problème d'affichage sera corrigé:

Largeur de champ input correct

Largeur de champ input correct

Voici ci-dessous l'aperçu de la même page avec la correction du webdesign.

Largeur de champ input correct

Largeur de champ input correct

Pensez-donc à ce petit détail prochaine fois que vous devez créer un webdesign.

Auteur: Tony Archambeau

Développeur web passionné par le référencement et l'ergonomie d'utilisation des sites et applications web, j'édite plusieurs sites web dont infowebmaster.fr.

No comments yet.

Leave a comment