Formų stilizavimas

Pripažinkite — naršydami įvairiuose tinklalapiuose dažnai matote formas. Ir taip pat dažnai jas užpildote, siunčiate kažkokius duomenis į serverį. Jeigu patys kuriate tinklalapius, turbūt kartais galvoje pradeda suktis įvairios mintys ir mąstote, kaip sukurti tokius pat gražius formų laukelius, mygtukus, kuriuos pamatote tinklalapiuose.

Iš tikrųjų, formų stilizavimas su CSS nėra ypatingai sudėtingas, tačiau būtina atkreipti dėmesį į keletą niuansų. Straipsnyje stengsiuosi kuo plačiau apžvelgti įvairius stilizavimo būdus ir subtilybes bei, žinoma, pateiksiu pavyzdžių.

Paprastas formų stilizavimas

Kaip ir daugeliui HTML elementų, formų elementams galime nurodyti rėmelį (angl. border), jo storį, spalvą, tipą (solid, dotted, dashed), fono, teksto spalvą, šrifto dydį ir t.t. Taigi pasirašykime HTML kodą, kuris nurodys formos elementus.

<form action="" method="post">

    <label for="slapyvardis">Slapyvardis:</label>
    <input type="text" name="username" id="slapyvardis" />
                
    <br />
                
    <label for="slaptazodis">Slaptažodis:</label>
    <input type="password" name="password" id="slaptazodis" />
                
    <br />
                
    <label for="vardas">Vardas:</label>
    <input type="text" name="name" id="vardas" />
                
    <br />
                
    <label for="pastas">El. pašto adresas:</label>
    <input type="text" name="email" id="pastas" />
                
    <br /><br />
                
    <input type="submit" name="submit" value="Siųsti duomenis" />
        
</form>	

Rezultatą galite peržiūrėti čia: formos/index1.html.

Pastebėsite, kad ne kiekvienoje naršyklėje net nestilizuoti formų elementai atvaizduojami skirtingai. Norėdamas tai jums įrodyti, „pagavau“ kadrus su Safari 3, Firefox 3, Opera 9 ir Internet Explorer 8 Beta 2 naršyklėmis.

Įprastai formų elementams tvarkingai sudėlioti naudojamos lentelės, tačiau mes galime šiek tiek pažaisti ir sudėlioti elementus su CSS. Tarkime, kiekvienas formos laukelis turi būti po to laukelio pavadinimu, pavyzdžiui, po žymių <label></label> laukelis turi tęstis ne toje pačioje eilutėje, o persikelti į kitą. Žinoma, tai padaryti galime pridėję <br /> žymę, tačiau yra ir kitas būdas. Apibrėžkime keletą CSS savybių label identifikatoriui.

label { display: block; padding-top: 10px; padding-bottom: 10px; }

Pati svarbiausia dalis aukščiau pateiktame kode yra display: block. Savybei display nurodę reikšmę block priverčiame visus label elementus „elgtis“ kaip blokams. Kitaip sakant, visi label elementai tampa blokais, o blokai, kaip žinia, pagal numatytąsias naršyklės CSS savybių reikšmes visada atvaizduojami naujoje eilutėje. Taigi dabar peržiūrėję puslapį naršyklėje pamatysite, kad kiekvienas laukelis perkeliamas po laukelio pavadinimu.

Taip pat matote, kad CSS kodo pavyzdyje yra dar dvi savybės: padding-top ir padding-bottom. Šios savybės nurodo atitraukimą nuo viršaus (padding-top) ir apačios (padding-bottom). Jų nurodyti, žinoma, nėra būtina, tačiau jas pridėję pamatysite, jog laukeliai nuo pavadinimų yra labiau atskirti ir atrodo tvarkingiau.

Toliau pridėkime label elementams rėmelį (tik iš viršaus su border-top), pritaikykime margin-top ir margin-bottom savybes bei pakeiskime teksto spalvą.

label 
{ 
    display: block; 
    padding-top: 10px; 
    padding-bottom: 10px; 
    border-top: 1px solid #CCC;
    margin-top: 5px;
    margin-bottom: 5px;
    color: #0058bb;
}

