Gruodis 18, 2006 Jeigu pasižvalgytume po lietuviškąjį internetą, tai pastebėtume, jog puslapių dizaino pagrindas vis dar yra lentelės (angl. tables). Aš pradėsiu seriją straipsnių, kuria tikiuosi parodyti kaip galima sukurti neblogesnį, o dažnai netgi geresnį puslapio dizainą, visai nenaudojant lentelių.
Prieš maždaug 2 metus asterisk pasiūlė visiškai atsisakyti lentelių puslapio dizaino kūrime. Tai buvo tikrai didelis iššūkis, tuo labiau, kad tuo metu dar ir naršyklės buvo “kreivos” (Acid2 testas). Iš pradžių aš pasakydavau daugiau negražių žodžių, nei sukurdavau kažką realiai veikiančio… Bet kokiu atveju niekada nesigailėjau, jog atsisakiau lentelių.
Pirmiausia norėčiau pademonstruoti kaip kuriamas registracijos formos dizainas. Galbūt kas nors paprieštaraus, jog pradedu ne nuo to galo, pirmiausia reikėtų aiškinti puslapio pozicionavimo galimybes, tačiau norėčiau pasakyti, jog dideli darbai pradedami nuo mažų.
Seniau aš ir turbūt daugelis vis dar registracijos formą, kuria maždaug taip:
Lentelė: vienoje pusėje laukų apibūdinimas, kitoje patys laukai - paprasta ir gražu. Tiesa, border savybei dažniausiai priskiriama reikšmė nulis, t.y. lentelės rėmeliai nematomi. Tačiau man kažkaip reikėjo parodyti tą “grožį”.
Pats paprasčiausias registracijos variantas atsisakius lentelių galėtų atrodyti taip:
Pakankamai padoru ir nereikalauja kažkokių ypatingų pastangų, be to kodo sutaupoma turbūt dvigubai, tačiau toks variantas netenkino manęs, norėjau pasidaryti kažką panašaus į pirmąjį paveikslėlį. Negaliu pasakyti, jog prisėdau ir iš karto gavau tai, ko norėjau, aš tikrai nemoku mintinai visų CSS atributų, tačiau padaryti nebuvo sunku. Štai kokį vaizdą aš gavau :
HTML kodas:
<form name="form1" method="post"> <span class="styleleft">Vardas</span> <span class="styleright"><input name="textfield" type="text" size="10" /></span> <span class="styleleft">el. paštas</span> <span class="styleright"><input type="text" name="textfield2" size="10" /></span> <span class="styleleft">puslapis</span> <span class="styleright"><input type="text" name="textfield3" size="10" /></span> <span class="button"><input type="submit" name="Submit" value="Gerai" /></span> </form>
Kodas tikrai nėra gražiausias, bet manyčiau pakankamai aiškus. Tiems, kurie mėgsta blusinėtis galiu pasakyti: “Ne, kodo tikrai nesutaupoma, jeigu lentelė neturi class atributo, netgi šiek tiek pralaimima”. Klausimas, kurį reikėtų aptarti: kodėl puslapio formatavime naudojau <span>, o ne <div>, bet tai tikrai plati tema, todėl papasakosiu kitą kartą.
CSS kodas:
form { width:200px; } .styleright { padding: 10px 0 0 0; float:right; text-align: right; width: 60%; } .styleleft { padding: 10px 0 0 0 ; float:left; text-align: left; width: 40%; } .button { padding: 10px 0 0 0; float:right; width: 90%; text-align: right; }
Pirmiausia pasakysiu, jog button klasės kurti nebuvo prasmės, tai tiesiog mano užgaida, mygtukui puikiai būtų tikusi tiek styleleft, tiek styleright. Jeigu nebūtų atributo padding visi laukai susiglaustų ir tai tikrai ne pats mieliausias vaizdelis. Float nurodo span atributui, kurioje puseje jis turėjų atsidurti. Text-align atitinkamai nurodo tekstui, kur jis turėtų atsidurti. Na, o width, kokį plotą span atributas turėtų užimti. Čia viskas aišku, turbūt įdomiausia dalis yra tai, jog apsirašiau form atributą ir nurodžiau jo plotį pixeliais. Tai, padariau todėl, jog aš tikrai nenoriu (jūs greičiausiai irgi), kad registracijos forma būtų išsidrėbusi per visą puslapį. O pixeliais nurodžiau todėl, kad nematau jokios prasmės jos nurodyti procentais, juk 200 yra nedaug ir tikrai niekas šio puslapio nebandys žiūrėti per telefono dydžio ekraną.
Atrodo viskas, ką reikia žinoti apie regsitracijos formos dizainą.
Pastaba: mano pateiktas kodas gali turėti problemų su IE, tokiu atveju padėtį išgelbėtų prie input atributo įrašyta savybė size, nurodžius konkretų dydį viskas susitvarko.
2006-12-18 | 9:42
šiaip tik viena pastaba - vertėtų patvarkyti viską taip, kad galima būtų ir be stiliaus normaliai žiūrėti į tokį puslapį. dabar kairė su dešinė bus sulipę ir sunkiai skaitysis/žiūrėsis.
2006-12-18 | 10:32
Prieš ko nors mokindamas išmok gerai pats. Pakalbekim apie klaidas.
Form tage du kart parašitas atributas “method” - žioplumas, ar ponas nežino kas yra validus kodas?
Dar viena labai žiauti klaida yra dėl to, kad lauku pavadinimans panaudotas “span” o ne “label” su “for” atributu. Jai ponaitis butumet nors kiek susipažines su “naudojimo patogumu (usability)” - šitos žiaurios klaidos nebutu.
“span” tagu dažniausiai niekas nenaudoja puslapio pagrindui suformuoti - tai “inline” elementas, patartina naudoti “div” taga.
Beja, nevadinkit HTML kodo dizainų.
2006-12-18 | 10:34
šiaip pakalbėkime tada ir apie standartus. tagas negali būti kaip “konteineris” kitiems tagams - būtinas tag’as negali turėti dviejų method atributų, bet apsimesiu, kad čia yra typo.
Usability požiūriu reiktų dėti id kiekvienam formos elementui, kaip ir pačiai formai, css’e atstumimo (padding) bei matmenų (i.e. width) niekas px’eliais nebematuoja (tik % arba em).
žiūrint bendrą vaizdą - formos elementai nėra tarpusavyje vizualiai surišti. man, asmeniškai, žiūrint - tas [Gerai] mygtukas iš viso ne vietoje stovi.
tu pasiekei savo - tai yra dizainas be lentelių, bet semantika ir “paklusnumas” standartams - tragiškas…
2006-12-18 | 12:35
šiaip jau, formos laukelių pavadinimams egzistuoja tag’as ‘label’.
Tada nebereikia visokiausių span’ų su styleright ir styleleft
2006-12-18 | 14:26
Manau uztektu 1 kart nurodyti metoda :)
2006-12-18 | 15:10
Taisiti posta po gautu komentaru, to niekur nepazimejus (net neparashius komentaro), yra mazu maziausiai ne professionalu.
2006-12-18 | 15:42
Klausimas, kurį reikėtų aptarti: kodėl puslapio formatavime naudojau , o ne , bet tai tikrai plati tema, todėl papasakosiu kitą kartą.
Šiaip yra inline elementas ir labai retai būna naudojamas visiškai nestilizuotas (be id, class, style atributų). naudojamas dažniausiai , bei kituose tekstiniuose konteineriuose.
2006-12-18 | 17:01
Sergej Kurakin, klaidą ištaisiau bet laukiau dar straipsnio atuoriaus.. anyway klaidą su dvigubu ‘method’ ištaisyta. Dėkuj už pastebėjimą, kažkaip sugebėjom pražiopsot…
2006-12-18 | 18:42
Žinote, aš čia truputi, kad NePo butu visiškai apmaudu dėl mano kritikos, galite laisvai pakritikuoti mano varianta:
http://kurakin.info/files/4pixellt/regform/
2006-12-19 | 17:55
http://alistapart.com/articles/prettyaccessibleforms
2006-12-19 | 21:08
Daugiau tokių straipsnių :) Tikrai daug kam padės. Tik žinoma tuos strainius nuo mažų dalykų rašykit ;)
2006-12-20 | 15:07
Nesu dizaineris or whatever ;-) todel dažnai pasirenku lenteles, vien dėl laiko taupymo. “aš tikrai nemoku mintinai visų CSS atributų” :)
Im bad, i know ;-)
2006-12-22 | 23:43
Dėl label pasakė teisingai.
“Usability požiūriu” visiems giliai dzin yra id ar nėra. Ne dzin ar yra jau minėti label, kurie naudoja id susiejimui (bet tai ne vienintelis būdas).
Dėl “css’e atstumimo (padding) bei matmenų (i.e. width) niekas px’eliais nebematuoja (tik % arba em)”, tai čia kažkas per anksti švęsti pradėjo…
Matavo, matuoja ir matuos. Be abejo, em labai dažnai turi privalumų, bet nereikia taip spalvų tirštinti…
2007-01-01 | 12:16
[…] Be abejonės, pats svarbiausias tikslas yra tobulinti straipsnių kokybę. Norėčiau paprašyti jūsų pagalbos. Visų pirma mes nesame ekspretai visais klausimais, todėl natūralu, kad kartais straipsniuose įsivelia klaidų arba mūsų pateiktas sprendimo variantas nėra optimaliausias. Todėl nepatingėkite parašyti komentarus ir nurodyti klaidas arba dar geriau prisijunkite prie mūsų komandos ir parašykite straipsnį. Labai didelis dėkuj skaitytojui Sergej Kurakin už jo puikų komentarą na ir žinoma Rimantui už jo teisingą kritiką. […]
2007-01-21 | 18:17
Ta tema: http://www.dynamicdrive.com/style/csslibrary/item/css-tableless-form/