Vlastní styl formuláře

Napsáno 23.10.2010 pro RSForm! Pro a označeno jako RSForm

v komponentě RSForm! Pro

RSForm!

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.

Vzor formuláře - vlastní styl
  1. Text popisující formulář. Je definován pomocí prvku "Volný text". V popisu lze použít i HTML kód.
  2. Osobní údaje
  3. Celé jméno(*)
    Uveďte prosím celé vaše jméno.
  4. E-mail(*)
    Neplatná e-mailová adresa.
  5. Informace
  6. Počet zaměstnanců(*)
    Uveďte prosím, jak velká je vaše firma.
  7. Pozice(*)
    Uveďte prosím vaši pozici v rámci firmy.
  8. Jak vás můžeme kontaktovat?
  9. Kdy vás můžeme kontaktovat?(*)
    Zvolte prosím termín, ve kterém vás můžeme kontaktovat.
  10.   
  11. Tento formulář je pouze vzorem - jeho jediným účelem je předvést vám některé z možností, které nabízí tvorba formulářů pomocí rozšíření RSForm! Pro.

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

DŮLEŽITÉ!!! - deklarace musí být uzavřena mezi párové značky pro styl
<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...

Tento vzorový formulář si mohou uživatelé, mající aktivní přístup po zakoupení instalace RSForm! Pro, stáhnout ze svého profilu.
Text byl připraven s použitím materiálů z webových stránek RSJoomla!

Komentáře (0)

Napsat komentář

Pro přidání komentáře se prosím přihlaste.