Peržiūrėję gautą rezultatą matysite, kad dabar label elementai yra atitraukti nuo laukelių, teksto spalva mėlyna bei atsirado pabraukimas virš kiekvieno label elemento. Dabar būtų pats laikas pradėti stilizuoti laukelius ir mygtuką, taip?

Laukeliai ir mygtukai (taip pat ir kiti elementai: radio, checkbox) nurodomi su žyme input, tad CSS savybes galėtume taikyti su atitinkamu identifikatoriumi.

input { }

Tačiau norėdami atskirai stilizuoti laukelius ir mygtuką šio identifikatoriaus naudoti negalime. Taigi elementams priskirkime klases su class atributu.

<form action="" method="post">

    <label for="slapyvardis">Slapyvardis:</label>
    <input type="text" name="username" id="slapyvardis" class="laukelis" />
                
    <br />
                
    <label for="slaptazodis">Slaptažodis:</label>
    <input type="password" name="password" id="slaptazodis" class="laukelis" />
                
    <br />
                
    <label for="vardas">Vardas:</label>
    <input type="text" name="name" id="vardas" class="laukelis" />
                
    <br />
                
    <label for="pastas">El. pašto adresas:</label>
    <input type="text" name="email" id="pastas" class="laukelis" />
                
    <br /><br />
                
    <input type="submit" name="submit" value="Siųsti duomenis" class="mygtukas" />
        
</form>	

Atitinkamai sukurkime CSS aprašus.

.laukelis
{
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	padding-right: 5px;
	width: 300px;
	color: #666;
	border: 1px solid #CCC;
}

.mygtukas
{
	border: 0;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 8px;
	padding-right: 8px;
	background: #0058bb;
	color: white;
}

Priskirtos savybės gana aiškios: laukelio klasei priskyrėme atitraukimą (padding-top, padding-bottom ir t.t.), ilgį (width), teksto spalvą ir rėmelį; mygtuko klasei — rėmelį pašalinome, kadangi jis mums nereikalingas, nurodėme mygtuko fono ir teksto spalvą bei pridėjome padding. Rezultatą galite peržiūrėti čia: formos/index3.html.

Norėdami dar labiau pagražinti mūsų formą, galime nurodyti, kaip atrodys elementai užvedus ant jų pelės žymeklį. HTML dokumente nieko keisti nereikia, užtenka CSS faile nurodyti pseudo klasę :hover.

.laukelis:hover { color: black; }

.mygtukas:hover { background: black; }

Peržiūrėję pavyzdį pamatysite, kad užvedus pelės žymeklį ant laukelio, kuriame įrašytas tekstas, pasikeis teksto spalva, o ant mygtuko — fono spalva. Galite eksperimentuoti su CSS aprašais: pridėti papildomas savybes, keisti esamų savybių reikšmes ir t.t.

Taigi, jau žinote, kaip paprastai ir nesudėtingai stilizuoti formos elementus, tačiau iš tiesų galime netgi labiau pakeisti elementų išvaizdą.

Sudėtingesnis formų stilizavimas

Turėtumėte žinoti, kad tekstui įvesti naudojamos <textarea></textarea> žymės. Jas pridėkime HTML dokumente.

<... kiti HTML formos elementai ...>

<label for="apie">Trumpai aprašyk apie save:</label>
<textarea name="about" id="apie" cols="60" rows="10" /></textarea>

<... kiti HTML formos elementai ...>

Kadangi teksto įvesties elementas naudoja textarea, o ne input žymes, galime drąsiai nurodyti CSS aprašus textarea identifikatoriui.

textarea
{
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	padding-right: 5px;
	color: #333;
	border: 1px solid #AAA;
}

Toliau laukeliams, textarea elementui ir mygtukui pritaikykime fono paveikslėlį.

.laukelis
{
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	padding-right: 5px;
	width: 300px;
	color: #666;
	border: 1px solid #CCC;
	background: url(laukelio_fonas.png) repeat-x;
}

.mygtukas
{
	border: 1px solid #CCC;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 8px;
	padding-right: 8px;
	background: url(mygtuko_fonas.png) repeat-x;
	color: black;
}

