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

Máte nejakú otázku alebo Vám niečo nie je jasné? Napíšte nám na info@zacni-programovat.sk a poradíme!

Obsah súborov projektu po tejto prednáške

1 - footer.php

<div class="footer">
</div>

2 - fotogaleria.php

<!DOCTYPE html>

<html lang="sk">
<head>
<title>Vitajte na našej prvej skutočnej webstránke!</title>

<meta charset=“UTF-8“>
<meta name="description" content="Ponúkame vám lekcie jazykov HTML, CSS, PHP a mnoho ďalších užitočných rád pri programovaní">
<meta name="keywords" content="programovanie, html, css, php, webstranka, web, tvorba webu, web developer, ucenie programovania, ako programovat">

<link rel="stylesheet" type="text/css" href="global.css">
</head>

<body>
<?php $actual_page = "fotogaleria";?>
<div class="main">

<?php include "header.php";?>

<div class="content">

<?php include "menu.php";?>

<div class="main-content right">
<h1>Fotogaléria</h1>
<div class="line"></div>

<?php

$pictures = array();

for($i = 0; $i < 7; $i++){
$pictures[] = 'images/placeholder.jpg';
}

echo '<ul id="gallery">';
for($i = 0; $i < 7; $i++){
echo '<li>';

echo '<a class="left';
if(($i+1)%3){
echo ' photo-margin';
}
echo '" target="_blank" href="'.$pictures[$i].'">';

echo '<img src="'.$pictures[$i].'">';
echo '</a>';
echo '</li>';
}
echo '</ul>';

?>
</div>

<div class="clear"></div>
</div>

<?php include "footer.php";?>
</div>
</body>
</html>

3 - global.css

BODY{
margin: 0;
background-color: #dee8e7;
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;
}

.main{
background-color: #f6f7f1;
width: 900px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
}

.header{
border-bottom: 1px solid #7d8079;
height: 150px;
}

.header-inner1{
}

.header-inner2{
}

.content{
}

.footer{
border-top: 1px solid #7d8079;
height: 200px;
}

.half-width{
width: 50%;
}

.full-height{
height: 100%;
}

.left{
float: left;
}

.right{
float: right;
}

.clear{
clear: both;
}

/**********MENU***********/
.sidebar{
width: 200px;
height: 400px;
}

.sidebar UL{
list-style-type: none;
padding: 0;
margin: 0;
}

.sidebar UL LI{
}

.sidebar UL LI A{
display: block;
padding: 15px 0px 15px 35px;
border-bottom: 1px solid #7d8079;
color: #7d8079;
font-family: Arial;
text-decoration: none;
text-transform: uppercase;
}

.sidebar UL LI A.active{
color: #f5f7f4;
background-color: #f96b81;
}

.sidebar UL LI:HOVER A{
background-color: #5b6b78;
color: #d6e3e9;
}

.main-content{
width: calc(100% - 241px);
min-height: 700px;
border-left: 1px solid #7d8079;
padding-left: 20px;
padding-right: 20px;
}

/**********GALERIA***********/
#gallery{
list-style-type: none;
margin: 0;
padding: 0;
}

#gallery A{
display: block;
height: 133px;
margin-bottom: 10px;
}

#gallery IMG, #gallery A{
width: 213px;
}

.photo-margin{
margin-right: 10px;
}

/**********PERSONS***********/
.persons{
width: 100%;
table-layout: fixed;
font-family: Arial;
}

.persons, .persons TH, .persons TD{
border: 1px solid #D9E4E6;
}

.persons TH, .persons TD{
padding: 15px;
}

.persons TH{
background-color: #167F92;
color: #FFFFFF;
font-weight: normal;
text-transform: uppercase;
}

.persons TR:nth-child(odd){
background-color: #D9E4E6;
}

.persons TR{
color: #024457;
background-color: #FFFFFF;
}

.persons TD{
font-size: 14px;
}

.persons TR:HOVER{
color: #f5f7f4;
background-color: #f96b81;
cursor: pointer;
}

/**********PERSONS***********/
.contact_form{
padding: 20px;
border: 1px solid #ebebeb;
background-color: white;
font-family: Arial;
font-size: 14px;
color: #455560;
text-transform: uppercase;
text-align: center;
}

.contact_form INPUT, .contact_form TEXTAREA, .contact_form LABEL{
display: block;
width: 100%;
}

.contact_form LABEL{
margin-bottom: 5px;
text-align: left;
}

.contact_form INPUT, .contact_form TEXTAREA{
height: 30px;
border: 1px solid #bababa;
margin-bottom: 30px;
}

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

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

4 - header.php

<div class="header">
<div class="header-inner1 full-height half-width left"></div>
<div class="header-inner2 full-height half-width left"></div>
</div>

5 - index.php

<!DOCTYPE html>

<html lang="sk">
<head>
<title>Vitajte na našej prvej skutočnej webstránke!</title>

<meta charset=“UTF-8“>
<meta name="description" content="Ponúkame vám lekcie jazykov HTML, CSS, PHP a mnoho ďalších užitočných rád pri programovaní">
<meta name="keywords" content="programovanie, html, css, php, webstranka, web, tvorba webu, web developer, ucenie programovania, ako programovat">

<link rel="stylesheet" type="text/css" href="global.css">
</head>

<body>
<?php $actual_page = "index";?>
<div class="main">

<?php include "header.php";?>

<div class="content">

<?php include "menu.php";?>

<div class="main-content right">
<h1>Domov</h1>
<div class="line"></div>
</div>

<div class="clear"></div>
</div>

