HTML5 + CSS3 logó
  WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
vissza VISSZA    
menü MENÜ    
ismét ISMÉT    
tovább TOVÁBB    

Hibakezelés



Ikonok segítségével jelezzük a felhasználó számára, hogy mely elemeket kötelező kitöltenie, és éppen hol tart a kitöltésben.

A kötelezően kitöltendő elemeket a :required álosztály-kijelölő segítségével választjuk ki és a háttérkép jobbra és középre, textarea elem esetén a felső margótól 10 px-re helyezzük el.

A hibásan kitöltött beviteli mezőknél az :invalid , a helyesen kitöltötteknél a :valid álosztály-kijelölőt használjuk.

Példa:

Forráskód



<style>
....

form input:required, form textarea:required {	
   background-image:url('webdev_help_16.png');
   background-repeat:no-repeat;
   background-position:99% 50%;}

form textarea:required {background-position:99% 10px;}

form input:focus:invalid, form input:not(:required):invalid  {
   background-image:url('webdev_err_16.png');
   background-repeat:no-repeat;
   background-position:99% 50%;}

form textarea:focus:invalid, form textarea:not(:required):invalid {
   background-image:url('webdev_err_16.png');
   background-repeat:no-repeat;
   background-position:99% 10px;}   
   
form input:required:valid, form input:focus:not(:required):valid{
	background-image:url('webdev_ok_16.png');
   background-repeat:no-repeat;
   background-position:99% 50%;}

form textarea:required:valid {
   background-image:url('webdev_ok_16.png');
   background-repeat:no-repeat;
   background-position:99% 10px;}	

</style>
 

Eredmény*


* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: css_urlap_info_elrendez_01.html