Elementy formularzy

Formularze tworzone są za pomocą kilku znaczników HTML:

• form: tworzy formularz,
• input: tworzy kontrolki - pola tekstowe, pola haseł, przyciski,
• textarea:: tworzy wielowierszowe pola tekstowe,
• button: tworzy przyciski,
• select: tworzy listę wyboru,
• option:: tworzy element listy wyboru,
• fieldset:: tworzy element listy wyboru,
• legend:: tworzy element listy wyboru,
• label:: tworzy etykiety kontolek.

W HTML istnieje jeszcze znacznik optgroup, niespotykany w Joomla!, nieobsługiwany przez przeglądarki.

W skryptach Joomla! zastosowano w znacznikach rozpoczynających elementy formularzy kilka wartości dla atrybut klas:

• .inputbox dla pól tekstowych,
• .text_area dla obszarów tekstowych,
• .search dla pola wyszukiwarki,
• .button dla przycisków,
• .back_button dla przycisku Wstecz,
• .buttonheading dla przycisków: Drukuj, PDF, Email (Powiadom znajomego).
• .adminform dla formularzy obejmujących elementy interfejsu redakcyjnego,

oraz, w jednym przypadku atrybut:

• id="mod_search_searchword"

Nazwy kilku z tych atrybut są takie same, jak nazwy elementów HTML. Wprowadzono je, by odróżnić elementy tworzone przez znacznik inputbox.

Wszystkie znaczniki formularzy mogą posiadać atrybuty id i class.

Definiując reguły dla elementów formularzy możemy określać

• szerokość - width i ewentualnie wysokość - height,
• wielkość dopełnienia: padding i ew. marginesów: margin{/moscode,
• właściwości ramki border - szerokość width, styl (style, kolor border-color,
• kolor wypełnienia - background-color,
• właściwości czcionki: kolor color, rozmiar font-size, krój font-family,
• wyrównanie tekstu text-align.

Styl dla elementu form

Element form może być formatowany przez szereg właściwości CSS, podobnie jak inne elementy blokowe. W arkuszach stylów dla Joomla! dla elementu form ustalana jest zwykle jedynie reguła zerująca marginesy i odstepy (jeśli nie zadeklarowano ogólnego wyzerowania marginesów i odstępów w regule dla body):

form {
   margin: 0;
   padding: 0;
}

Wstrzemięźliwość projektantów w deklarowaniu stylów dla elementu form jest zrozumiała. Formularze umieszczane są zarówno w komponentach, jak i w modułach, a przy tym nie są opisane atrybutami klasy czy identyfikatora (poza formularzem w interfejsie redakcyjnym udostępnianym na stronie frontowej). Uszczegółoweienie ogólnych właściwości wyglądu mogłoby powodować nieoczekiwane efekty.

Style dla pól tekstowych

W przypadku pól i obszarów tekstowych tworzonych przez znaznik input zastosowano w skryptach Joomla! trzy klasy stylów - jedną dla pola wyszukiwarki i dwie ogólniejsze, dla pozostałych. Ustalając reguły dla stylów inputbox i text_area, trzeba pamiętać, że mogą się one pojawić w różnym kontekście, w treści głównej i w modułach. Rozsądnym rozwiązaniem jest zadeklarowanie jedynie ogólnych właściwości (np. obramowania, marginesów i odstępów wewnętrznych oraz - gdy chcemy dostosować wygląd pól tekstowych w formularzach umiesczonych w modułach, skorzystanie z selektorów kontekstowych.

Listing : Reguła dla pola tekstowego

 
.inputbox {
   padding: 2px;
   border:solid 1px #CCC;
   background-color: #FFF;
}

Listing : Reguła dla obszaru tekstowego

 
.text_area {
   padding: 2px;
   border:solid 1px #CCC;
   background-color: #FFF;
}
.text_area:focus {
   border:solid 1px #BDBDBD;
   background-color: #FFFFF3;
}

W powyższym przykładzie dla obszaru tekstowego został zdefiniowany dodatkowo styl pseudoklasy. Deklaracja ta w wielu przeglądarkach obsługujących tę właściwość spowoduje ich wyróżnienie aktywnych pól odmiennym tłem i ciemniejszym obramowaniem. Niestety, poza IE. By uzyskać podobny efekt w IE, trzeba skorzystać z JavaScript.

Style dla przycisków

W Joomla! przyciski są umieszczane w formularzach za pomocą elementu input i atrybutów class="button", class="back_button".

Listing : Reguły dla stylu przycisków

.button {
  color: #ff6600;
  font-family: Arial, Hevlvetica, sans-serif;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  border: 3px double #cccccc;
  width: auto;
  background: url(../images/button_bg.png) repeat-x;
  padding: 0px 5px;
  line-height: 18px !important;
  line-height: 16px;
  height: 26px !important;
  height: 24px;
  margin: 1px;
}
.back_button a {
   margin-top:1em;
   float         : left;
   padding       : 0 0 0 1.5em;
   display       : block;
   background    : url(../images/back_button.gif) no-repeat  center left;
   cursor        : pointer;
   display       : inline; 
   font-weight: bold;
}

Style dla etykiet

Opisowe etykiety pól formularzy pojawiły się w Joomla! dla zachowania standardu XHTML, podyktowanego dbałością o dostępność witryn internetowych. Etykiety wprowadza znacznik label, który można sformatować za pomocą CSS. Znacznik dostarcza przeglądarce informacji o zawartości, jaka powinna być wprowadzona w polu tekstowym.

Listing : Reguła dla etykiety pola tekstowego

label {
   font: bold .95em Arial, Helvetica, zans-serif
}

Inne znaczniki formularzy

Ponadto możesz również wykorzystać dwa znaczniki HTML, używane zwykle, choć nie tylko, w formularzach. W skryptach Joomla! nie są one stosowane:

fieldset {}

Znacznik grupuje elementy formularza, ujmując je w ramkę. Może być jednak z powodzeniem wykorzystany np. do publikacji wszelkiego typu uwag, porad, ostrzeżeń.

legend {}

Formatuje wygląd nagłówka pogrupowanych elementów formularza. Ciekawą właściwością jest tutaj align, pozwalająca umieścić nagłówek na górze lub na dole, z prawej lub z lewej strony.