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

HTML a CSS Profesionální webdesign 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ář

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

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
Pozadí květin pro web

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

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

Pokračovat budeme příště.


 

Stáhnout

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

 

  Aktivity (1)

Článek pro vás napsal Michal Žůrek (misaz)
Avatar
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.

Jak se ti líbí článek?
Celkem (6 hlasů) :
4.333334.333334.333334.33333 4.33333


 



 

 

Komentáře
Zobrazit starší komentáře (5)

Avatar
vojtanosek
Člen
Avatar
vojtanosek:

Aha. Omlouvám se, nevšiml jsem si.

 
Odpovědět 18.5.2015 21:30
Avatar
Vojtíšek ITrm:

Prolezl jsem Segoe UI Symbol celej 3x a ten znak obálky se šipkou jsem tam nenašel ...

 
Odpovědět 5.10.2015 18:29
Avatar
Odpovídá na Vojtíšek ITrm
Michal Žůrek (misaz):

tak si prolézal špatně. je tam očíslovaný jako znak U+E120.

Odpovědět 5.10.2015 19:52
Nesnáším {}, proto se jim vyhýbám.
Avatar
kivdul
Člen
Avatar
kivdul:

ahoj lidi,

nemohu přijít na to, jak připojit symbol (černého telefonu) do css, aby se vykreslil :-(

díky za radu

v html kodu mi to funguje
<DIV ID="phone"> &#9742; </div>

v css nikoliv
h1:after {
    content:"&#9742;";
    font-family: "Segoe UI Symbol";
}
 
Odpovědět  ±0 8.11.2015 9:02
Avatar
Odpovídá na kivdul
Michal Žůrek (misaz):

v after nefungují entity (ostatně jako hodně věcí, protože on se nerenderuje normální cestou), ale můžeš ho tam natvrdo zkopírovat.

http://jsfiddle.net/gg000vty/

Odpovědět 8.11.2015 11:20
Nesnáším {}, proto se jim vyhýbám.
Avatar
kivdul
Člen
Avatar
Odpovídá na Michal Žůrek (misaz)
kivdul:

děkuji

jsme na půli cesty, natvrdo jsem ho tam tedy zkopíroval, ale výsledek v prohlížeči je jen a pouze otazník "?"

ach jo :-(

 
Odpovědět 8.11.2015 11:44
Avatar
Odpovídá na kivdul
Michal Žůrek (misaz):

máš kódování UTF-8? Jinak to nebude fungovat.

Odpovědět  +1 8.11.2015 12:06
Nesnáším {}, proto se jim vyhýbám.
Avatar
kivdul
Člen
Avatar
Odpovídá na Michal Žůrek (misaz)
kivdul:

ano, mám. jak v html tak i v prohlížeči a nic

<meta charset="UTF-8" />
 
Odpovědět 8.11.2015 13:53
Avatar
Odpovídá na kivdul
Michal Žůrek (misaz):

tak to vlož nejprve do toho HTML tagu H1, pak to otevři, zkopíruj správně zobrazený znak a zkopíruj ho do CSSka. Nezapomeň, že i to CSS musí být UTF-8.

Odpovědět 8.11.2015 13:59
Nesnáším {}, proto se jim vyhýbám.
Avatar
kivdul
Člen
Avatar
Odpovídá na Michal Žůrek (misaz)
kivdul:

díky mám to

neměl jsem nastaven PHPstorm na UTF-8, ale na windows-1250

:-(
 
Odpovědět  +1 22.11.2015 8:39
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 15. Zobrazit vše