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:
npcss1.jpg
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:
npcss2.jpg
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ų atributų, tačiau padaryti nebuvo sunku. Štai kokį vaizdą aš gavau :
npcss3.jpg

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ą.

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.

Panašūs straipsniai


“Dizainas be lentelių. Registracija.” komentarų: 15

  1. mariukas

    š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.

  2. Sergej Kurakin

    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ų.

  3. Eimantas

    š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…

  4. nezinomas

    šiaip jau, formos laukelių pavadinimams egzistuoja tag’as ‘label’.

    Tada nebereikia visokiausių span’ų su styleright ir styleleft

  5. darles

    Manau uztektu 1 kart nurodyti metoda :)

  6. Sergej Kurakin

    Taisiti posta po gautu komentaru, to niekur nepazimejus (net neparashius komentaro), yra mazu maziausiai ne professionalu.

  7. Eimantas

    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.

  8. asterisk

    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…

  9. Sergej Kurakin

    Ž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/

  10. Merė Raili
  11. SinSoul

    Daugiau tokių straipsnių :) Tikrai daug kam padės. Tik žinoma tuos strainius nuo mažų dalykų rašykit ;)

  12. slave

    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 ;-)

  13. Rimantas

    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…

  14. » Pixel.lt ir 2006-ieji metai Archyvas » Pixel.lt

    […] 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ą. […]

  15. SpX

Rašyti komentarą

Jūs privalote prisijungti jeigu norite rašyti komentarą.