Tutorijali

Pregled Novo Popularno Dodaj tutorijal

Izrada stylish form-a

Autor: Ripaz
Dodano: 23/03/2008 u 15:37

Kategorija:
Web - Client side
Komentara: 0

OCJENA

n/a

Glasova
0

1. Što je form?

Form je ono što vidite na skoro svakoj stranici ili forumu. Ili je to form za registraciju ili čak za postanje komentara, form-ovi su vidljivi na skoro svakoj stranici. Kako se ponekad originalni form ne uklapa u boje stranice potrebno je izvršiti neko promjene.
Naprimjer pretvoriti ovo ružno pače:

uploaded slika

u ovo:

Za ovaj tutorijal trebate imati minimalno znanje iz HTML-a i CSS-a

2. CSS programiranje

Kao prvo trebate imati CSS, koji otvorite i nastavite od tamo gdje se stali. A ako nemate CSS fajl onda ga možete stvoriti tako da jednostavno otvorite Notepad.

U CSS utipkavamo ovo

.form
{

}

To nam daje određeni prostor gdje moramo pisati da bi smo utjecali na neki objektu u/na web stranici.

Onda polako dodajemo ovo:

.form
{
border: 1px;
}

Border to je crta koja nam okružuje form. 1px znači da je tolika debljina bordera.
Da bi smo još malo uredili form dodajemo još malo:

.form
{
border: 1px dashed #FF0000;
}

To nam dodaje izgled (dashed) i boju (#FF0000) forma. Boju možete mijenjati po volji, ali izgled ne možete. Ono samo ima nekoliko oblika koji se mogu koristiti. Normalno ako uklonite "dashed" onda će form dobiti čvrstu crta a ne iscrtanu.

Sada krećemo na uređivanje pozadine forma:

.form
{
border: 1px dashed #FF0000;
background: #000000;
}

Dodali smo boju pozadine. No ako želite dodati sliku umjesto statične boje onda samo dodate ovaj kod:

.form
{
border: 1px dashed #FF0000;
background: #000000 url('bg-form.jpg');
}

Završili smo sa izradom CSS koda, sada CSS spremimo pod imenom style.css, no pazite da ima prefiks .css a ne .txt kako se događalo nekima.

3. Dodavanje CSS u HTML

Da bi smo dodali CSS u HTML moramo dodati ovaj kod između <head> i </head>

Sada dolazi dodavanje forma u HTML tako da kopirate ovaj kod:

U samom kodu forma znamo da se radio o takozvanom search formu.

Sada form još izgleda kao da je iz doba kada su kompjuteri tek izrađeni. Da bi smo dodali stil koji smo napravili u CSS-u moramo ubaciti jedan mali kod:

Ovaj kod znači da smo "linkali" kod iz CSS fajla sa HTML-ovim kodom.

Sada dolazi dodavanje gumba. Princip je isti samo što je HTML kod drukčiji od tekst box-a.

I imamo lijepi form koji možemo koristiti na bilo kojoj stranici (gotovo svakoj).

Prikaži komentare (0)