HTML ja CSS algajatele (osa 46): Kontaktvorm (1)

Ma eeldan, et te loote lisaks HTML-faili. Mina isiklikult salvestan selle faili nimega kontakt.html. Kontakt.html asub samal tasemel kui teie juba teadaolev index.html.

Selles esimeses osas tehakse põhilised vormi seaded. Ümarad nurgad, värvigradiendid jne järgnevad järgmises õpetuses.

Kontakt.html-s luuakse vorm. Vorm määratletakse div elemendis, mille klassiks on content. Mõelge seejärel välja, millised väljad luua. Mina olen otsustanud järgmiste andmete küsimiseks:

• Nimi
• E-posti aadress
• Kommentaar

Loomulikult peate ise otsustama, milliseid andmeid soovite koguda. Põhimõtteliselt soovitan koguda vaid tegelikult vajalikke andmeid. Enamik veebisaidi külastajaid kipub eemale hoidma pikkadest vormidest. Hoidke see siis lühike.

Minu vormi põhiolemus on järgmine:

<div class="content">
   <form class="form" action="#" method="post">
   <fieldset>
   <legend>Võtke meiega ühendust</legend>
   <ol>
      <li>
      <label for="name">Nimi:</label>
      <input type="text" name="nimi" id="nimi" value="" />
      </li>
      <li>
      <label for="email">E-posti aadress:</label>
      <input type="text" name="email" id="email" value="" />
      </li>
      <li>
      <label for="comment">Kommentaar:</label>
      <textarea cols="32" rows="7" name="sisu" id="sisu"></textarea>
      </li>
      <li class="button">
      <input type="submit" name="saada" id="saada" value="Saada" />
      </li>
   </ol>
   </fieldset>
   </form>
</div>

Vormis pole alguses midagi erilist. Ümber vormiväljade kasutati fieldset määrangut. Kuidas luua vormivälju ja mida tähendavad label elemendid, on juba piisavalt kirjeldatud. Siinkohal tuleb keskenduda vormi kujundamisele.

Kui tulemused brauseris avate, näete alguses veel mitte eriti kõnekas vorm.





Siin tuleb kindlasti parandusi teha.

Kõigepealt tehakse põhiandmed vormile.

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

Siin on määratletud välimised ja sisesed vahed. Lisaks seatakse vormile laius 550 pikslit.

Jätkame fieldset kujundamisega.

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

Siinkohal on määratletud vahed.

Vormiväljad ise on paigutatud järjestatud ol nimekirja elementideks.

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

Selleks et see loetelu optiliselt enam ei paistaks, kasutatakse list-style-type: none;. Lisaks määratakse nii piirid kui ka sisevahed nulliks.

Järgmisena määratletakse loendi sissekanded. Need ujuvad vasakule ja neil on sisevahemaa 10 pikslit.

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

Erilist märkust väärib nupp vormi all. See peaks olema paremale joondatud.

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

Vormi pealkiri

Pöördume nüüd legend elemendi poole. Selle abil määratakse vormi pealkiri.





Pealkirja määratlus on järgmine:

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

Sildid

label element on samuti juba selle seeria raames käsitletud. Selle abil saab luua loogilise seose väljanimetuse ja tegeliku vormivälja vahel. CSS defineerimisel on siin üks eripära.

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

Ma varustan label elemendi muu hulgas cursor määranguga. See annab külastajatele märku, et väljanimetused on klõpsatavad. Kui nad klõpsavad tõepoolest väljanimetust, määratakse vastavasse välja automaatselt kursor.

Vormi väljade kujundamine

Järgmisena kujundatakse tegelikud vormiväljad. Kõigepealt tehakse üldised määrangud input ja textarea kohta.

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

Siin on tegemist ainult kujunduslike asjadega. Erilist tähelepanu tuleks pöörata raamidele. Niipea kui kursor asetatakse väljale, muutub raamatu värv. See pole ainult esteetiline aspekt. Tegelikult aitab see ka külastajaid vormi täitmisel. Nii näevad nad alati, millisel väljal kursor hetkel asub.

Nüüd järgnevad mõned andmed mitmerealise tekstisisestusvälja kohta.

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

Selle välja laius määratakse 430 piksliga. Võib-olla tundub alguses veider juhend overflow: auto seoses mitmerealiste sisestusväljadega. See rida on tingitud vanematest Internet Exploreri versioonidest. Tegelikult näitas see brauser mitmerealistes sisestusväljades ka siis kerimisribasid, kui see polnud tegelikult vajalik. Overflow: auto abil saab selle iluprobleemi lahendada.

Disaini Saada nupp

Praegu näeb Saada nupp üsna tagasihoidlik välja. See muutub nüüd. Tulemus näeb välja järgmine:





Nuppule määratakse erinevad omadused.

• Taustavärv

• Fondi välimus

• Raam

• Vahed

Sellele vastav CSS-süntaks on järgmine:

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;
 }

Märkimisväärne võib olla siin juhend input[type="submit"]. Selle valija abil pääsete juurde sisestuselementidele, millel on atribuudi-väärtuse kombinatsioon type="submit".