Powrót do Dev Notes

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