CSS vodič vam bo pokazal, kako s CSSjem urejati obrazce oz. forme. Obrazec bomo postavili v neurejen seznam, nato pa določili barvo ozadja, sliko za ozadje, izgled obrazcev ob kliku, izgled, ko greste z miško čez, barva, velikost besedila, preprosto vse, kar je potrebno za poseben izgled obrazca.

Kliknite za PRIKAZ celotne kode (HTML & CSS)

RAZLAGA kode:

1
2
3
4
5
6

form.obrazec {
    font-size: 14px;
    width: 400px;
    font-family: Tahoma;
    color: #9e0059;
}

• velikost pisave za celoten obrazec
• širino obrazca
• vrsto pisave za celoten obrazec
• barvo pisave za celoten obrazec

1
2
3
4
5

form.obrazec fieldset {
    margin-bottom: 10px;
    background: #ffe2e2 url(ornament.png) bottom left no-repeat;
    border: 1px solid #990056;
}

• spodnji odmik od obrazca (če je za obrazcem še kakšna druga vsebina je med njima razmika 10px.)
• ozadje okoli polj obrazca + določena je slika, ki je v spodnjem levem kotu, kot ornament oz. popestritev
• obroba okoli obrazca

1
2
3
4
5

form.obrazec legend {
    padding: 0 2px 5px 0;
    font-weight: bold;
    font-size: 18px;
}

• nadzira ime obrazca (Kontaktni obrazec)

1
2
3
4
5

form.obrazec fieldset li {
    list-style: none;
    padding: 10px;
    margin: 0;
}

• list-style določa simbol, ki naj bi se pokazal pred vsako vrstico (več o list-style).
• padding določa razmik med vrsticami oz. polji

1
2
3
4
5
6
7

form.obrazec label {
    font-weight: bold;
    float: left;
    text-align: right;
    margin-left: -155px;
    width: 150px;
}

• nadzira oblikovanje Ime, Email, Sporočilo.
• margin in width skrbita, da so Ime, Email in Sporočilo poravnani ob polja obrazca

1
2
3
4

form.obrazec input, form.obrazec textarea {
    background: #fff url(obr_oz.png) top repeat-x;
    border: 1px solid #e60082;
}

• oblika obrazcev
• določimo barvo ozadja poljem obrazca in po želji tudi sliko (več o CSS ozadjih)
• obroba polj obrazcev

1

form.obrazec input:hover, form.obrazec textarea:hover

• Izgled polj obrazca, ko greste z miško čez (hover)

1

form.obrazec input:focus, form.obrazec textarea:focus

• Izgled polj obrazca, ko kliknete na polje

1
2
3
4
5
6

#gumb{
    float: right;
    font-weight: bold;
    color: #d10076;
    margin:0 60px 10px 0;
}

• koda za urejanje gumba submit
• right je zaradi desne postavitve (če hočete gumb imeti na levi vpišite left)
• margin določa odmik gumba od desnega in spodnjega roba
• gumbu lahko določite še marsikaj (več o oblikovanju gumbov)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<form action="#" class="obrazec">
    <fieldset>
        <legend>Kontaktni obrazec</legend>
        <ul>
            <li>
                <label for="ime">Ime:</label>
                <input id="ime" />
            </li>
            <li>
                <label for="email">Email:</label>
                <input id="email" />
            </li>
            <li>
                <label for="sporocilo">Sporočilo:</label>
                <textarea id="sporocilo" rows="7" cols="25"></textarea>
            </li>
        </ul>
   <input id="gumb" type="submit" value="Pošlji" />
    </fieldset>
 
</form>

• HTML koda obrazca:
  • form - obrazec
  • legend - naslov skupine polj obrazcev
  • ul in li - neurejen seznam (za lažje oblikovanje) (več o seznamih)
  • label - naziv posameznega polja obrazca (for in id morata biti ista, zaradi povezave med label in input)
  • input - polje obrazca

Zaključek: Po vsem, kar ste prebrali sedaj znate s CSSjem oblikovati obrazec po svojih željah. Naj bodo vaši obrazci prijetni na pogled in naj se nevsiljivo vključijo v vašo spletno stran.