logó WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS
Ingyenes elektronikus tananyag interaktív weboldalak készítéséhez.
visszaVISSZA   
menüMENÜ   

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

Ahogy a legtöbb honlap, ez a webhely is használ sütiket a weboldalain.