Uvod
Kao što smo najavili u prethodnim člancima, započinjemo seriju tutorijala u kojima ćemo se baviti pojedinačnim komponentama koje se pojavljuju na web stranicama, strukturama podataka i delovima web aplikacija (a postoje planovi i za tutorijale koji su vezani za desktop programe i Android aplikacije).
Na samom početku (u članku koji je pred nama), teoriju koju smo izneli u uvodnom serijalu članaka o web dizajnu (CSS box, flex, responzivni web dizajn i još poneka sitnica), primenićemo u praksi, u izradi jednostavnog formulara za pretragu:
Ukratko (što se tiče tehnikalija), potrebno je da koristimo flex-box kontejner koji nosi tekstualno polje i ikonu, i potrebno je da koristimo pseudoklase.
Formular za pretragu
Kao što smo videli u uvodnom odeljku, formular za pretragu sadrži polje za unos teksta i ikonu koja služi kao dugme preko koga se pretraga pokreće, a oba elementa se nalaze unutar flex kontejnera koji svoje elemente raspoređuje horizontalno.
Kada kliknemo unutar tekstualnog polja (to jest, kada tekstualno polje dobije "fokus"), širina polja će se povećati.
Da bismo se upoznali sa svim detaljima, razmotrićemo pažljivo plan za kreiranje formulara, a potom i celokupnu HTML strukturu i pripadajući CSS kod.
Plan za izradu
Pre nego počnemo da pišemo kod, napravićemo plan:
-
noseći element biće flex box kontejner (mada, za razliku od slike, flex-kontejner bez unutrašnjih elemenata, zapravo bi se skroz 'skupio'):
Slika 1. - Plan za izradu formulara za pretragu - korak #1. -
unutar nosećeg elementa, postavićemo tekstualno polje i dugme sa ikonom:
Slika 2. - Plan za izradu formulara za pretragu - korak #2. -
preko leve margine, udaljićemo levu ivicu tekstualnog polja od leve ivice nosećeg, elementa:
Slika 3. - Plan za izradu formulara za pretragu - korak #3. -
zaoblićemo ćoškove na levoj strani nosećeg elementa:
Slika 4. - Plan za izradu formulara za pretragu - korak #4. -
preko desne margine, udaljićemo desnu ivicu dugmeta od desne ivice nosećeg elementa:
Slika 5. - Plan za izradu formulara za pretragu - korak #5. -
zaoblićemo ćoškove na desnoj strani nosećeg elementa:
Slika 6. - Plan za izradu formulara za pretragu - korak #6. -
formular je gotov (boje smo uklonili): *
Slika 7. - Plan za izradu formulara za pretragu - korak #7.
Sada kada znamo 'šta nam je činiti', kreiraćemo HTML strukturu i CSS.
HTML struktura
HTML struktura formulara za pretragu je jednostavna i podrazumeva tri elementa kojima ćemo pripisati klase:
<form class='pretraga_forma_okvir' method='GET' action='pretraga.php'>
<input type='text' class='pretraga_forma_tekst'
name='pretraga_forma_tekst'
placeholder='Pretraga ....'/>
<button class='pretraga_forma_dugme' type='submit'>
<img src='/slike/ikona_pretraga.svg'/>
</button>
</form>
Da pojasnimo i detalje sa kojima se nismo susretali ranije.
Atribut placeholder
....
placeholder='Pretraga ....'
.... definiše tekst koji će biti ispisan u polju pretrage dok korisnik ne počne da unosi pojam za pretragu (ili, kada korisnik izbriše tekst).
Pogledajmo i CSS kod.
CSS kod
Pseudoklasa placeholder
imaće uticaj na sve input
elemente (odnosno, na placeholder
tekst unutar input
elemenata).
::placeholder{
color: #888;
}
Okvir forme proglašavamo za flex kontejner, ali, preko vrednosti inline-flex
, da bi se širina okvira forme prilagođavala širini tekstualnog polja i slike (jer, u suprotnom, forma će se automatski širiti do pune širine nosećeg okvira).
.pretraga_forma_okvir {
display: inline-flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
height: 36px;
border: solid 2px #888888;
border-radius: 18px;
}
Visinu ćemo definisati "ručno", a bordura i zaobljavanje ćoškova su delovi modela CSS box (koji su čitaocima poznati od ranije).
.pretraga_forma_tekst {
width: 120px;
margin: 0 0 0 16px;
font-size: 12pt;
border: none;
/*background: blue;*/
-webkit-transition: width 400ms;
transition: width 400ms;
}
.pretraga_forma_tekst:focus{
width: 240px;
}
Polju za unos pripisaćemo fiksnu (osnovnu) širinu, dok će širina pri fokusu biti veća (što je definisano preko pseudoklase :focus
, koja se aktivira kada element dobije fokus, i deaktivira kada element izgubi fokus).
Na početku, širina polja je mala (da prazno polje ne bi nepotrebno skretalo pažnju), a čim korisnik klikne u polje, širina se poveća.
Preko leve margine, tekstualno polje biće pomereno tako da ne "štrči" preko zaobljenih ćoškova okvira.
Veličina fonta izabrana je u skladu sa pravilima o čitljivosti: 12pt je krajnje primerena veličina za polje pretrage (malo veći font takođe dolazi u obzir, ali ne bi trebalo birati veličinu koja je manja od 12pt, jer to već dovodi u pitanje čitljivost formulara).
Bordura će biti uklonjena jer, u suprotnom, ostaje podrazumevana (default) bordura, koja remeti dizajn.
Boja pozadine je ostala (pod komentarom), jer možda će (u nekom momentu), biti potrebe da je privremeno aktivirate, da biste videli kako margina utiče na položaj tekstualnog polja u odnosu na ceo formular (ili da isprobate neki sličan 'zahvat').
Za kraj, mala pikanterija (bez koje formular samo 'naglo' promeni veličinu):
-webkit-transition: width 400ms;
transition: width 400ms;
Iako ovoga puta nećemo detaljnije zalaziti u priču o CSS tranzicijama/animacijama (jer planiramo da u skorije vreme posvetimo članak navedenoj temi), vidimo da se na vrlo jednostavan način može definisati elementarna animacija koja deluje krajnje dopadljivo.
Dovoljno je navesti:
- šta se menja ("width")
- koliko tranzicija/animacija traje ("400ms")
Što se tiče dugmeta, ukinuli smo pozadinu i borduru, a preko desne margine, dugme je udaljeno od desne ivice formulara (ponovo - da ne "štrči" i takođe, ponovo je pod komentarom ostavljena i boja pozadine koja se može privremeno uključiti, da bi se lakše primetio uticaj desne margine na položaj dugmeta u odnosu na formu i sl):
.pretraga_forma_dugme {
background: transparent;
border: none;
margin: 0 8px 0 0;
/*background: green;*/
}
Za sliku koja se nalazi unutar tagova <button>
, definisane su fiksne dimenzije (budući da je sama slika kvadratnih proporcija, za visinu je postavljena vrednost auto
, pa praktično obe stranice dobijaju vrednost preko atributa width
).
Slika koju koristimo (kao i bilo koji <img>
element), takođe ima podrazumevanu borduru, ali, i u ovom slučaju bordura je ukinuta preko CSS-a.
.pretraga_forma_dugme img {
width: 24px;
height: auto;
border: none;
}
Za kraj ....
Kao što vidimo, uz malo promišljanja i uz osnovno poznavanje HTML-a i CSS-a, uspeli smo da napravimo jednostavan (ali krajnje efektan) element, koji se može koristiti na sajtovima.
Neki elementi koje ćemo obrađivati u tutorijalima koji tek slede, prilično su jednostavni (baš kao i element koji smo kreirali u ovom članku), dok neki drugi elementi - nisu 'skroz jednostavni', ali, što se tiče komplikovanijih elemenata, potrebna je samo "kilometraža" (to jest, iskustvo koje se stiče kroz kreiranje nekoliko desetina HTML stranica sa pripadajućim CSS-om, po mogućnosti - tako da svaki sledeći poduhvat bude za nijansu kompleksniji od prethodnog). :)