Kontaktný formulár - Dobrovoľné

Kontaktný formulár je dobrovoľnou časťou tutoriálu. Ak pracuješ na tutoriály doma, určite si túto sekciu prejdi. Ak počas workshopu, môžeš si sekciu prejsť, alebo nakopírovať do kódu v súbore index.html kód v záveri tejto lekcie.

Sekcia je tvorená.

Obrázkom na pozadí na celú šírku prehliadača
Formulárom, ktorý je zobrazený do bloku v contanieri.

Vytvorenie sekcie pre formulár

<section id="contact">
...
</section>

Nacentrovanie formuláru do bloku

Na úrovni nižšie vytvoríme div element s triedou .container, ktorý nám nacentruje do bloku konkrétny formulár.

<div class="container">
...
</div>

Vytvorenie row

Ako vždy je nutné, aby nasledovalo pridanie triedy .row.

<div class="row">
...
</div>

Vytvorenie nadpisu formuláru

Nadpis formuláru je nacentrovaný v strede na celú šírku 12-tich stĺpcov.

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
....
</div>

Samotný nadpis

<h2>Kontaktný formulár</h2>

V tomto kroku náš formulár vyzerá takto:

<section id="contact">
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
        <h2>Kontaktný formulár</h2>
      </div>
    </div>
  </div>
</section>

Sekcia pre samotný formulár

Keď sa bližšie pozrieme na dizajn, vidíme, že formulár je vnorený v sekcii s triedou .container a odsadený zľava aj sprava. Aby sme mohli s formulárom pracovať ako s celkom obalíme ho do samostatnej sekcie.

<div class="form-section row">
...
</div>

Priradenie formuláru do stĺpcov

V ďalšom kroku formulár priradíme do správneho rozloženia pomocou stĺpcov.

Tu vidíme novú triedu .col-md-offset-1 a .col-lg-offset-1. Offset slúži na odsadenie o určitý počet stĺpcov, čiže v našom príklade bude formulár začínať na stĺpci 2, lebo je o jeden stĺpec posunutý.

<div class="col-md-10 col-md-offset-1 col-lg-10 col-lg-offset-1">
...
</div>

Fomulár

Na vytvorenie formuláru slúži element <form></form>. Tu je potrebné nastaviť základné atribúty:

method - určuje spôsob odoslania dát. Metódy môžu byť POST alebo GET. Ak odosielame súkromné alebo chránené dáta je vždy potrebné dáta šifrovať a poslať pomocou POSTu. GET sa používa napríklad na vyhľadávanie nad produktami, kedy vidíme zadaný výraz vo vyhľadávači ako súčasť URL adresy webu.
action - určuje kam sa formulár po odoslaní presmeruje a ako sa dostane k zavolaniu funkcie na odoslanie formuláru (v tomto kroku nie je potrebné pre nás poznať bližšie podrobnosti)
name - určuje názov formuláru. Tento názov sa nezobrazuje na webe užívateľa, ale slúži pre naše potreby.

<form method="POST" action="" name="contact-form">
...
</form>

Vnorené stĺpce

V rámci formuláru vidíme, že je rozdelený na 2 sekcie. Naľavo sa nachádzajú údaje (meno, email, predmet) a napravo sa nachádza priestor pre našu správu. Aby sme mohli formulár rozdeliť, vytvoríme si vnorenú triedu pre riadky, do ktorých priradíme stĺpce v správnom pomere.

<div class="row">
....
</div>

Rozdelenie na stĺpce

Formulár si rozdelíme na 4 stĺpce naľavo a 8 stĺpcov napravo.

<div class="col-md-4 col-lg-4">
  Ľavý blok formuláru
</div>

<div class="col-md-8 col-lg-8">
  Pravý blok formuláru
</div>

Input fieldy

Údaje vo formulároch sa zadávajú do takzvaných input fieldov. Každý input field môže byť rôzneho typu podľa toho aké dáta v ňom chceme ukladať.

<input type = "text" /> - slúži na uchovávanie textových hodnôt
<input type = "email" /> - slúži na uchovávanie a validáciu emailovej adresy
<input type = "number" /> - slúži na uchovávanie číselných hodnôt
<input type = "submit" /> - definuje tlačítko na odoslanie a potvrdenie formuláru

Tip: Existuje oveľa viac druhov input fieldov. Zoznam všetkých je dostupný na adrese http://www.w3schools.com/tags/att_input_type.asp

