Formularze JavaScript

formularz w JavaScript jest reprezentowany przez obiekt Form o nazwie jak atrybut name.

Odwołanie do formularza poprzez tablicę forms. – document.forms[0]

 

właściwości które można ustawić poprzez js:

• action – wskazuje plik do którego trafiają dane z formularza
• encoding – typ MIME zdefiniowany w atrybucie enctype
• length – liczba elementów należących do formularza, właściwość do odczytu
  • document.forms.length – liczba formularzy w dokumencie
  • document.myForm.elements.length – liczba elementów formularza myForm
• method – metoda wysyłania formularza, GET lub POST
• target – okno w którym wyświetlany jest efekt formularza

 

Metody obiektu FORM

• submit() – wysyłanie danych
• reset() – czyszczenie danych

 

Funkcje obsługi zdarzeń

• onSubmit – instrukcje są wykonywane zanim zostają wysłane dane do skryptu wskazanego przez atrybut action
• onReset  – przy zwróceniu false, przycisk nie zadziała w sposób oczekiwany czyli nie wyczyści danych formularza

 

Elementy formularza

tablica elements – zawiera obiekty elementów formularza

odwołujemy się przez nazwę lub indeks tablicy

form – name myForm – document.myForm.elements[0] – odwołanie do pierwszego elementu formularza myForm

 

Obiekt text – input type text

właściwości:

• name – atrybut name
• defaultValue – wartość domyślna, atryput value
• value – bieżąca wartość, początkowo równa defaultValue, zmieniona przez użytkownika lub funkcję JS
  • nadpisanie wartości pola – document.myForm.user1.value = 'jan kovalsky’;
  • pobranie wartości pola – var userName = document.myForm.user2.value;
• value.length – długość wartości

 

Metody obiektów text i textarea

• focus() – ustawienie focus na wybranym polu – document.myForm.myText.focus();
• blue() – wyłączenie aktywności pola
• select() – zaznaczenie całego tekstu znajdującego się w polu

 

Funkcje obsługi zdarzeń

• onFocus – pole zostaje aktywne
• onBlur – pole przestaje być aktywne
• onChange – wartość pola uległa zmianie
• onSelect – zaznaczenie tekstu w polu

 

Przyciski

• type=”submit” – wyślij, wysłanie danych z formularza do pliku wskazanego przez atrybut action
• type=”reset” – usuń, przywrócenie wszystkim polom formularza wartości domyślnych lub pustych
• type=”button” – uniwersalny, bez czynności, można pod niego podpiąć dowolną akcję

atrybuty:

• name – nazwa
• value – tekst na przycisku

 

Pole wyboru – checkbox

właściwości:

• name – atrybut name
• value – wartość przekazana do serwera jeśli pole jest zaznaczone
• defaultChecked – domyślny stan pola
• checked – bieżący stan pola (true – zaznaczony, false – nie zaznaczony)

 

metody:

• click() – kliknięcie

 

zdarzenia:

• onClick – kliknięcie pola

 

Przyciski opcji – radio

właściwości

• name – nazwa przycisków tworzących grupę
• length – liczba przycisków opcji w grupie

 

odwołanie do pojedynczego przycisku – poprzez tablicę przycisków z indeksem liczonym od 0.

właściwości przycisku opcji:

• value – wartość przypisana do przycisku
• defaultChecked – domyślny stan przycisku
• checked – bieżący stan przycisku

 

metody:

• click() – kliknięcie przycisku

 

zdarzenia:

• onClick – kliknięcie przycisku

 

Rozwijane listy – select

właściwości:

• name – nazwa listy
• length – liczba opcji w liście
• options – tablica opcji
• selectedIndex – wartość indeksu zaznaczonej opcji, na liscie multiple wskazuje pierwszy wybrany element

 

tablica opcji 

właściwości pozycji w tablicy

• index – indeks w tablicy
• defaultSelected – stan atrybutu selected
• selected – aktualny stan opcji
• name – atrybut name
• text – tekst wyświetlany dla danej opcji

 

metody:

• focus() –
• blur() –

 

funkcje obsługi zdarzeń:

• onFocus
• onBlur
• onChange