Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Obsługa elementów formularza

Email Drukuj PDF

Pole tekstowe

Pole jest definiowane za pomocą znacznika <input> z parametrem type ustawionym na text. Schematycznie:

<input

  type="text"

  name="nazwa"

  value="wartość"

  size="rozmiar"

  maxlength="maksymalna długość"

  [readonly]

  [disabled]

  [onzdarzenie="obsługa zdarzenia"]

/>

Dostęp do wartości wpisanej do pola tekstowego uzyskuje się poprzez odwołanie do jego właściwości value. Jeśli zatem został zdefiniowany formularz w postaci:

<form name="formularz1"

      action="index.php"

      method="get">

  <div>

    <input type="text" name="pole1">

  </div>

</form>

to dostęp do pola pole1 jest możliwy dzięki konstrukcji

document.forms.formularz1.pole1.value

Pole tekstowe posiada także właściwości: size, która określa jego aktualną długość (w znakach), oraz maxlength, która określa maksymalną liczbę wpisywanych znaków.

Rozszerzone pole tekstowe

Rozszerzone pole tekstowe jest definiowane za pomocą znacznika <textarea> o schematycznej postaci:

<textarea

  name="nazwa pola"

  rows="wiersze"

  cols="kolumny"

  [readonly]

  [disabled]

  [onzdarzenie="obsługa zdarzenia"]

>pierwotny tekst</textarea>

gdzie rows określa wysokość (liczbę wierszy) pola, a cols — jego szerokość (liczbę kolumn). Użycie atrybutu readonly spowoduje, że pole będzie mogło być tylko odczytywane.

Dostęp do zawartości rozszerzonego pola tekstowego (czyli elementu textarea) jest osiągany poprzez odwołanie się do właściwości value, tzn. w przypadku formularza:

<form name="formularz1"

      action="index.php"

      method="get">

<div>

<textarea name="text1" rows="10" cols="10">

</textarea>

</div>

</form>

odczyt zawartości pola można przeprowadzić za pomocą instrukcji:

document.forms.formularz1.text1.value

Pola wyboru checkbox

Pola wyboru typu checkbox umieszczamy na witrynie za pomocą znacznika <input> z parametrem type ustawionym na checkbox. Schematycznie:

<input

  type="checkbox"

  name="nazwa"

  value="wartość"

  [checked]

  [disabled]

  [onzdarzenie="obsługa zdarzenia"]

/>

Pola wyboru typu checkbox, oprócz właściwości value dostępnej dla wielkości elementów formularza, mają dodatkowo właściwość checked, która wskazuje, czy dane pole jest zaznaczone (checked = true), czy też nie (checked = false). A zatem w przypadku formularza zdefiniowanego jako:

<form name="formularz1"

      action="index.php"

      method="get">

<div>

<input type="checkbox" name="chk1" value="x1">

</div>

</form>

aby dowiedzieć się, czy pole chk1 jest zaznaczone, należy zastosować odwołanie:

document.forms.formularz1.chk1.checked

Pola wyboru radio

Pola wyboru typu radio definiuje się w podobny sposób jak pola typu checkbox, ogólnie:

<input

  type="radio"

  name="nazwa"

  value="wartość"

  [checked]

  [disabled]

  [onzdarzenie="obsługa zdarzenia"]

Pojedyncze pole wyboru typu radio można obsługiwać podobnie jak pole checkbox, przez odwołanie się do właściwości checked (równej true, jeśli pole jest zaznaczone, false — w przeciwnym razie) i value (zawierającej wartość przypisaną polu). Czyli gdyby w formularzu form1 znalazło się pojedyncze pole typu radio o nazwie radio1, to aby sprawdzić, czy jest ono zaznaczone, czy też nie, należałoby zastosować odwołanie:

document.forms.form1.radio1.checked

To jednak rzadko spotykany przypadek. Najczęściej stosuje się grupowanie takich pól. A więc kiedy zostanie zdefiniowany formularz w postaci:

<form name="formularz1"

      action="index.php"

      method="get">

<div>

<input type="radio" name="radio1" value="x1">

<input type="radio" name="radio1" value="x2">

</div>

</form>

właściwość radio1 tego formularza będzie wskazywała listę wszystkich pól grupy radio1. Aby dowiedzieć się, z ilu pól składa się taka grupa, należy odwołać się do właściwości length, np.:

document.forms.formularz1.radio1.length

