Erreur de webdesign : largeur d’un champ input

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:

{code type=php}<input type="text" name="mon_champ" size="20" />{/code}

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

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

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

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

Largeur de champ input correct

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