Input field pre meno

Meno reprezentujeme ako text, preto použijeme input field textového typu. Ostatné atribúty:

name - reprezentuje názov input fieldu, s ktorým vieme ďalej pracovať v programovaní
required - určuje , či je pole povinné vyplniť
placeholder - určuje text, ktorý vidí v poli formuláru na webe používateľ

Aby sme vedeli opäť pracovať s poľom formulára ako s celkom obalíme si ho do spoločného elementu s názvom triedy .form-group.

<div class="form-group">
    <input type="text" placeholder="Celé meno" class="form-control" name="name" required="False">
 </div>

Input field pre emailovú adresu

<div class="form-group">
  <input type="email" placeholder="Email" class="form-control" name="email" required="True">
</div>

Input field pre predmet

<div class="form-group">
  <input type="text" placeholder="Predmet" class="form-control" name="subject" required="">
</div>

V tejto chvíli náš formulár vyzerá nasledovne.

<div class="col-md-4 col-lg-4">
  <div class="form-group">
    <input type="text" placeholder="Celé meno" class="form-control" name="name" required="">
  </div>
  <div class="form-group">
    <input type="email" placeholder="Email" class="form-control" name="email" required="">
  </div>
  <div class="form-group">
    <input type="text" placeholder="Predmet" class="form-control" name="subject" required="">
  </div>
</div>

Pravá časť formuláru

<div class="col-md-8 col-lg-8">
...
</div>

Input field pre správu

<div class="form-group">
  <textarea placeholder="Správa" rows="7" class="form-control" name="message" required="True">
  </textarea>
</div>

Povinné polia

Informáciu o povinných poliach umiestnime napravo pomocou text-right triedy.

<div class="col-md-8 col-lg-8 text-right">
  Polia označené hviezdičkou sú povinné.
</div>

Tlačítko na odoslanie formuláru

Tlačítko na odoslanie formuláru sa nachádza taktiež v ľavej časti a je rovnakej šírky ako input fieldy naľavo, preto mu definujeme šírku 4 stĺpce.

Text v tlačítku je nacentrovaný v strede, preto použijeme triedu .text-center.

<div class="col-md-4 col-ld-4 text-center contact-button">
...
</div>

Úloha

Skús zameniť triedu v elemente div z .text-center na .text-left. Čo sa stalo?
Ulož súbor index.html.
Pozri si výsledok vo webovom prehliadači.

Tlačítko

Tlačítka sa v HTML definujú pomocou elementu <button></button>. Bootstrap obsahuje viacero druhov buttonov podľa triedy, ktorú mu priradíme.

Tlačítko je taktiež input fieldom s typom submit.

<button class="btn-primary btn-contact" name="submit" type="submit">Odoslať</button>

Tip: Pozri sa aké typy buttonov poskytuje Boostrap a môžeš v kóde používať?

Nápoveďa: Stránka Bootstrapu obsahuje zoznam všetkých componentov, s ktorými môžeš pracovať. http://getbootstrap.com/components/

Celý formulár

Vo výsledku vyzerá náš formulár takto:

<section id="contact">
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
        <h2>Kontaktný formulár</h2>
      </div>
    </div>
    <div class="form-section row">
      <div class="form-wrapper col-md-10 col-md-offset-1 col-lg-10 col-lg-offset-1">
        <form method="POST" action="" name="contact-form" role="form">
          <div class="row">
            <div class="col-md-4 col-lg-4">
              <div class="form-group">
                  <input type="text" placeholder="Celé meno" id="name" class="form-control" name="name" required="">
              </div>
              <div class="form-group">
                  <input type="email" placeholder="Email" id="email" class="form-control" name="email" required="">
              </div>
              <div class="form-group">
                  <input type="text" placeholder="Predmet" id="subject" class="form-control" name="subject" required="">
              </div>
            </div>
            <div class="col-md-8 col-lg-8">
              <div class="form-group">
                <textarea placeholder="Správa" rows="6" id="message" class="form-control" name="message" required=""></textarea>
              </div>
          </div>
          <div class="col-md-4 col-lg-4 text-center contact-button">
            <button class="btn-primary btn-contact btn-block" name="submit" type="submit">Odoslať</button>
          </div>
          <div class="col-md-8 col-lg-8 text-right">
            Polia označené hviezdičkou sú povinné.
          </div>
        </div>
      </form>
    </div>
  </div>
  </div>
</section>