UWAGA: Strona zawiera materiały archiwalne. Większość artykułów dotyczy Joomla! 1.0
Formularze Drukuj Email
Formularze są nieodłącznym elementem witryny opartej na Joomla! Wykorzystywane są do pobierania danych od użytkowników bądź umieszczania informacji na witrynie przez użytkowników i operatorów. CSS dostarcza narzędzi pozwalających nadawac elementom witryny z formularzami atrakcyjny wygląd. Style formularzy definiowane są tak samo, jak innych elementów HTML. Elementy formularzy, dla których nie zdefiniowano żadnego stylu, są wyświetlane zgodnie z ustawieniami przeglądarki.

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.

 
« poprzedni artykuł   następny artykuł »