Limun deaktiviran
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:
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: 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;
}
{
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;
}
{
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');
}
{
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>
<link rel="stylesheet" href="style.css" type="text/css" />
Sada dolazi dodavanje forma u HTML tako da kopirate ovaj kod:
<input type="text" name="search" size="20">
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:
<input type="text" name="username" class="form" size="10">
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.
<input type="text" name="username" class="form" size="10">
<input type="submit" class="form" value='Search'>
<input type="submit" class="form" value='Search'>
I imamo lijepi form koji možemo koristiti na bilo kojoj stranici (gotovo svakoj).
Copyright © Ripaz
Odg: My piece of art..
Melo @ 22:05
Odg: My piece of art..
Corangar @ 21:15
Fotostudio u Zagrebu
bheware @ 14:50
Odg: My piece of art..
Melo @ 13:24
Odg: 3D alat...
bheware @ 10:25
