Začneme tlačítkem Odeslat. Aktuální vzhled CSS by měl 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;
}Tato syntaxe vede k následujícímu výsledku:
Jedná se o zcela běžné tlačítko. Není momentálně zvlášť zajímavě stylizované, ale plní svůj účel. Nicméně má být trochu vylepšeno. Výsledek bude vypadat takto:
Dále zde je efekt hover. Tlačítko tedy změní svou barvu, když se nad ním pohne ukazatel myši.
Pokud si podrobně prohlédnete tlačítko, všimnete si, že má kulaté hrany. To je bezesporu jedna z novinek v CSS, na kterou si weboví designéři dlouho počkali. Protože "dříve" tato možnost neexistovala. (Výjimkou samozřejmě byly elementy button, kde bylo možné pracovat s obrázky.)
Nyní lze takto kulaté hrany aplikovat nejen na běžné stránkové elementy, ale také na tlačítka.
V pracovním návrhu CSS3 k tomu slouží vlastnost border-radius. Pro experimentální podporu této vlastnosti nabízejí prohlížeče Mozilla a WebKit alternativní zápis.
• -moz-border-radius
• -webkit-border-radius
Mezitím nicméně všechny moderní prohlížeče podporují kulaté hrany.
Na tomto základě by mohlo vypadat nastavení border-radius
-webkit-border-radius: 17px; -moz-border-radius: 17px; border-radius: 17px;
Také něco takového lze konečně realizovat pomocí CSS. K tomu se používají různé vlastnosti gradient. Ty se přiřadí jako hodnota vlastnosti background. Mezitím existuje několik nástrojů, s jejichž pomocí lze generovat barevné přechody.
http://www.css3factory.com/linear-gradients/. V následující syntaxi tedy byl definován barevný přechod a známé kulaté hrany.
V aktuálním příkladu je syntax pro tlačítko následující:
input[type="submit"] {
border-top: 1px solid #96d1f8;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
background: -moz-linear-gradient(top, #3e779d, #65a9d7);
background: -ms-linear-gradient(top, #3e779d, #65a9d7);
background: -o-linear-gradient(top, #3e779d, #65a9d7);
background: -linear-gradient(top, #3e779d, #65a9d7);
padding: 10px 20px;
-webkit-border-radius: 17px;
-moz-border-radius: 17px;
border-radius: 17px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 21px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
width: auto;
}
#submit:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}Tlačítko bude reagovat i na další událost. K tomu slouží pseudo-třída :active. Díky ní lze reagovat na stisk tlačítka.
#submit:active {
border-top-color: #1b435e;
background: #1b435e;
}Oblé hrany pro pole
Tzv. kulaté hrany lze samozřejmě použít nejen na tlačítka, ale také na vstupní pole. Výsledek by mohl vypadat takto:
A zde je příslušná syntaxe:
input[type="text"], input[type="email"], textarea {
border: 1px solid #bebebe;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
}
Potřebné vlastnosti pro definování takových kulatých hran již znáte.
Validace formuláře pomocí CSS3
Nyní se návštěvnící mohou v polích zadávat cokoliv. Není zde žádná kontrola zadaných hodnot. To se však má změnit. Pole budou kontrolována na základě následujících kritérií:
• Pole s Jménem musí být vyplněno.
• Pole s E-mailem musí obsahovat syntakticky správnou e-mailovou adresu.
• Víceřádkové pole musí být také vyplněno.
Teprve pokud jsou tato kritéria splněna, může být formulář skutečně odeslán.
Aby bylo pole označeno jako povinné, přidělí se mu atribut required. Pole označené tímto způsobem musí být vyplněno, nesmí být tedy prázdné.
Příslušná aplikace by tedy vypadala následovně:
<form> <input type="text" name="name" id="name" value="" required/> </form>
Zde by prohlížeč zkontroloval, zda bylo pole vyplněno. Pokud je pole prázdné a přesto se pokusíte odeslat formulář, měl by prohlížeč zobrazit chybovou zprávu.
O krok dál jdou e-mailová pole. Ty by se měly označit pomocí type="email" a atributu required. Nyní musí být do pole zadána nejen hodnota, ale skutečně platná e-mailová adresa, jinak se opět zobrazí chybová zpráva při odesílání formuláře.
Celkově by formulář mohl vypadat následovně:
<ol>
<li>
<label for="name">Jméno:</label>
<input type="text" name="name" id="name" value="" required/>
</li>
<li>
<label for="email">E-mailová adresa:</label>
<input type="email" name="email" id="email" value="" required/>
</li>
<li>
<label for="comment">Komentář:</label>
<textarea cols="32" rows="7" name="content" id="content" required></textarea>
</li>
<li class="button">
<input type="submit" name="submit" id="submit" value="Odeslat" />
</li>
</ol>
Zejména v rozsáhlejších formulářích může být nutné označit povinná pole, ale i taková pole, která nemusejí být vyplněna. V takových případech je možné označit povinná pole zvlášť. Přístup k povinným polím lze v CSS dosáhnout pomocí :required.
:required {
background-color: #ff0000;
}Tímto způsobem jsou povinná pole vybavena červeným pozadím.
Jinou možností, jak upozornit na povinná pole, je následující syntax:
input:required:focus {
border: 1px solid red;
outline: none;
}
Pokud se pokusíte odeslat formulář, první pole obdrží červený rámec a zaměření, pokud nebylo vyplněno nebo nevyhovuje validačním požadavkům.
Pokud uživatel správně vyplní toto pole, ale další pole není vyplněno, bude i toto pole po následujícím odeslání opět zaměřeno a vybaveno červeným rámcem.
