Attributs Readonly vs Disabled

Comportements des attributs "readonly" et "disabled" sur les champs de formulaires.

by oilvier

HTML

<p>En comparant Internet Exporer et Firefox, on peut constater qu'Internet Explorer force la couleur (gris) des input "disabled" et ce même si un style est défini dans le CSS.</p>
<p>Pour des besoins purement graphiques uniquement (rendre inactif un champ et pouvoir le styliser), il est donc plus prudent d'utiliser l'attribut "readonly", qui lui permet de styler les champs sans problèmes.</p>
<form>
    <h2>Sans style</h2>
    <fieldset>
        <legend>Normal</legend>
        <input type="text" value="text" />
    </fieldset>
    <fieldset>
        <legend>Disabled</legend>
        <input type="text" disabled="disabled" value="disabled" />
    </fieldset>
    <fieldset>
        <legend>Readonly</legend>
        <input type="text" readonly="readonly" value="readonly" />
    </fieldset>
</form>

<form id="format">
    <h2>Avec style</h2>
    <fieldset>
        <legend>Normal</legend>
        <input type="text" value="text" />
    </fieldset>
    <fieldset>
        <legend>Disabled</legend>
        <input type="text" disabled="disabled" class="disabled" value="disabled" />
    </fieldset>
    <fieldset>
        <legend>Readonly</legend>
        <input type="text" readonly="readonly" value="readonly" />
    </fieldset>
</form>

CSS

body {font-family:arial; font-size:12px;}

h2 {font-weight:bold; margin:0 0 8px;}
p {margin:0 0 8px;}

form {margin:0 0 15px;}
fieldset {padding:8px; border:1px solid #EEE; margin:0 0 5px;}
input {font-family:arial; font-size:12px; border:1px solid #888; height:22px; line-height:22px; padding:0 3px;}

#format input[disabled], #format .disabled {background:#F18061; border:1px solid #ee4618; color:#FFF;}
#format input[readonly] {background:#F18061; border:1px solid #ee4618; color:#FFF;}