Tutorijal - Formular za pretragu

Uvod

Poznavanje teorije, kako u oblasti web dizajna tako i u drugim oblastima računarske industrije, svakako je neophodno (iako mladim programerima i web dizajnerima ponekad deluje da nije tako :)), međutim, sve postaje još zanimljivije kada teoretski principi "ožive" kroz primenu u praksi.

Sa teorijom web dizajna već smo se upoznali, i stoga možemo započeti sa realizacijom ideje koju smo provukli kroz prethodne članke: u članku pred nama i drugim člancima koje tek spremamo, bavićemo se tutorijalima za izradu pojedinačnih komponenti web stranica, ali, biće (kasnije) i drugih tutorijala, koji će biti posvećeni različitim strukturama podataka, backend komponentama web aplikacija, desktop programima i Android aplikacijama (kao i raznim drugim oblastima računarske industrije).

U prvom tutorijalu, teoriju koju smo do sada 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:

Što se tiče tehnikalija, stvari su prilično jednostavne: dovoljno je povezati flex-box kontejner (koji nosi tekstualno polje i ikonu), sa odgovarajućim pseudoklasama ....

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, pri čemu se oba elementa nalaze unutar flex kontejnera u okviru koga se unutrašnji elementi raspoređuju horizontalno.

Ukoliko posetilac sajta klikne unutar tekstualnog polja (to jest, ukoliko tekstualno polje dobije "fokus"), širina polja se povećava.

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 donje 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 (a boje su uklonjene): *

   

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 su pripisane klase (zarad stilizacije preko CSS-a):

		
<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 u situacijama 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 svih input elemenata).

		
::placeholder{
	color: #888;
}
		
	

Okvir forme proglašava se za flex kontejner, ali, preko vrednosti inline-flex, da bi se širina okvira forme prilagođavala širini tekstualnog polja i slike (jer, ukoliko se navede display: flex;, 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 što se tiče bordure i zaobljavanja ćoškova, u pitanju 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 pripisuje se fiksna (osnovna) širina, 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), ali, č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 je izabrana 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 biti potrebe (u nekom momentu), 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, tj. animacijama (jer planiramo da u skorije vreme posvetimo članak navedenoj temi), vidimo da se elementarna animacija koja deluje sasvim dopadljivo, može definisati na vrlo jednostavan način.

Dovoljno je navesti:

• šta se menja ("width")
• koliko tranzicija traje ("400ms")

Što se tiče dugmeta, ukinuli smo pozadinu i borduru, i postavili smo odgovarajuću vrednost desne margine, da bi dugme bilo udaljeno od desne ivice formulara (ponovo, da ne "štrči", i takođe je ponovo 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.

Slika koju koristimo takođe ima podrazumevanu borduru (kao i bilo koji drugi <img> element), ali, i u ovom slučaju bordura se ukida 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 sasvim 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 izradu nekoliko desetina HTML stranica sa pripadajućim CSS-om; po mogućnosti - tako da svaki sledeći poduhvat bude za nijansu kompleksniji od prethodnog). :)