.mygtukas:hover {  }

textarea
{
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	padding-right: 5px;
	color: #333;
	border: 1px solid #AAA;
	background: url(laukelio_fonas.png) repeat-x;
}

Iš CSS aprašų matote, kad vietoj HEX reikšmių (pav. #666 ar #666666 ir pan.) panaudotas atributas url. Skliaustų viduje nurodytas adresas iki paveikslėlio, kurį naudosime formų elementų fonams užpildyti. Taip pat matote, jog nurodytas atributas repeat-x — jis žymi, kad fono paveikslėlis turi būti kartojamas x ašyje (horizontaliai) iki elemento pabaigos.

Atkreipkite dėmesį, kad mygtuko pseudo klasei :hover išimta background savybė, kadangi anksčiau buvome nurodę juodą fono spalvą, kai užvedamas pelės žymeklis ant mygtuko. Taip išvengsime ne visai gražaus efekto, mat dabar, panaudoję fono paveikslėlį .mygtukas identifikatoriuje, šiek tiek pakeitėme mygtuko išvaizdą ir, užvedus pelės žymeklį ant mygtuko, nenorime, kad fono paveikslėlis būtų pakeistas juoda spalva. Taip pat prie mygtuko identifikatoriaus buvo pridėtas rėmelis (angl. border), kad aiškiau matytųsi kontūrai.

Rezultatą galite peržiūrėti čia: formos/index5.html.

Tarkime, kad norime išskirtinio mygtuko, kurį, pavyzdžiui, sukūrėme su Adobe Photoshop programa. Pabandykime šiek tiek pakeisti mygtuko CSS aprašus bei HTML kodą.

<input type="submit" name="submit" value="" class="mygtukas" />

.mygtukas
{
	border: 0;
	width: 100px;
	height: 35px;
	background: url(mygtukas.png) no-repeat;
}

HTML dokumente pakeitėme mygtuko elemento value atributą, t. y. nurodėme tuščią reikšmę, kadangi sukurtas grafinis mygtukas turės savo tekstą. CSS aprašuose mygtuko identifikatoriui vėl nurodėme border: 0, nes mums rėmelis nebereikalingas. Taip pat nurodytas mygtuko ilgis (width) ir aukštis (height). Kaip ir anksčiau, mygtuko fonui naudojame background savybę, tik šį kartą nurodytas adresas į kitą paveikslėlį, be to, vietoj repeat-x panaudotas no-repeat atributas — tai reiškia, kad mygtuko fono paveikslėlis nebus kartojamas nei x, nei y ašyje.

Gautas rezultatas: formos/index6.html.

Taigi, CSS suteikia mums daug laisvės, tiesa? Tačiau aktreipsiu dėmesį į tai, kad toks mygtuko stilizavimas turi keletą nepatogumų. Pavyzdžiui, jeigu jūsų internetinėje svetainėje yra daug mygtukų ir jūs nusprendėte stilizuoti mygtukus su paveikslėliais, pamatysite, kad kiekvienam mygtukui turėsite sukurti atskirą paveikslėlį. Todėl kiekvieną kartą pridėję naują mygtuko elementą HTML dokumente greičiausiai turėsite atsidaryti grafinę programą, pavyzdžiui, Adobe Photoshop, ir sukurti atitinkamą paveikslėlį. Žinoma, jeigu mygtuko pavadinimas kartojasi, naujo paveikslėlio kurti nereikės — galėsite naudoti tą pačią mygtuko klasę. Kita problema iškils, jeigu jūsų svetainėje yra kelios kalbos, pavyzdžiui, lietuvių ir anglų. Tokiu atveju turėsite kurti atkirus paveikslėlius ne tik su lietuviškais, bet ir angliškais užrašais. CSS faile privalėsite nurodyti dvigubai daugiau mygtukų klasių, pavyzdžiui: .mygtukas1_lt, .mygtukas1_en; .mygtukas2_lt, .mygtukas2_en ir t. t.

Kaip stilizuosite mygtukus ar kitus formos elementus priklausys tik nuo jūsų. Ir negaliu teigti, kad vienas stilizavimas būdas yra geras, o kitas — ne. Iš tiesų viskas priklauso nuo konkrečios situacijos ir nuo to, koks jūsų tinklalapio pobūdis, ką jame vaizduojate ir pan.

Išsitraukime didžiuosius ginklus

Grįžkime prie idėjos, kad norime stilizuoti mygtukus ir laukelius atskirai, nekurdami papildomų klasių ir jų nepriskirdami formos elementams. Galiu jus nudžiuginti, kadangi tai įmanoma! CSS faile ištrinkime .mygtukas ir .laukelis klases ir vietoje jų parašykime atitinkamus aparašus. Taip pat nepamirškime išimti class atributo iš formos elementų HTML faile.

<form action="" method="post">

    <label for="slapyvardis">Slapyvardis:</label>
    <input type="text" name="username" id="slapyvardis" />
    
    <br />
    
    <label for="slaptazodis">Slaptažodis:</label>
    <input type="password" name="password" id="slaptazodis"  />
    
    <br />
    
    <label for="vardas">Vardas:</label>
    <input type="text" name="name" id="vardas"  />
    
    <br />
    
    <label for="pastas">El. pašto adresas:</label>
    <input type="text" name="email" id="pastas"  />
    
    <br />
    
    <label for="apie">Trumpai aprašyk apie save:</label>
    <textarea name="about" id="apie" cols="60" rows="10" /></textarea>
    
    <br /><br />
    
    <input type="submit" name="submit" value="Siųsti duomenis"  />

</form>	

input[type="text"], input[type="password"]
{ 
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	padding-right: 5px;
	width: 300px;
	color: #666;
	border: 1px solid #CCC;
}

input[type="submit"] 
{
	border: 0;
	padding-top: 4px;
	padding-bottom: 4px;
	padding-left: 8px;
	padding-right: 8px;	
	background: black;
	color: white;
}

Kaip matote, stilizuoti atskirus input elemento tipus nėra sudėtinga. Nurodėme atributo identifikatorių, kuris žymimas prie įprastinio identifikatoriaus pridedant laužtinius skliaustus, o juose nurodžius, koks turi būti elemento atributas, kad naršyklė pritaikytų CSS aprašus. Taigi iš HTML dokumento ir CSS aprašų matome sąsają: <input type="text" name="username" id="slapyvardis" /> su input[type="text"].

Pastaba: nepamirškite, kad „web developerių“ ypatingai nekenčiama naršyklė Microsoft Internet Explorer 6 atributo identifikatorių nepalaiko. Tačiau rekomenduoju į tai didelio dėmesio nekreipti ir ignoruoti IE6, kadangi anksčiau ar vėliau vis tiek reiks galutinai atsikratyti ta seniena, todėl nepalaikydami savo tinklalapyje šios naršyklės padėsite greičiau jai numirti.

Rezultatas: formos/index7.html.

Turbūt žinote, kad yra ir daugiau formos elementų: radio (galimybė pasirinkti vieną iš kelių variantų), checkbox (tam tikrų pasirinkimų pažymėjimas varnelėmis), select (pasirinkimas iš variantų sąrašo), file (failo įkėlimas). Deja, šiuos elementus stilizuoti nėra taip lengva kaip tuos, kuriuos anksčiau aptariau straipsnyje. Pavyzdžiui, paprastai su CSS negalima nurodyti checkbox tipo formos elemento fono paveikslėlio ar pačios varnelės, kuri parodo, kad pasirinkimas buvo pažymėtas. Tačiau ir čia turime išeitį. Galime panaudoti JavaScript ir pakeisti standartinius formos elementus.

---

---

---

Taip pat reikėtų paminėti QuirksMode tinklalapyje esantį įrašą apie tai, kaip stilizuoti failo įkėlimo elementus.

Ieškome įkvėpimo

Pateiksiu keletą pavyzdžių, kaip gražiai stilizuoti formas.

---

Apibendrinimas

Kaip matote, stilizuoti formas nėra sunku kai žinai, kaip tai padaryti. Jas pagražinti galima ne tik vien su CSS, tačiau ir paveiksliukais, o CSS naudoti kaip įrankį jiems „prilipdyti“. Norėdami dar labiau išpuošti formas, galime naudoti JavaScript skriptus, kurie pakeis standartinius elementus kitais, imituojančiais įprastinių elementų veikimą, ir suteiks daugiau galimybių stilizuojant formų išvaizdą.

dvneo	2009-05-22 18:21:19
	Liuks temike Paveiksliukus aš naudojau kaip apėjimą, nes nemokėjau koduojant redaguoti, tai dabar ir prilipo man tas adijux rašė: rekomenduoju į tai didelio dėmesio nekreipti ir ignoruoti IE6, kadangi anksčiau ar vėliau vis tiek reiks galutinai atsikratyti ta seniena, todėl nepalaikydami savo tinklalapyje šios naršyklės padėsite greičiau jai numirti. Aš nuo pat puslapių kūrimo pradžios dirbu su FF ir net nemėginu taikytis su IE6 nesamonėmis, nes aš tai net ne dėl lankytojų gausos dirbu, o dėl reikalo arba savo malonumo, žinoma čia jau nusižengiama reikalavimams. Man teko kovoti su IE6 fanatiku jis buvo mano dėstytojas ir kai reikėdavo sukurti kokį puslapį tai sakydavo man kokia čia kreivą naršykle naudoju (turėjo galvoje FF) ir net nepadėdavo iškilus bėdai, net mažesnį įvertinimą rašydavo (darbus tikrindavo ant IĘ6), bet nepalaužė manęs, kaip dirbu taip dirbu su Firefox nuo pat jo atsiradimo laikų, o IE išvis naudoju tik Firefox persisiųsti Taigi reikia kurtis gražius, stilingus puslapius ir tegul IE6 dvesia

buferis	2009-07-21 14:59:59
	VPuikus Stripsnis! Bet man ramybes neduoda vienas dalykas, ka reiketu daryt jei norėčiau gaut visa ta info į email arba ftp? reikėtu kurt dar vieną html dokumentą? ir koks turėtu būti kodas?

adijux	2009-07-21 15:13:26
	Ką turi omenyje? Šis straipsnis apima formų stilizavimą, o ne patį jų veikimą. Jeigu nori siųsti el. laiškus iš tinklalapio, gali naudoti PHP funkciją mail(). Ir apskritai, apie tinklalapių programavimą skaityk http://php.lt ir http://pixel.lt

• Visi straipsniai
• Apžvalgos (1)
• Cascading Style Sheets (CSS) (11)
• HTML (2)
• Kita (1)
• Svetainių kūrimas (3)
• Tinklalapių dizainas (4)

Spalvos dizaine

Nekyla nė abejonės, kad spalvos tiek spaudos, tiek tinklalapio dizaine yra vienas iš svarbiausių rodiklių, lemiančių gražų dizainą. Atrodo, jog spalvas galima rinktis pagal nuožiūrą, tačiau, deja, tai ne visada pasiteisina. Pastaruoju metu pastebėjau, kokias klaidas daro pradedantieji savamoksliai dizaineriai, todėl galiausiai nusprendžiau aprašyti tas klaidas ir paaiškinti, kaip jų išvengti.

Esminė problema yra ta, kad kai kurie žmonės sugeba sukurti patrauklius dizaino elementus, juos tvarkingai išdėstyti, tačiau neteisingų spalvų pasirinkimas sugadina, sudarko vaizdą, o tai nulemia galutinį sukurto dizaino rezultatą.

Todėl pasistengsiu kuo detaliau išnarplioti dažnai pasitaikančias spalvų derinimo klaidas, šiek tiek apžvelgsiu bendrąją spalvos teoriją ir, žinoma, pateiksiu tiek tinkamų, tiek netinkamų spalvų derinių pavyzdžių.

---

Tinklalapių kūrimas: pirmieji žingsniai

Žmonės, kurie domisi interneto naujovėmis, lankomais tinklalapiais, portalais, anksčiau ar vėliau iškelia sau klausimą — kaip sukurti tinklalapį? Klausimas iš pirmo živlgsnio atrodo visiškai „nekaltas“ ir gana paprastas: be išvedžijimų, nesuprantamų žodžių ar mokslinių terminų. Tačiau asmenims, kuriems šis klausimas užduodamas (čia, manau, nereikia nė minėti, kad žmogus, kurio klausiama, išmano tinklalapių kūrimo subtilybes), visiškai nesuprantama, kaip galima užduoti tokį naivų klausimą?

Stebitės, kodėl tai naivus klausimas? Jeigu taip, tada pamąstykite, iš ko susideda tinklalapio kūrimo procesas. Deja, nemanykite, kad solidų, gerą tinklalapį galima sukurti per kelias valandas ar dienas. Reikia turėti aiškią internetinės svetainės plėtros viziją, patirties, įgūdžių, daug laiko, kolegų (partnerių) ar draugų, kurie padėtų kurti tinklalapį, motyvacijos ir, be abejo, reikia turėti tikslą.

Išvardijau nemažai reikalavimų (raktažodžių), pagal kuriuos turėtumėte orientuotis kurdami tinklalapį, tačiau vien mano tuščiažodžiavimas nepadės jums sužinoti apie interneto svetainių kūrimo aspektus, todėl šiame straipsnyje aptarsiu kiekvieną sritį atskirai, pasidalinsiu savo patirtimi ir nukreipsiu jus teisinga linkme.

---

Technikos apvalintų kampų elementams kurti

Naršydami įvairiuose tinklalapiuose tikriausiai pastebėjote, kad vis dažniau yra naudojami užapvalinti kampai (angl. rounded corners): juos galima pamatyti tinklalapio komentarų blokuose, viršutinėse/apatinėse (header/footer), turinio (content) blokuose bei kitose struktūros dalyse.

Apvalintų kampų elementus sukurti galima ne vienu, o keletu būdų. Elementų kampams apvalinti kartais naudojama JavaScript kalba, tačiau rimčiausia priežastis, kodėl šis būdas nelabai populiarus, — išjungtas JavaScript palaikymas kai kurių lankytojų naršyklėje. Taip pat galime sukurti apvalintus elementus panaudoję pakopinių stilių (CSS) savybes ir paveikslėlius. Dar kitas būdas — kuris yra ateities sprendimas — CSS3. Tai nauja pakopinių stilių specifikacija, kuri dar nėra užbaigta, tačiau kai kurios naršyklės jau palaiko keletą naujosios specifikacijos savybių.

Taigi, panagrinėsime dažniausiai taikomus sprendimus elementų kampų apvalinimui: pavyzdžius, pliusus ir minusus; palyginsime aptariamus sprendimus.

---

Martyna

http://img294.imageshack.us/i/kodel.png/

va man taip nesusiligiuoja, ka daryti?

krienas

"Antrinės spalvos gaunamos sumaišius dvi pirmines spalvas, o tretinės — sumaišius dvi antrines." Šiaip jau, pagal schemą, tretinė spalva gaunama sumaišius ne dvi antrines, o pirminę su antrine: yellow(primary)+green(secondary)=yellow-green(tertiary).

O šiaip geras, išsamus lietuviškas straipsnis, ačiū autoriui; kam sunkiau su anglų kalba, yra Alvydo Jonaičio knyga "Spalvotyra".

adijux

Daugumai žmonių atvirkščiai: jie nenori, kad nuorodos atsidarytų naujame lange. Manau, kad jeigu žmogus nori, kad nuoroda atsidarytų naujame lange, jis paspaus dešinįjį pelės mygtuką ir pasirinks „Open link in a new window“ arba „Open link in a new tab“.

Christine

šeip aš dirbu su paprastomis programomis kaip notepad++ ir keletu kitų. norėčiau sužinot gal yra kitokių programuų su kuriom taip pat nesunku dirbti, bet turi daugiau galimybių ir nemokamai galima parsisiųsti? ar tai tik svajuko dramblionė?

Christine

straipsnis geras tikrai, tik man užkliuvo vienas dalykas. Kai įdedate nuorodas, norėtųsi, kad jos atsidarytų kitame puslapyje, nes paskui sunku rasti kelią atgal, užima laiko arba nesinori giliau naršyti to puslapio į kurį davėte nuorodas.