Do poszczególnych elementów tej grupy można się odwoływać przy użyciu nawiasu kwadratowego, np.:

document.forms.formularz1.radio1[0]

lub metody item, np.:

document.forms.formularz1.radio1.item(0)

Tak więc jeśli trzeba się dowiedzieć, czy pierwsze pole (o indeksie 0) z grupy radio1 formularza formularz1 jest zaznaczone, należy napisać:

document.forms.formularz1.radio1[0].checked

lub

document.forms.formularz1.radio1.item(0).checked

Listy wyboru

Listy definiowane za pomocą znaczników option i select mogą być jedno- bądź wielokrotnego wyboru. Ogólny schemat budowy listy jest następujący:

<select

  name="nazwa"

  [size="rozmiar"]

  [multiple]

  [disabled]

  [zdarzenie="obsługa zdarzenia"]

  <option value="wartość1" [selected]> opcja1</option>

  <option value="wartość2" [selected]> opcja2</option>

  ...

  <option value="wartośćN" [selected]> opcjaN</option>

</select>

gdzie rozmiar jest liczbą pozycji na liście, które mają być wyświetlane, a za pomocą znaczników <option> określa się wartości na liście.

Tego, z którym typem mamy do czynienia, można się dowiedzieć przez odczytanie wartości właściwości multiple. Jeśli jest ona równa true, jest to lista wielokrotnego wyboru, a jeśli false — jednokrotnego. Dostęp do poszczególnych elementów uzyskuje się poprzez podanie indeksu lub nazwy w nawiasie kwadratowym. Jeśli więc istnieje formularz:

<form name="formularz1"

      action="index.php"

      method="get"

<div>

<select name="lista1" multiple>

<option>pierwsza</option>

<option>druga</option>

</select>

</div>

</form>

to pierwsza opcja listy (o indeksie 0) będzie dostępna poprzez odwołanie:

document.forms.formularz1.lista1[0]

a druga (o indeksie 1):

document.forms.formularz1.lista1[1]

Każdy z elementów listy posiada także właściwość selected określającą, czy jest zaznaczony (selected = true), czy też nie (selected = false), oraz value — wskazującą jego wartość. Przykładowo w przypadku powyższego formularza wykonanie instrukcji:

var wartosc = document.forms.formularz1.lista1[0].value;

spowodowałoby przypisanie zmiennej wartosc ciągu znaków pierwsza.

Każda lista posiada także właściwość selectedIndex, która określa indeks pierwszej zaznaczonej opcji (jeśli żadna z opcji nie została zaznaczona, zawiera wartość –1). W przypadku przeglądarek Firefox, Netscape Navigator i Opera przydatna jest także właściwość value, która zawiera wartość zaznaczonej opcji (lub pusty ciąg znaków, jeśli żadna z opcji nie została zaznaczona). Tak więc jeśli w prezentowanym formularzu zostałaby zaznaczona druga z opcji, to właściwość selectedIndex (document.forms.formularz1.selectedIndex) przyjęłaby wartość 1, natomiast właściwość value (document.forms.formularz1.value) ciąg znaków druga (w przypadku Internet Explorera — pusty ciąg znaków).

Przycisk

Ogólna definicja znacznika <input> tworzącego przycisk jest następująca:

<input

  type = "button"

  name = "nazwa"

  value = "wartość"

  [zdarzenie="obsługa zdarzenia"]

  [disabled]

  [onzdarzenie="obsługa zdarzenia"]

/>

Przycisk, podobnie jak inne elementy formularza, również posiada właściwość value; w jego przypadku określa ona jednak znajdujący się na nim tekst. Jeśli zatem jest do dyspozycji formularz o nazwie form1 zawierający przycisk o nazwie button1 (parametr name), to modyfikację znajdującego się na tym przycisku napisu można osiągnąć przez wykonanie instrukcji:

document.forms.formularz1.button1.value = "nowy tekst";

a odczytanie tekstu będzie możliwe dzięki instrukcji:

var tekst = document.forms.formularz1.button1.value;

Element ukryty

Dostęp do zawartości elementu ukrytego (czyli elementu input z atrybutem type ustawionym na hidden) jest osiągany poprzez odwołanie się do właściwości value, czyli jeśli istnieje formularz form1 i element ukryty o nazwie hid1, to zmianę lub odczyt jego wartości można wykonać poprzez odwołanie:

document.forms.form1.hid1.value

 

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15464247