HTML a CSS pre začiatočníkov (časť 46): Kontaktný formulár (1)

Predpokladám, že vytvoríte ďalší HTML súbor. Ja ho uložím pod názvom kontakt.html. Kontakt.html sa nachádza na rovnakej úrovni ako už známa index.html.

V tomto prvom kroku sa vykonajú základné nastavenia formulára. Veci ako zaoblené rohy, farba atď. budú nasledovať v nasledujúcom návode.

V rámci kontakt.html vytvoríte formulár. Formulár sa definuje v rámci oblasti div s triedou content. Potom sa rozhodnite, aké polia chcete vytvoriť. Rozhodol som sa získať nasledujúce informácie:

• Meno
• Emailová adresa
• Komentár

Sami si musíte zvoliť, aké informácie chcete získať. V prípade potreby vám odporúčam získať len skutočne potrebné údaje. Väčšina návštevníkov webových stránok sa totiž vyhýba rozsiahlym formulárom. Udržte to teda stručné.

Základná štruktúra môjho formulára vyzerá nasledovne:

<div class="content">
   <form class="form" action="#" method="post">
   <fieldset>
   <legend>Kontaktujte nás</legend>
   <ol>
      <li>
      <label for="name">Meno:</label>
      <input type="text" name="name" id="name" value="" />
      </li>
      <li>
      <label for="email">Emailová adresa:</label>
      <input type="text" name="email" id="email" value="" />
      </li>
      <li>
      <label for="comment">Komentár:</label>
      <textarea cols="32" rows="7" name="content" id="content"></textarea>
      </li>
      <li class="button">
      <input type="submit" name="submit" id="submit" value="Odoslať" />
      </li>
   </ol>
   </fieldset>
   </form>
</div>

Formulár neobsahuje výrazné špecifikácie. Okolo formulárových polí bolo použité fieldset. Ako sa vytvárajú formulárové polia a čo znamenajú prvky label, bolo už dostatočne opísané. Na tejto úrovni je preto dôležitá úplná koncentrácia na dizajn formulára.

Po zobrazení výsledku v prehliadači sa na prvý pohľad zobrazí formulár, ktorý nie je veľmi atraktívny.





Je potrebné to ešte vylepšiť.

Na začiatku sú uvedené základné údaje o formulári.

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

Tu sú definované vonkajšie a vnútorné okraje. Zároveň je šírka formulára nastavená na 550 pixelov.

Pokračujeme s dizajnom fieldset.

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

Opäť tu sú definované okraje.

Samotné formulárové polia sú zoradené v usporiadanej zozname ol.

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

Aby sa tento zoznam opticky nezobrazil ako zoznam, používa sa list-style-type: none;. Zároveň sa okraje a vnútorný okraj nastavia na hodnotu 0.

Ďalším krokom je definovanie prvkov zoznamu. Tieto sa zarovnajú doľava a majú vnútorný okraj 10 pixelov.

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

Máme tu ešte zvláštnosť týkajúcu sa tlačidla umiestneného pod formulárom. Toto tlačidlo má byť zarovnané vpravo.

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

Názov formulára

Teraz sa venujeme prvku legend. Tým je definovaný nadpis formulára.





Definícia pre nadpis vyzerá nasledovne:

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

Popisky

Prvok label vám už bol predstavený v rámci tejto série. Prostredníctvom tohto label sa môže vytvoriť logická väzba medzi popisom poľa a samotným formulárnym poľom. Vzhľadom na definíciu CSS tu existuje jedna výnimka.

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

Prvok label je vybavený medzi iným informáciou o kurzore pomocou cursor. Tým sa návštevníkom signalizuje, že popisky polí sú klikateľné. Po kliknutí na popis poľa sa kurzor automaticky presunie do príslušného polia.

Dizajnovanie formulárových polí

V ďalšom kroku sa bude dizajnovanie skutočných formulárových polí. Najprv sa urobia všeobecné údaje pre input a textarea.

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

Jedná sa výlučne o dizajnové veci. Osobitná pozornosť by sa mala venovať rámom. Keď sa kurzor umiestni do políčka, zmení sa farba rámčeka. Mimochodom, to nie je len estetický aspekt. V skutočnosti to aj pomáha návštevníkom pri vyplňovaní formulára. Vďaka tomu vedia vždy okamžite, v ktorom poli sa kurzor práve nachádza.

Teraz nasledujú niektoré informácie o viacrozmernom vstupnom poli.

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

Šírka tohto poľa je nastavená na 430 pixelov. Možno sa zdá trochu zvláštne na prvý pohľad inštrukcia overflow: auto v súvislosti s viacrozmernými vstupnými poliami. Tento riadok je však zapríčinený starším verziám Internet Exploreru. Skutočne tento prehliadač zobrazoval posuvníky aj vtedy, keď to v viacrozmerných vstupných poliach nebolo potrebné. Pomocou overflow: auto sa dá tento problém odstrániť.

Nastavenie tlačidla Odoslať

Aktuálne tlačidlo Odoslať vyzerá dosť nudne. To sa teraz zmení. Výsledok bude vyzerať nasledovne:





Rôznym vlastnostiam sa pridelenie tlačidla.

• Farba pozadia

• Vzhľad písma

• Rámček

• Medzery

CSS syntax patrícemu k tomu vyzera nasledovne:

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

Zaujímavé je tu možno ešte uviesť input[type="submit"]. Týmto selektorom sa pristupuje k prvkom input, ktoré majú kombináciu atribútu a hodnoty type="submit".