Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Pseudo-classes d'UI: E:enabled, E:disabled, E:checked </title>
  <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<!--
Pour améliorer l'usabilité des formulaires, on ajoute souvent des contraintes comme permettre ou interdire l'affichage de certains champs en fonction de ce que le visiteur a déjà rempli. Par défaut, les éléments html ne sont ni activés (enabled) ni désactivés (disabled). Javascript sert typiquement à cela, mais on peut aussi le faire manuellement (quitte à les modifier dynamiquement ensuite).
-->
  <form>
  Preferred Contact:
    <input type="radio" id="prefer" value="email" checked="checked" /> Email
    <input type="radio" id="prefer" value="phone" /> Phone
  Email: <input type="text" id="email" enabled="enabled" />
  Phone: <input type="text" id="phone" disabled="disabled" />
</form>
</body>
</html>