Za pomocą pseudoklas :enabled oraz :disabled możemy kontrolować wygląd elementów interfejsu użytkownika — formularzy, w zależności od tego, czy są one dostępne, czy też nie. Do dalszych rozważań nad obiema pseudoklasami wykorzystam poniższy formularz.
<h1>Miniankieta</h1>
<form action="formmail.cgi" method="post">
<ul>
<li>Odbiorca ankiety:<br /><input type="text" name="to" value=" Adres poczty elektronicznej jest chroniony przed robotami spamującymi. W przeglądarce musi być włączona obsługa JavaScript, żeby go zobaczyć. " disabled="disabled" /></li>
<li>Imię:<br /><input type="text" name="imie" size="20" /></li>
<li>E-mail:<br /><input type="text" name="e-mail" size="20" /></li>
</ul>
<input type="submit" value="Wyślij" /> <input type="reset" value="Anuluj" />
</form>
Za pomocą pseudoklasy :enabled możemy formatować wygląd pól formularza, które są dostępne dla użytkownika strony. Natomiast pseudoklasa :disabled dotyczy tych pól, których edycja została wyłączona za pomocą atrybutu disabled="disabled". Wykorzystanie obu pseudoklas pozwala znacznie poprawić czytelność całego formularza.
Poniżej zamieszczam arkusz, który formatuje wygląd dla pól aktywnych i nieaktywnych w naszym przykładowym formularzu.
input[type="text"]:enabled
{
background:#C0FFC0;
}
input[type="text"]:disabled
{
background:#FFC0C0;
}
Efekt działania przykładowego arkusza stylów widać na przykładzie dostępnym poniżej. Warto pamiętać o tym, że w tej chwili pseudoklasy :enabled i :disabled nie działają w przeglądarce Internet Explorer.
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=ISO-8859-2">
<title>Tytuł Strony WWW</title>
<style type="text/css">
input[type="text"]:enabled
{
background:#C0FFC0;
}
input[type="text"]:disabled
{
background:#FFC0C0;
}
}
</style>
</head>
<body>
<div class="przyklad">
<h1>Miniankieta</h1>
<form action="formmail.cgi" method="post">
<ul>
<li>Odbiorca ankiety:<br /><input type="text" name="to" value=" Adres poczty elektronicznej jest chroniony przed robotami spamującymi. W przeglądarce musi być włączona obsługa JavaScript, żeby go zobaczyć. " disabled="disabled" /></li>
<li>Imię:<br /><input type="text" name="imie" size="20" /></li>
<li>E-mail:<br /><input type="text" name="e-mail" size="20" /></li>
</ul>
<input type="submit" value="Wyślij" /> <input type="reset" value="Anuluj" />
</form>
</div>
</body>
</html>
