HTML in CSS za začetnike (del 46): Kontaktni obrazec (1)

Sklepam, da boste ustvarili dodatno HTML datoteko. Jaz jo bom v vsakem primeru shranil pod imenom kontakt.html. Kontakt.html je na istem nivoju kot že poznana index.html.

V tem prvem delu se bodo osnovne nastavitve obrazca izvedle. Stvari, kot so okrogli robovi, barvni prehodi itd., sledijo v naslednjem vodiču.

V kontakt.html ustvarite obrazec. Obrazec naj bo znotraj območja div s razredom content. Razmislite nato, katera polja naj bodo ustvarjena. Odločil sem se za zbiranje naslednjih informacij:

• Ime
• E-poštni naslov
• Komentar

Seveda morate sami določiti, katere informacije želite pridobiti. Načeloma pa priporočam, da zastavite le tiste podatke, ki jih resnično potrebujete. Večina obiskovalcev spletnih mest se namreč izogiba obsežnim obrazcem. Zato naj bo kratek.

Osnovna struktura mojega obrazca je videti takole:

<div class="content">
   <form class="form" action="#" method="post">
   <fieldset>
   <legend>Kontaktirajte nas</legend>
   <ol>
      <li>
      <label for="name">Ime:</label>
      <input type="text" name="name" id="name" value="" />
      </li>
      <li>
      <label for="email">E-pošta:</label>
      <input type="text" name="email" id="email" value="" />
      </li>
      <li>
      <label for="comment">Komentar:</label>
      <textarea cols="32" rows="7" name="content" id="content"></textarea>
      </li>
      <li class="button">
      <input type="submit" name="submit" id="submit" value="Pošlji" />
      </li>
   </ol>
   </fieldset>
   </form>
</div>

Obrazec na začetku ne vsebuje nobenih posebnosti. Okoli obrazčnih polj je uporabljena definicija fieldset. Kako ustvariti obrazčna polja in kaj predstavljajo elementi label, je bilo že dovolj opisano. Na tem mestu naj bo torej polna osredotočenost na oblikovanje obrazca.

V brskalniku se bo na začetku prikazal še ne preveč privlačen obrazec.





Treba bo izboljšati.

Najprej so bile podane osnovne informacije o obrazcu.

form {
   padding: 3px 0 0;
   margin: 10px auto;
   width: 550px;
 }

Tukaj so določene zunanje in notranje razdalje. Poleg tega je za obrazec določena širina 550 slikovnih pik.

Nadaljujemo s oblikovanjem fieldset.

fieldset {
   padding: 10px 20px 25px;
 }

Tudi tukaj so določene razdalje.

Obrazčna polja sama so določena znotraj urejenega seznama ol.

ol {
   list-style-type: none;
   margin: 0;
   padding: 0;
 }

Da ta seznam vizualno ne izgleda več kot seznam, se uporablja list-style-type: none;. Poleg tega sta robova in notranji rob določena na 0.

Naslednji korak je določitev seznamskih vnosov. Ti plavajo na levo in imajo notranjo razdaljo 10 slikovnih pik.

li {
   float: left;
   padding: 10px;
 }

Obstaja še posebnost glede gumba, ki je postavljen pod obrazcem. Ta naj bo poravnan desno.

li.button {
   float: none;
   clear: both;
    text-align: right;
 }

Naslov obrazca

Sedaj se posvetimo elementu legend. Prek njega je določen naslov obrazca.





Določitev za naslov izgleda takole:

fieldset legend {
   font-weight: bold;
   font-size: 22px;
   margin: 20px 0 0 10px;
 }

Oznake

Element label ste že srečali v tem nizu. Prek tega label-a se vzpostavi logična povezava med oznako polja in dejanskim obrazčnim poljem. Glede na CSS definicijo je tu še posebnost.

label {
   display:block;
   cursor: pointer;
   font-weight: bold;
   line-height: 24px;
 }

Element label sem opremil med drugim z opredelitvijo cursor. S tem obiskovalcem sporočam, da so oznake polj klikljive. Če res kliknejo na oznako polja, se v ustrezno polje samodejno postavi kazalec.

Oblikovanje obrazčnih polj

Naslednji korak je oblikovanje dejanskih obrazčnih polj. Najprej so podane splošne informacije o input in textarea.

input, textarea {
   color: #3399FF
   border: 1px solid #3399FF;
   font: 13px Helvetica, Arial, sans-serif;
   padding: 8px 10px;
   width: 190px;
 }

Gre za izključno oblikovne zadeve. Posebno pozornost je treba nameniti okvirjem. Ko postavite kazalec v polje, se spremeni barva okvirja. To ni samo estetski vidik. Dejansko pomaga tudi obiskovalcem pri izpolnjevanju obrazca. Tako vedno takoj vidijo, v katerem polju se nahaja kazalec.

Zdaj sledijo nekaj informacij o večvrstičnem polju za vnos besedila.

textarea {
   width: 430px;
   overflow: auto;
 }

Širina tega polja je določena na 430 slikovnih pik. Morda se zdi nekoliko čudno na prvi pogled navodilo overflow: auto v povezavi z večvrstičnimi polji za vnos. Ta vrstica je posledica starejših različic spletnega brskalnika Internet Explorer. Dejansko je ta brskalnik prikazoval drsnike tudi v večvrstičnih poljih za vnos, čeprav to ni bilo potrebno. Z uporabo overflow: auto se lahko izognemo temu estetskemu problemu.

Oblikovanje gumba za pošiljanje

Trenutno je gumb za pošiljanje videti precej skromno. To se bo zdaj spremenilo. Rezultat bo videti takole:





Gumbu bodo dodeljene različne lastnosti.

• Barva ozadja

• Videz pisave

• Okvir

• Razmiki

Ustrezen CSS zapis se glasi:

input[type="submit"] {
   background-color: #3399FF;
   color: #fff;
   cursor: pointer;
   font: bold 1em/1.2 Georgia, "Times New Roman", serif;
   border: 1px solid #000;
   padding: 5px 10px;
   width: auto;
 }

Obenem velja omeniti tudi zapis input[type="submit"]. S tem selektorjem pridemo do elementov input, ki imajo kombinacijo atributa-vrednosti type="submit".