Par formu lauku stilošanu esmu izteicies jau agrāk, bet biju piemirsis pieminēt kādu uzlabojumu, ko iesāku izmantot pāris gadus atpakaļ. Aizpildot formas, ir svarīgi precīzi zināt savu atrašanās vietu. Gan tajā brīdī, kad ar peli vai klaviatūru tiek navigēts pa formas laukiem, lai atrastu vajadzīgo, gan jau ievadot informāciju šajā laukā. Bieži vien vai nu tiek novērsta uzmanība vai arī acis gluži vienkārši pazaudē kursoru un tad ir lieki jāiespringst. Manis lietotais uzlabojums diemžēl tikai nedaudz, tomēr palīdz šādās situācijās.
Vajadzība
Padarīt redzamākus to formas laukus, kas ir aktīvi (tiek pašlaik lietoti jeb kursors ir tajos) un kam tiek "braukts" pāri ar peli vai klaviatūru (ar klaviatūru gan sanāk tas pats, kas aktīvs).
Risinājums
Pievienot fona vai maliņu krāsu vai jebkādu citu viegli atšķiramu vizuālu pazīmi formu lauku input, textarea un select pseidoklasēm :hover (kad peles kursors pārvietojas pār lauku) un :focus (kad lauks ir aktīvs). Kods būtu aptuveni šāds:
input:hover,
input:focus,
select:hover,
select:focus,
textarea:hover,
textarea:focus
{background-color: #CFF0FF;}
Protams, jāuzmanās, lai fona krāsa pietiekami stipri kontrastētu ar teksta krāsu.
Problēmas
Problēmas kā vienmēr ir ar ēzelīti. Proti - IE 6 un vecāki neatbalstīja :hover pseidoklasi nekam citam kā saitēm jeb a elementiem. Būtībā tieši tādēļ es iedomājos uzrakstīt šo rakstu, jo pamanīju, ka IE 7 ir sācis darīt kā pienākas un :hover strādā visiem elementiem, ieskaitot minētos formu laukus. Tik tālu par nosacīti skaisto, jo pseidoklase :active IE 7 tik vai tā netiek atbalstīta, tādēļ ēzelīšu jājējiem ir tikai pus-labums no šiem uzlabojumiem.
Toties iekš Firefox, Opera un es pieņemu, ka arī uz visiem pārējiem pārlūkiem, viss ir daudz labāk. Vienīgā lieta, kas nestrādā, ir :focus pseidoklase teksta laukiem (textarea), bet to nākas pieciest. Jāpiebilst, ka attiecīgi textarea:focus pieminēšana stilos ir vairāk gaišās nākotnes vārdā.
Rezultāts
Šo uzlabojumu rezultātus dzīvē var aplūkot, piemēram, netcar.lv autonomas lapā gan auto rezervēšanas formā, gan kontaktformā. Tiem, kam slinkums skatīties, pievienoju attēlu ar kontaktformu un izceltu lauku, kurš tiek aizpildīts:
17 komentāri
Jā, formas tur ir nudien skaistas: http://null.lv/tmp/netcar.lv-error-form-01.jpg
19.07.2007 14:33 komentēja endrju
neenu ja vajag var jau to pašu izdarīt arī ar js (tjipa no sērijas el.onfocus = function(){ this.style.backgroundColor='#ddd'} el.onblur = function(){ this.style.backgroundcolor='#fff'}), kur el ir vajadzīgais formas elements, tad atkrīt problēma ar ēzelīti.
Tiesa risinājums nav ieteicams personām, kurām ir paniskas bailes no JS :)
19.07.2007 14:58 komentēja ramuuns
Ļoti interesanti. Kādi ir pārējie iestatījumi? Izšķirtspēja, teksta izmērs noklusētais vai kas tamlīdzīgs, kas to varētu izraisīt. Jo šāda lieta nav novērota iepriekš. Būtu priecīgs par feedback.
19.07.2007 14:58 komentēja Elvis Kvalbergs
Vēlreiz aplūkojot attēlu, radās aizdoma, ka Firefox uz Linux drošvien savādāk interpretē input lauka size un testarea cols parametrus. Tādā gadījumā būs vien jāsaka, ka neko diži tur līdzēt nevar.
19.07.2007 15:00 komentēja Elvis Kvalbergs
Ramūn - neteiksim, ka man ir paniskas bailes no JS. Es uzskatu, ka to ir jāizmanto tur, kur tas ir nepieciešams. Un šis nav tas gadījums.
19.07.2007 15:04 komentēja Elvis Kvalbergs
nu ja klientam ir prasības, lai uz ēzelīša viss izskatītos un strādātu tieši tāpat, kā uz ff/operas (un klientiem parasti ir pajāt, ka redz ēzelītis nesuportē :hover, :focus pseidoklasi), tad JS ir visvienkāršākais un elegantākais risinājums ;)
19.07.2007 15:08 komentēja ramuuns
"Ja klientam ir prasības" uz mani nestrādā tā vienkārši ar 100% jaudu. Ir lietas, kurām saprātīgi šī prasība ir piemērajam, un ir lietas, kurām nav.
Turklāt šajā gadījumā jāņem vērā, ka turpat visiem klientiem par šādu lietojamības uzlabošanu ir pilnīgi vienalga. Tā ka joprojām - šajā gadījumā JS nav nepieciešams.
19.07.2007 15:12 komentēja Elvis Kvalbergs
Kautkādi patīkami tev tie klienti, būtu mums tādi :D
19.07.2007 15:15 komentēja ramuuns
Visiem klienti vienādi, bet runāt ar viņiem var dažādi. Es nesaku, ka es vienmēr ar viņiem kā ar jēriem tieku galā, bet visu arī es uz savas galvas neņemu.
19.07.2007 15:20 komentēja Elvis Kvalbergs
Izšķirtspēju no bildes izmēra izlobīt nevar? Viss pārējais ir "default".
Uz Linux? Es taču speciāli atvēru About logu, lai redzētu, kas tas ir. Labi, tam nav nozīme.
Interpretē savādāk? Huh, un tagad iedomājies kodu, kurā tas speciāli uztaisīts, lai ieriebtu visiem, kas lieto Firefox ne uz Windows.
Ja būtu pareizi izveidota lapas struktūra un bloki, tb, div'i, tad būtu vienalga tas "interpretē savādāk". Nepiekrīti?
Lai vai kā, interesanta attieksme. Vai tā arī ir oficālā uzņēma nostādne - "izstrādājam lapu, kas rādās korekti tikai no Windows"?
19.07.2007 15:23 komentēja endrju
savā ziņā žēl, ka man nesanāk parunāties ar klientiem :)
19.07.2007 15:30 komentēja ramuuns
OK - chill, Endrju. Ja vēlies fleimu, tad kaut kur citur, lūdzu.
19.07.2007 15:34 komentēja Elvis Kvalbergs
O jā, Ramūn - parunāties ir baigi interesanti :)
19.07.2007 15:37 komentēja Elvis Kvalbergs
elvis, nну ты даёш, kā bērns sacepies par kritiku (vai tam ir saistība ar līkajām roķelēm? *grin*).
Kāds "chill"? - neesmu satraucies, ka būtu jāčillo. Lasi uzmanīgāk.
Kādu "fleimu"? Iemācies šī vārda definīciju un atšķirt to no kritikas.
^^ tātad beidz darba laikā dzert un runāt stulbības.
Ok, beidzu komentēt, jo nav vairs jēgas - domāju, ka esi pieaudzis un padiskutēsim, bet izrādās, ka esi mazs jampampiņš (vai šobrīd uzvedies kā tāds). Paldies par uzmanību.
19.07.2007 16:19 komentēja endrju
Izskatās, un es ceru, ka Elvis vairāk neko neteiks. Toties no manis: Endrju ir lecīgs BSD fanboi un tonis tiešām velk uz fleimu, nevis kritiku.
Runājot par BSD, uz Mac+FF arī mazliet lauki lien no pelēkā laukā. Ne tik dramatiski kā endrju bildē, bet tomēr.
19.07.2007 22:54 komentēja Kristofers Ševčenko
Paldies, Kristofer :) Bet BSD acīmredzot paliek BSD. Jādabūn rokas uz kāda Maca un jāizpēta, kas to rada.
20.07.2007 08:34 komentēja Elvis Kvalbergs
hehehe, te var labi saprast kurš ir maziņš un kuram ir maziņš. :)
23.07.2007 20:18 komentēja Kārlis Ķīsis