Štýlovanie formulára
Na záver tohto semestra si dokončíme tretiu časť našej stránky s kontaktným formulárom. Začneme tým, že si odpudzujúci názov page3.php odvšadiaľ odstránime a nahradíme ho názvom kontakt. Premenujte všetko čo treba a už by to aj v menu malo vyzerať krajšie s reálne pomenovanými podstránkami. Poďme sa teda pustiť do štýlovania formulára.
Začneme pekne od začiatku a tak by sme mali náš formulár nejako zvýrazniť od zvyšku webstránky. Nastavíme mu triedu s názvom contact_form a následne odstránime tagy br z formulára, pomocou tejto triedy ideme pridávať štýly pre jednotlivé elementy. Zabezpečíme to tým, že celému formuláru nastavíme bielu farbu pozadia a nejaké jemne výrazné orámovanie. Štruktúra nášho formulára bude nasledovná - každý label a každý input bude zaberať celý riadok na šírku (blok a width 100%). Aby nebolo všetko na seba nalepené, nastavíme menší spodný okraj labelom, väčší inputom a celému formuláru padding, aby elementi neboli spojené s okrajom formulára. Už to pomaly začína nejako vyzerať:)
Pre lepší efekt si nastavíme font písma pre celý formulár na Arial, dáme transofrmáciu na veľké písmená, zväčšíme veľkosť písma a nastavíme farbu. Text v labeloch by mal byť v poriadku, inputy sú však teraz nevýrazné popri texte v labeloch. Nastavíme im väčšiu výšku, farbu orámovania a pre textareu dáme oveľa väčšiu výšku. Náš kód by mohol vyzerať nejako taxto:
global.css (len pridaný kód):
/**********PERSONS***********/
.contact_form{
padding: 20px;
border: 1px solid #ebebeb;
background-color: white;
font-family: Arial;
font-size: 14px;
color: #455560;
text-transform: uppercase;
}
.contact_form INPUT, .contact_form TEXTAREA, .contact_form LABEL{
display: block;
width: 100%;
}
.contact_form LABEL{
margin-bottom: 5px;
}
.contact_form INPUT, .contact_form TEXTAREA{
height: 30px;
border: 1px solid #bababa;
margin-bottom: 30px;
}
.contact_form TEXTAREA{
height: 100px;
}
Ako je vidieť, dizajn formulára už má nejakú kostru a prvky majú spoločnú črtu, tlačítko pre odoslanie zatiaľ nevyzerá veľmi výrazne. Doteraz si aplikovalo štýl, ktorý sme definovali pre prvok INPUT, pretože aj tlačítko typu submit je samo o sebe input. Jeho štýl však môžeme definovať (a tým pádom prepísať z INPUTu) pomocou špeciálneho selectora, kde môžeme zadať typ inputu. Za názvom prvku (input) sa zadáva do hranatých zátvoriek názov atribútu, ktorým chceme bližšie špecifikovať náš prvok (type) a za rovná sa do úvodzoviek zadáme hodnotu atribútu (submit). Zápis konkrétne pre toto tlačítko by vyzeralo .contact_form INPUT[type="submit"]. Pomocou tohto selectora môžeme teraz definovať štýl iba pre naše tlačítko pre odoslanie.
Toto tlačítko nebude zaberať celú polochu na šírku, nastavíme mu nejakú konkrétnu šírku, farbu orámovania, pozadia a textu. Aby bolo výraznejšie, zväčšíme jeho výšky a veľkosť textu. Pre stav hover nastavíme troška tmavšiu farbu a cursor na pointer, aby bolo jasné, že sa dá naň kliknúť a že sa formulár následne odošle. Keďže sme mu zmenšili šírku a je to inline element, bude zarovnaný naľavo. My ho však chceme umiestniť do stredu, preto zadáme formuláru zarovnanie textu/inline elementov na stred. To nám ale zapríčiní, že text v labeloch bude tiež zarovnaný na stred, pretože bude toto pravidlo dediť. Zadefinovaním pravidla so zarovnaním textu naľavo pre label bude tento problém vyriešený.
Okrem toho si všimnite ešte jednu vec, ktorá sa mne osobne na stránkach nepáči a to je to, že ako viete, textarea vieme pomocou ikonky v pravom dolnom rohu zmenšovať/zväčšovať. Ak teraz na ikonku kliknete a začnete meniť rozmery, môže vám ísť textarea aj mimo plochy pre webstránku a takisto sa môže zmenšiť na minimálny rozmer. Aby to dizajn stránky nerozhádzalo, môžeme toto menenie rozmeru trocha obmedziť hodnotami min-width/min-height a max-width. Výsledný formulár by mohol vyzerať takto:
global.css (len pridané časti):
.contact_form{
text-align: center;
}
.contact_form LABEL{
text-align: left;
}
.contact_form TEXTAREA{
min-height: 100px;
min-width: 100%;
max-width: 100%;
}
.contact_form INPUT[type="submit"]{
display: inline;
width: 200px;
height: 40px;
background-color: #7bc143;
border: 1px solid #6fae3c;
font-size: 16px;
color: #FFFFFF;
text-transform: uppercase;
}
.contact_form INPUT[type="submit"]:HOVER{
cursor: pointer;
background-color: #42aa44;
}
Formulár už nejako vyzerá, teraz by sme mali ešte upraviť hlášku po odoslaní formulára. Vytvoríme si pre ňu dve triedy, kde jedna bude použitá v prípade chybovej hlášky (error) a druhá pre úspešnú hlášku (success). Dizajn hlášky po korektnom odoslaní bude samozrejme zelenou farbou a v prípade nesprávnej červenou. Mohlo by to vyzerať takto:
global.css (len pridané časti):
.success, .error{
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 10px;
}
.success {
color: #4F8A10;
background-color: #DFF2BF;
}
.error {
color: #D8000C;
background-color: #FFBABA;
}
Kontaktný formulár aj spolu s hláškou vyzerá už celkom obstojne. Trošku to tam špatí ešte ten nevýrazný nadpis jednotlivých stránok. Skúsime zadefinovať nejaký globálny štýl pre všetky nadpisy prvej úrovne na našej stránke a okrem toho si za nadpisom (pod) zadáme div, ktorý nám bude slúžiť akokeby na podčiarknutie nadpisu. Pridajte si pod nadpis v každej stránke (index, o-nas, fotogaleria a kontakt) element div s triedou line (<div class="line"></div>). Ako je vidieť, font nadpisu je iný ako napríklad text v menu alebo vo formulári. Odoberme preto pravidlo pre font napríklad z formulára a zadajme ho rovno pre body element, takže bude použité na celej stránke:
global.css (len pridané časti):
BODY{
font-family: Arial;
}
H1{
color: #5b6b78;
margin-bottom: 10px;
}
.line{
height: 3px;
border-top: 1px dotted #5b6b78;
border-bottom: 1px dotted #5b6b78;
margin-bottom: 25px;
}