Tvoríme pohľadný formulár (HTML a CSS)

V tomto článku si vytvoríme jednoduchý formulár s jedným tlačidlom a jedným textovým poľom na email. Predstavte si, že robíte web pre záhradkárov, jediné čo po nich potrebujete je ich email, aby ste im mohli zaslať newsletter. Pôjdeme od úplného začiatku až po CSS3.

Html

Kde inde začať než u HTML? Keďže tvoríme formulár, nebudeme hľadať žiadne fígle, dáme tam jednoducho značku form, ten si odlíšime tak že mu dáme id gardenerNewsletter.

<form id="gardenerNewsletter">
</form>

Vnútri formulára budeme mať nadpis, tak ho tam dáme.

<h1>Get gardener newsletter</h1>

Ďalej budeme potrebovať odeslací tlačidlo, to deklarujeme ako input typu submit a ako hodnotu mu pridáme špeciálny znak



Tento znak nájdeme v mape znakov, ktorú otvoríme keď do štartu napíšete mapa znakov a vyberiete rovnomennú aplikáciu. Tento špeciálny znak (vo fonte Sego UI Symbol) si skopírujte a normálne vložte do zdrojového kódu, pretože vaše IDE znaky vypisuje v inom fontu, uvidíte znak asi ako otáznik alebo iný zástupný symbol.

<input type="submit" value="" />

Teraz potrebujeme to najdôležitejšie, textové políčko pre email. Bude to opäť input, tentoraz typu email s atribútom placeholder a required. Placeholder nám stanovuje, čo sa vypíše v políčku, kým do neho užívateľ niečo nenapíše a required stanovuje, že políčko musí byť vyplnené. Aj cez toto opatrenie to možno zmanipulovať, keby sme robili serverovú časť formulára, tak to aj tam musíme ošetriť. Required nemá žiadnu hodnotu.

<input type="email" placeholder="Your email" required/>

No a nakoniec užívateľmi dáme hlášku, že potvrdením dáva napospas svoje osobné údaje vo fiktívnych podmienkach (ktoré si môžete ľubovoľne sami dopísať). Ikonu tlačidla označíme v hláške do spanie a inline štýlom mu nastavíme "fontovou rodinu" na písmo Sego UI Symbol.

<p>When you press <span style="font-family:'Segoe UI Symbol'"></span> button, you accept <a href="#">these</a> arguments.</p>

Pre upresnenie tu dám celý formulár v HTML.

<form id="gardenerNewsletter">
    <h1>Get gardener newsletter</h1>
    <input type="submit" value="" />
    <input type="email" placeholder="Your email" required/>
    <p>When you press <span style="font-family:'Segoe UI Symbol'"></span> button, you accept <a href="#">these</a> arguments.</p>
</form>

Teraz máme formulár navrhnutý, asi ale chápete, že vyzerá ako zo stredoveku a možno aj tam by ho nakreslili lepšie. Poďme pridať CSS.

CSS

Formulár bude 600px široký a 450 vysoký. Farbu pozadia bude mať svetlo modrú (lightblue). Na pozadí bude obrázok, ktorý bude len dole a bude sa opakovať po vodorovnej osi. Obrázok si môžete stiahnuť nižšie.

Obrázok je vo formáte gif, pretože budeme používať jednoduché farby a na to je gif úplne ideálne. Umiestnenie obrázka (dole) sa nastaví vlastnosťou background-position s danými stranami, napr. Top left. Top left nám hovorí, že obrázok bude hore vľavo. Opakovanie obrázku nastavíme vlastnosťou background-repeat, ktoré môžeme povedať: repeat-x, repeat-y, no-repeat. Tieto vlastnosti nastavujú, po akej osi sa bude obrázok opakovať alebo či vôbec. Ak potrebujeme na pozadí viac obrázkov, môžeme ich oddeliť čiarkou a zapísať ich ako ďalší.

background-image: url(cesta1), url(cesta2);

Rovnako tak môžeme aj pre ďalšie obrázky nastaviť pozíciu a opakovanie, tak že je oddelíme čiarkou.

background-position: bottom left, left bottom;

Koniec koncov potrebujeme obrázky na pozadí 3. Ich vlastnosti sú v nasledujúcej tabuľke.

	Obrázok 1 (tráva)	Obrázok 2 (kvety)	Obrázok 3 (kvetina)
URL	trava.gif	kytky.gif	kytka.gif
Pozícia	bottom left	bottom left	bottom right
opakovanie	Po osi X	-	-

Ďalšie dva obrázky nájdete na stiahnutie nižšie:

Nakoniec formulári nastavíme relatívnu pozíciu a to z toho dôvodu, že potrebuje prvky absolútne umiestňovať od nášho formulára, keby sme toto explicitne nezapísali, prvky by sa pozicovali od začiatku stránky.

Aby formulár nejako vyzeral, zaoblíme mu rohy, vycentrujeme ho na stred a posunieme 50px od zhora.

Centrovanie a posun od zhora sa robí jedným príkazom.

margin:50px auto;

Prvá časť príkazu nám hovorí, že sa nastaví horná a dolná margin na 50px, druhá časť auto vycentruje formulár na stred.

Celý selektor bude vyzerať nasledovne:

form#gardenerNewsletter {
    width: 600px;
    height: 450px;
    background-color:lightblue;
    background-image: url(trava.gif), url(kytkyKratsi.gif), url(StredniKytka.gif);
    background-position: bottom left, left bottom, right bottom;
    background-repeat: repeat-x, no-repeat, no-repeat;
    position: relative;
    border-radius: 10px;
    margin:50px auto;
}

Odosielacie tlačidlo

Do našej veľkej kvety na pozadí dáme tlačidlo odoslať. Toto tlačidlo sa bude mierne pootáčať. Použijeme tlačidlo so špeciálnym znakom, ktoré sme navrhli v HTML. Keďže naša tlačidlo nemá žiadne ID (však ho ani nepotrebujeme, pretože Buttonova input máme len jeden) použijeme jeden z nových selektorov.

input[type=submit] {}

Input nám hovorí, že budeme stylovať input, selektorom v hranatých zátvorkách hovoríme, že budeme stylovať iba element, ktorý má nastavený parameter type na submit. Vďaka tomuto sa nám nebude stylovať políčko pre email.

Tlačidlo pre odosielanie bude 90px široké aj vysoké, aby bolo guľaté nastavíme border-radius na 100%. Farba pozadia tlačidla bude žltá. Písmu (znaku) bude 50px veľké a nastavíme font na Sego UI Symbol (tam sme vyhrabali náš znak). Rámček nebude žiadny, pozície absolútna. Od zhora bude posunutý o 130px az ľava o 390px. Vďaka toho že sme nastavili formulár na pozície relatívnej, teraz sa prvok posúva voči formulári nie telu stránky. Písmo tlačidla bude zelené.

Pokračovať budeme nabudúce.