Tutorijal - Formular za pretragu

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:

1. noseći element biće flex box kontejner (mada, za razliku od slike, flex-kontejner bez unutrašnjih elemenata, zapravo bi se skroz 'skupio'):

   

2. unutar nosećeg elementa, postavićemo tekstualno polje i dugme sa ikonom:

   

3. preko leve margine, udaljićemo levu ivicu tekstualnog polja od leve ivice nosećeg, elementa:

   

4. zaoblićemo ćoškove na levoj strani nosećeg elementa:

   

5. preko desne margine, udaljićemo desnu ivicu dugmeta od desne ivice nosećeg elementa:

   

6. zaoblićemo ćoškove na desnoj strani nosećeg elementa:

   

7. formular je gotov (boje smo uklonili): *

   

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). :)