Předpokládám, že vytvoříte další HTML soubor. Každopádně uložím tento soubor pod názvem kontakt.html. Kontakt.html se nachází na stejné úrovni jako index.html, kterou už znáte.
V této první části se provádí základní nastavení formuláře. Věci jako kulaté rohy, barevné přechody atd. budou popsány v následujícím tutoriálu.
V rámci souboru kontakt.html se vytváří formulář. Formulář je definován uvnitř oblasti div s třídou content. Poté uvažte, která pole máte vytvořit. Rozhodl jsem se získat následující informace:
• Jméno
• Emailová adresa
• Komentář
Samozřejmě si musíte sami rozhodnout, které informace chcete získat. Obvykle doporučuji získávat pouze skutečně potřebné údaje. Většina návštěvníků webových stránek se totiž vyhýbá rozsáhlým formulářům. Držte to tedy stručné.
Základní struktura mého formuláře vypadá následovně:
<div class="content">
<form class="form" action="#" method="post">
<fieldset>
<legend>Kontaktujte nás</legend>
<ol>
<li>
<label for="name">Jméno:</label>
<input type="text" name="name" id="name" value="" />
</li>
<li>
<label for="email">Emailová adresa:</label>
<input type="text" name="email" id="email" value="" />
</li>
<li>
<label for="comment">Komentář:</label>
<textarea cols="32" rows="7" name="content" id="content"></textarea>
</li>
<li class="button">
<input type="submit" name="submit" id="submit" value="Odeslat" />
</li>
</ol>
</fieldset>
</form>
</div>Formulář neobsahuje žádné zvláštnosti. Okolo formulářových polí bylo použito fieldset. Jak vytvářet formulářová pole a jak fungují prvky label, bylo již podrobně popsáno. Zde by se tedy měla soustředit plně na design formuláře.
Pokud se podíváte na výsledek v prohlížeči, uvidíte zatím pouze málo přitažlivý formulář.
Zde je samozřejmě prostor pro vylepšení.
Nejprve jsou učiněny základní údaje týkající se formuláře.
form {
padding: 3px 0 0;
margin: 10px auto;
width: 550px;
}
Zde jsou definovány vnější a vnitřní okraje. Pro formulář je navíc nastavena šířka 550 pixelů.
Pokračujeme se zdobením fieldset.
fieldset {
padding: 10px 20px 25px;
}
Ani zde neopomíjíme definovat mezery.
Samotné formulářové pole jsou vytvořeny v uspořádaném seznamu ol.
ol {
list-style-type: none;
margin: 0;
padding: 0;
}
Aby bylo toto seřazení vizuálně neidentifikovatelné jako seznam, je použito list-style-type: none;. Kromě toho jsou nastaveny okraje a vnitřní mezery na hodnotu 0.
V dalším kroku jsou definovány položky seznamu. Ty jsou zarovnány doleva a mají vnitřní odsazení 10 pixelů.
li {
float: left;
padding: 10px;
}
Zajímavostí je tlačítko umístěné pod formulářem. Má být zarovnáno doprava.
li.button {
float: none;
clear: both;
text-align: right;
}Titulek formuláře
Nyní se podíváme na prvek legend, který definuje titulek formuláře.
Definice titulku je následující:
fieldset legend {
font-weight: bold;
font-size: 22px;
margin: 20px 0 0 10px;
}Popisky
Prvek label jste již během této série setkali. Přes label lze vytvořit logický vztah mezi popiskem pole a samotným políčkem ve formuláři. Co se týče definice CSS, zde je jedna zajímavost.
label {
display: block;
cursor: pointer;
font-weight: bold;
line-height: 24px;
}cursor). Tím se návštěvníkům signalizuje, že popisky polí jsou klikatelné. Skutečně pokud na popisek pole kliknou, kurzor se automaticky zobrazí ve příslušném políčku.
Stylování formulářových polí
V dalším kroku se zabýváme samotným stylováním formulářových polí. Nejdříve jsou učiněny obecné údaje pro input a textarea.
input, textarea {
color: #3399FF;
border: 1px solid #3399FF;
font: 13px Helvetica, Arial, sans-serif;
padding: 8px 10px;
width: 190px;
}
Jedná se výhradně o věci týkající se designu. Osobitně je třeba věnovat pozornost rámečkům. Jakmile se kurzor umístí do pole, změní se barva rámečku. To je mimochodem nejen estetický aspekt. Skutečně to pomáhá návštěvníkům při vyplňování formuláře. Tak vždy ihned vidí, v kterém poli se kurzor právě nachází.
Následují některé informace o víceřádkovém textovém poli.
textarea {
width: 430px;
overflow: auto;
}
Šířka tohoto pole je nastavena na 430 pixelů. Možná na první pohled trochu zvláštní může působit pokyn overflow: auto v souvislosti s víceřádkovými vstupními poli. Tento řádek je dán starším verzím Internet Exploreru. Skutečně měl tento prohlížeč občas zobrazovat posuvníky i v případě, kdy to nebylo nutné. Pomocí overflow: auto lze tento problém s designem obejít.
Navrhnout tlačítko Odeslat
Možná se tlačítko Odeslat momentálně jeví poněkud stroze. To se teď změní. Výsledek bude vypadat následovně:
Tlačítku budou přiřazeny různé vlastnosti.
• Barva pozadí
• Vzhled písma
• Rámeček
• Odstupy
Patřičná CSS syntaxe bude vypadat následovně:
input[type="submit"] {
background-color: #3399FF;
color: #fff;
cursor: pointer;
font: bold 1em/1.2 Georgia, "Times New Roman ", serif;
border: 1px solid #000;
padding: 5px 10px;
width: auto;
}
Zajímavé zde může být uvedení input[type="submit"]. Tímto selektorem se přistupuje k prvkům input, které mají kombinaci atribut-hodnota type="submit".
