Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Tvoříme pohledný formulář (HTML a CSS)

V tomto článku si vytvoříme jednoduchý formulář s jedním tlačítkem a jedním textovým polem na email. Představte si, že děláte web pro zahrádkáře, jediné co po nich potřebujete je jejich email, abyste jim mohli zaslat newsletter. Půjdeme od úplného začátku až po CSS3.

HTML

Kde jinde začít než u HTML? Jelikož tvoříme formulář, nebudeme hledat žádné fígle, dáme tam prostě značku form, ten si odlišíme tak že mu dáme id gardenerNewsletter.

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

Uvnitř formuláře budeme mít nadpis, tak ho tam dáme.

<h1>Get gardener newsletter</h1>

Dále budeme potřebovat odeslací tlačítko, to deklarujeme jako input typu submit a jako hodnotu mu přidáme speciální znak

Tento znak najdeme v mapě znaků, kterou otevřeme když do startu napíšete mapa znaků a vyberete stejnojmennou aplikaci. Tento speciální znak (ve fontu Segoe UI Symbol) si zkopírujte a normálně vložte do zdrojového kódu, jelikož vaše IDE znaky vypisuje v jiném fontu, uvidíte znak asi jako otazník nebo jiný zástupný symbol.

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

Nyní potřebujeme to nejdůležitější, textové políčko pro email. Bude to opět input, tentokrát typu email s atributem placeholder a required. Placeholder nám stanovuje, co se vypíše v políčku, dokud do něj uživatel něco nenapíše a required stanovuje, že políčko musí být vyplněno. I přes toto opatření to lze zmanipulovat, kdybychom dělali serverovou část formuláře, tak to i tam musíme ošetřit. Required nemá žádnou hodnotu.

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

No a nakonec uživateli dáme hlášku, že potvrzením dává na pospas své osobní údaje ve fiktivních podmínkách (které si můžete libovolně sami dopsat). Ikonu tlačítka označíme v hlášce do spanu a inline stylem mu nastavíme „fontovou rodinu“ na písmo Segoe UI Symbol.

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

Pro upřesnění zde dám celý formulář 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>
Nestylovaný formulář - CSS3 zdrojákoviště

Nyní máme formulář navržen, asi ale chápete, že vypadá jak ze středověku a možná i tam by ho nakreslili lépe. Pojďme přidat CSS.

CSS

Formulář bude 600px široký a 450 vysoký. Barvu pozadí bude mít světle modrou (lightblue). Na pozadí bude obrázek, který bude pouze dole a bude se opakovat po vodorovné ose. Obrázek si můžete stáhnout níže.

Pozadí trávy pro web - CSS3 zdrojákoviště

Obrázek je ve formátu gif, protože budeme používat jednoduché barvy a na to je gif úplně ideální. Umístění obrázku (dole) se nastaví vlastností background-position s danými stranami, např. top left. Top left nám říká, že obrázek bude nahoře vlevo. Opakování obrázku nastavíme vlastností background-repeat, které můžeme říct: repeat-x, repeat-y, no-repeat. Tyto vlastnosti nastavují, po jaké ose se bude obrázek opakovat nebo jestli vůbec. Pokud potřebujeme na pozadí více obrázků, můžeme je oddělit čárkou a zapsat je jako další.

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

Stejně tak můžeme i pro další obrázky nastavit pozici a opakování, tak že je oddělíme čárkou.

background-position: bottom left, left bottom;

Koneckonců potřebujeme obrázky na pozadí 3. Jejich vlastnosti jsou v následující tabulce.

  Obrázek 1 (tráva) Obrázek 2 (květiny) Obrázek 3 (květina)
URL trava.gif kytky.gif kytka.gif
Pozice bottom left bottom left bottom right
Opakování Po ose X - -

Další dva obrázky naleznete ke stažení níže:

Pozadí květin pro web - CSS3 zdrojákoviště
Pozadí květin pro web - CSS3 zdrojákoviště

Nakonec formuláři nastavíme relativní pozici a to z toho důvodu, že potřebuje prvky absolutně umísťovat od našeho formuláře, kdybychom toto explicitně nezapsali, prvky by se pozicovali od začátku stránky.

Aby formulář nějak vypadal, zaoblíme mu rohy, vycentrujeme ho na střed a posuneme 50px od shora.

Centrování a posun od shora se dělá jedním příkazem.

margin:50px auto;

První část příkazu nám říká, že se nastaví horní a dolní margin na 50px, druhá část auto vycentruje formulář na střed.

Styly formuláře - CSS3 zdrojákoviště

Celý selektor bude vypadat následovně:

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

Odesílací tlačítko

Do naší velké květiny na pozadí dáme tlačítko odeslat. Toto tlačítko se bude mírně pootáčet. Použijeme tlačítko se speciálním znakem, které jsme navrhli v HTML. Jelikož naše tlačítko nemá žádné ID (však ho ani nepotřebujeme, protože buttonový input máme jen jeden) použijeme jeden z nových selektorů.

input[type=submit] {}

Input nám říká, že budeme stylovat input, selektorem v hranatých závorkách říkáme, že budeme stylovat pouze element, který má nastavený parametr type na submit. Díky tomuto se nám nebude stylovat políčko pro email.

Tlačítko pro odesílaní bude 90px široké i vysoké, aby bylo kulaté nastavíme border-radius na 100%. Barva pozadí tlačítka bude žlutá. Písmu (znaku) bude 50px veliké a nastavíme font na Segoe UI Symbol (tam jsme vyhrabali náš znak). Rámeček nebude žádný, pozice absolutní. Od shora bude posunut o 130px a z leva o 390px. Díky toho že jsme nastavili formulář na pozice relativní, teď se prvek posouvá vůči formuláři nikoli tělu stránky. Písmo tlačítka bude zelené.

Tlačítko - CSS3 zdrojákoviště

Pokračovat budeme příště.


 

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 355x (64.25 kB)
Aplikace je včetně zdrojových kódů v jazyce CSS

 

Všechny články v sekci
CSS3 zdrojákoviště
Článek pro vás napsal Michal Žůrek - misaz
Avatar
Uživatelské hodnocení:
7 hlasů
Autor se věnuje tvorbě aplikací pro počítače, mobilní telefony, mikroprocesory a tvorbě webových stránek a webových aplikací. Nejraději programuje ve Visual Basicu a TypeScript. Ovládá HTML, CSS, JavaScript, TypeScript, C# a Visual Basic.
Aktivity