Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Pseudoklasa :enabled i :disabled

Email Drukuj PDF

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>

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15571903