<?php include "footer.php";?>
</div>
</body>
</html>

6 - kontakt.php

<!DOCTYPE html>

<html lang="sk">
<head>
<title>Vitajte na našej prvej skutočnej webstránke!</title>

<meta charset=“UTF-8“>
<meta name="description" content="Ponúkame vám lekcie jazykov HTML, CSS, PHP a mnoho ďalších užitočných rád pri programovaní">
<meta name="keywords" content="programovanie, html, css, php, webstranka, web, tvorba webu, web developer, ucenie programovania, ako programovat">

<link rel="stylesheet" type="text/css" href="global.css">
</head>

<body>
<?php $actual_page = "kontakt";?>
<div class="main">

<?php include "header.php";?>

<div class="content">

<?php include "menu.php";?>

<div class="main-content right">
<h1>Kontakt</h1>
<div class="line"></div>

<?php
if($_SERVER['REQUEST_METHOD'] == 'POST' && $_POST['contact_form']){
if(!preg_match('#^[a-zA-Z0-9]{5,10}$#', $_POST['name']) || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)){
echo '<p class="error">Zadajte prosim korektne udaje</p>';

//naplnenie formulara
$name = $_POST['name'];
$email = $_POST['email'];
$subject = $_POST['subject'];
$message = $_POST['message'];
}else{
//odoslanie emailu
echo '<p class="success">Vasa sprava bola uspesne odoslana.</p>';

$name = '';
$email = '';
$subject = '';
$message = '';
}

}

?>

<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post" class="contact_form">
<label for="email">Meno a priezvisko</label>
<input type="text" name="name" id="name" value="<?php echo $name;?>"><br><br>

<label for="email">Email</label>
<input type="text" name="email" id="email" value="<?php echo $email;?>"><br><br>

<label for="subject">Predmet</label>
<input type="text" name="subject" id="subject" value="<?php echo $subject;?>"><br><br>

<label for="message">Správa</label>
<textarea name="message" id="message" placeholder="Zadajte text spravy..."><?php echo $message;?></textarea><br><br>

<input type="submit" name="contact_form" value="Odoslat">
</form>
</div>

<div class="clear"></div>
</div>

<?php include "footer.php";?>
</div>
</body>
</html>

7 - menu.php

<div class="sidebar left">
<ul>
<li><a class="<?php if($actual_page == "index"){echo 'active';}?>" href="index.php">Domov</a></li>
<li><a class="<?php if($actual_page == "o-nas"){echo 'active';}?>" href="o-nas.php">O nás</a></li>
<li><a class="<?php if($actual_page == "fotogaleria"){echo 'active';}?>" href="fotogaleria.php">Fotogaléria</a></li>
<li><a class="<?php if($actual_page == "kontakt"){echo 'active';}?>" href="kontakt.php">Kontakt</a></li>
</ul>
</div>

8 - o-nas.php

<!DOCTYPE html>

<html lang="sk">
<head>
<title>Vitajte na našej prvej skutočnej webstránke!</title>

<meta charset=“UTF-8“>
<meta name="description" content="Ponúkame vám lekcie jazykov HTML, CSS, PHP a mnoho ďalších užitočných rád pri programovaní">
<meta name="keywords" content="programovanie, html, css, php, webstranka, web, tvorba webu, web developer, ucenie programovania, ako programovat">

<link rel="stylesheet" type="text/css" href="global.css">
</head>

<body>
<?php $actual_page = "o-nas";?>
<div class="main">

<?php include "header.php";?>

<div class="content">

<?php include "menu.php";?>

<div class="main-content right">
<h1>O nás</h1>
<div class="line"></div>

<?php
$person_1 = array('Raťafák', 'Plachta', 'plachtos@mail.sk','0903 123 123');
$person_2 = array('Od kuka', 'do kuka', 'kuko@mail.sk','0903 123 123');
$person_3 = array('Joey', 'Tribbiani', 'ako.sa.mas@mail.sk','0903 123 123');
$person_4 = array('Charlie', 'Harper', 'hooker@mail.sk','0903 123 123');
$person_5 = array('Chruno', 'Moysey', 'abstinent@mail.sk','0903 123 123');

$pole = array($person_1, $person_2, $person_3, $person_4, $person_5);

$pole[5] = array('Jardo', 'Jágr', 'legenda@mail.sk','0903 123 123');

echo '<table class="persons">';
echo '<tr>';
echo '<th>Meno</th>';
echo '<th>Priezvisko</th>';
echo '<th>Email</th>';
echo '<th>Telefónne číslo</th>';
echo '</tr>';

for($i=0; $i<count($pole); $i++){
echo '<tr>';

for($j=0; $j<count($pole[$i]); $j++){
echo '<td>'.$pole[$i][$j].'</td>';
}

echo '</tr>';
}

echo '</table>';

?>
</div>

<div class="clear"></div>
</div>

<?php include "footer.php";?>
</div>
</body>
</html>

Ťažko sa vám učí samému?

Máte problémy s niektorými časťami alebo sa neviete učiť sám? Využite našu možnosť individuálnej asistencie:

  • samostatný prístup
  • vysvetlenie nejasností prebraného učiva
  • úlohy a cvičenia navyše
  • všetko z pohodlia domova cez mail a skype

Pre viac info kliknite tu

Kľúčové slová prednášky

form dizajndizajn formularaformular cssstyl formularadizajn input

IT ftip

"Haló, hot line? Nám to stále píše, aby sme vložili disketu, čo máme robiť?" "A vložili ste disketu?" "Nie, to nás nenapadlo."