Vlastní styl formuláře

V tomto článku věnovaném komponentě RSForm! Pro vám předvedu, jak stylovat vzhled formuláře. Je to velmi jednoduché, stačí z prvků (textová pole, textové oblasti, rozbalovací seznamy, atd.) sestavit formulář a pak přizpůsobit jeho vzhled zadáním správných deklarace pro HTML a CSS.

{rsform 8}

V první řadě je potřeba si správně postavit formulář, abych vám to trochu ulehčil, níže si můžete, pokud jste registrovaným uživatelem webu, stáhnout tento formulář - ten pak můžete naimportovat do komponenty RSForm! Pro.

Jakmile máte sestaven formulář, můžete začít s jeho stylováním - první fází je sestavení HTML kódu, obsahujícího definice tříd a identifikátorů - abyste rozuměli, formulář je při zapnuté automatické tvorbě formuláře na stránce Rozvržení formuláře vytvořen v určité struktuře HTML kódu, do té je ovšem potřeba pro vlastní stylování doplnit několik dalších tříd či identifikátorů - nezapomeňte si po vytvoření základní struktury formuláře vypnout Automatickou tvorbu formuláře, jinak vám při uložení přepíše všechny provedené změny.

Máte-li postaven a vyladěn HTML kód formuláře, je potřeba definovat deklarace CSS a ty pak zapsat na panelu CSS a Javaskript do pole CSS

<style type="text/css">
</style>

Zápis CSS deklarace by pak měl vypadat asi nějak takto:

<style type="text/css">

.formFieldset {
background:none repeat scroll 0 0 #DDEEEE;
border:1px solid #000000;
margin:0 auto;
padding:10px;
width:420px;
}

.formFieldset fieldset#header2 {
background:none;
margin: 0px;
height: 80px;
}

</style>

A jedna vychytávka nakonec - pokud chcete změnit barvu pozadí vstupních polí, zadejte při nastavování prvku do pole Další atributy tento kód:

onFocus="this.style.backgroundColor='#FFCC99';"
onBlur="this.style.backgroundColor='#FFFFCC'"

První řádek definuje barvu vybraného prvku - tedy pole, seznamu, atd. a druhý řádek určuje barvu opuštěného prvku - barva je uvedena v HEX formátu.

A to je celé, příště si povíme třeba o tom, jak vytvořit tooltip pro vstupní pole...