Kako uraditi Search form?

Pogledaj prethodnu temu Pogledaj sledeću temu Ići dole

Kako uraditi Search form?

Počalji od Mr.Joker taj Pon Avg 01, 2011 5:08 am

Želite da imate Search formu na web stranici, forumi, apsolutno nebitno gde. Pokaću vam kako da odradite ovakav Search form:
[You must be registered and logged in to see this image.]
Morate pre svega shvatiti kako funkcioniše Search forma.
[You must be registered and logged in to see this image.]
Kod:
<input type="text">
Kod iznad predstavlja deo forme u kojoj se unosi tekst.
Kod:
<input type="submit">
Kod iznad predstavlja deo forme koji vrši neku funkciju, a u ovom slučaju vrši pretragu otkucanih reči.
Kod:
<form>
Kod iznad jeste skup svih kodova iznad. Forma i jeste sačinjena od dela za kucanje teksta i od buttona koji je samo maska za funkciju pretrage.
Imamo HTML kod:
Kod:
<form id="searchbox" action="">
    <input id="search" type="text" placeholder="Type here">
    <input id="submit" type="submit" value="Search">
</form>
Postoje default skraćenice u HTML jeziku tako da ne morate raditi javaskriptu sa funkcijom za pretragu ili možda PHP kod. Sve je već pod jednom rečju uradjeno default tako da value="search" podrayumeva funkciju ya pretragu.
Sada idemo na estetiku koju svi mi volimo:
Kod:
#searchbox
{
        background: #eaf8fc;
        background-image: -moz-linear-gradient(#fff, #d4e8ec);
        background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d4e8ec),color-stop(1, #fff));

        -moz-border-radius: 35px;
        border-radius: 35px;

        border-width: 1px;
        border-style: solid;
        border-color: #c4d9df #a4c3ca #83afb7;
        width: 500px;
        height: 35px;
        padding: 10px;
        margin: 100px auto 50px;
        overflow: hidden; /* Clear floats */
}
Ovde nemam šta posebno da vam objašnjavam osim da je izvršeno ulepšavanje same forme koja je na default veoma ružna i ne liči na nešto posebno. Rezultat sada je ovakav:
[You must be registered and logged in to see this image.]
Sada je došlo vreme da sredimo TextBox i Button i na taj način imamo kul izgled jedne Search forme.
Kod:
Kod:
#search, #submit
{
        float: left;
}

#search
{
        padding: 5px 9px;
        height: 23px;
        width: 380px;
        border: 1px solid #a4c3ca;
        font: normal 13px 'trebuchet MS', arial, helvetica;
        background: #f1f1f1;

        -moz-border-radius: 50px 3px 3px 50px;
        border-radius: 50px 3px 3px 50px;
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
}

/* ----------------------- */

#submit
{
        background: #6cbb6b;
        background-image: -moz-linear-gradient(#95d788, #6cbb6b);
        background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #6cbb6b),color-stop(1, #95d788));

        -moz-border-radius: 3px 50px 50px 3px;
        border-radius: 3px 50px 50px 3px;

        border-width: 1px;
        border-style: solid;
        border-color: #7eba7c #578e57 #447d43;

        -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
        -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
        box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;               

        height: 35px;
        margin: 0 0 0 10px;
        padding: 0;
        width: 90px;
        cursor: pointer;
        font: bold 14px Arial, Helvetica;
        color: #23441e;

        text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

#submit:hover
{
        background: #95d788;
        background-image: -moz-linear-gradient(#6cbb6b, #95d788);
        background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #95d788),color-stop(1, #6cbb6b));
}     

#submit:active
{
        background: #95d788;
        outline: none;

        -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
        -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}

#submit::-moz-focus-inner
{
      border: 0;  /* Small centering fix for Firefox */
}             
Opet jedan CSS kod koji vama i da vam objasnim ne znači mnogo. Mogao bih ali ako ne znate osnovne stvari uzlaud bih govorio.
Izgled:
[You must be registered and logged in to see this image.]
Sada izgleda prekrasno.

Browseri koji podržavaju ove kodove:

* Firefox 3.7+
* Safari 4.0+
* Chrome 4.0+
* Opera 11+

Opera 11 podržava placeholders pa s toga vaš CSS kod mora imati i ovo:

Kod:
#search::-webkit-input-placeholder {
  color: #9c9c9c;
  font-style: italic;
}

#search:-moz-placeholder {
  color: #9c9c9c;
  font-style: italic;
}
Sada će na operi izgledati isto kao i na ostalim browserima.

DEMO: KLIKNI OVDE
Tutorial by Catalin Rosu a.k.a Red
Prevedeno sa Engleskog: System32

Mr.Joker
Administrator
Administrator

Broj poruka Broj poruka : 1709
D4U Novac D4U Novac : 1871
Reputacija Reputacija : 31
Godina Godina : 24
Lokacija Lokacija : Svet Foruma
Poso/dokolice Poso/dokolice : Programiranje


Pogledaj profil korisnika

Nazad na vrh Ići dole

Re: Kako uraditi Search form?

Počalji od Prince. taj Pon Avg 01, 2011 6:01 am

Prekorisno, hvala ti Smile


[You must be registered and logged in to see this image.]
I LIVE TO LOVE
avatar
Prince.
Dizajner
Dizajner

Broj poruka Broj poruka : 1901
D4U Novac D4U Novac : 2116
Reputacija Reputacija : 3
Godina Godina : 21
Lokacija Lokacija : Stol'ca :P
Poso/dokolice Poso/dokolice : Umjetnost :)


Pogledaj profil korisnika http://we-are-teens.com/

Nazad na vrh Ići dole

Re: Kako uraditi Search form?

Počalji od Mr.Joker taj Pon Avg 01, 2011 6:04 am

Nema na čemu Smile


Who says anarchy, says negation of government;
Who says negation of government, says affirmation of the people;
Who says affirmation of the people, says individual liberty;
Who says individual liberty, says sovereignty of each;
Who says sovereignty of each, says equality;
Who says equality, says solidarity or fraternity;
Who says fraternity, says social order.

Mr.Joker
Administrator
Administrator

Broj poruka Broj poruka : 1709
D4U Novac D4U Novac : 1871
Reputacija Reputacija : 31
Godina Godina : 24
Lokacija Lokacija : Svet Foruma
Poso/dokolice Poso/dokolice : Programiranje


Pogledaj profil korisnika

Nazad na vrh Ići dole

Re: Kako uraditi Search form?

Počalji od Sponsored content


Sponsored content


Nazad na vrh Ići dole

Pogledaj prethodnu temu Pogledaj sledeću temu Nazad na vrh


 
Dozvole ovog foruma:
Ne možete odgovarati na teme u ovom forumu