edusi.pl Portal edukacyjny

Temat 10: Obsługa formularzy w JavaScript

📘 Teoria

🔹 Do czego służą formularze?

  • zbieranie danych od użytkownika
  • przesyłanie danych do serwera
  • walidacja danych po stronie klienta

🔹 Dostęp do formularza


document.forms[0]
document.forms[0].elements[0]
document.forms[0].elements[0].value

🔹 Alternatywa (lepsza – egzamin!)


document.getElementById("pole").value

🔹 Zdarzenia formularzy

  • onclick – kliknięcie
  • onsubmit – wysłanie formularza
  • onchange – zmiana wartości

🧪 Przykład 45.1 – sprawdzanie pola


<form name="form1">
Podaj swoje imię:
<input type="text" name="imie">

<input type="button" value="Kliknij"
onclick="powitanie(this.form)">
</form>

<script>
function powitanie(form1)
{
    if(form1.imie.value=="")
    {
        document.write("Nie podałeś swojego imienia.");
    }
    else
    {
        document.write("Witaj " + form1.imie.value);
    }
}
</script>

🧪 Przykład 45.2 – sprawdzanie wielu pól


function pobierz()
{
    let f=document.forms[0];
    let brak=false;
    let napis="";

    if(f.imie.value==""){napis+="imie\n"; brak=true;}
    if(f.nazw.value==""){napis+="nazwisko\n"; brak=true;}
    if(f.data.value==""){napis+="data\n"; brak=true;}

    if(brak==false)
        alert("Wprowadziłeś wszystkie dane");
    else
        alert("Brakuje:\n"+napis);
}

🧪 Przykład 45.3 – kalkulator


function oblicz()
{
    let x=Number(document.getElementById("a").value);
    let y=Number(document.getElementById("b").value);
    let op=document.getElementById("op").value;

    if(op=="dodaj") document.getElementById("wynik").innerHTML=x+y;
    if(op=="odejmij") document.getElementById("wynik").innerHTML=x-y;
}

🧪 Przykład 45.4 – rezerwacja hotelu


function przelicz()
{
    let dor=Number(document.getElementById("d1").value);
    let dz=Number(document.getElementById("d2").value);
    let dni=Number(document.getElementById("d3").value);

    let koszt=(dor*35 + dz*25)*dni;

    document.getElementById("wynik").innerHTML=
    "Koszt: "+koszt+" zł";
}

🧪 Przykład 45.5 – sklep (zestawy)


function oblicz()
{
    let zestaw=document.getElementById("zestaw").value;
    let ilosc=Number(document.getElementById("ilosc").value);
    let rabat=document.getElementById("tak").checked;

    let cena=0;

    if(zestaw=="z1") cena=12.5;
    if(zestaw=="z2") cena=17.5;
    if(zestaw=="z3") cena=15.5;

    let koszt=ilosc*cena;

    if(rabat==true)
        koszt=koszt*0.8;

    document.getElementById("wynik").innerHTML=
    "Koszt zamówienia: "+koszt+" zł";
}

💡 Własne przykłady


let wiek=Number(prompt("Podaj wiek"));

if(wiek>=18)
document.write("Pełnoletni");
else
document.write("Niepełnoletni");

🧠 Ćwiczenia

  1. Sprawdź czy pole tekstowe jest puste
  2. Dodaj dwa pola i policz sumę
  3. Sprawdź czy liczba jest dodatnia
  4. Oblicz pole prostokąta
  5. Wybór z listy (select)

let a=Number(prompt("a"));
let b=Number(prompt("b"));
document.write(a+b);

📊 Zadanie egzaminacyjne

  1. Wykonaj stronę internetową przedstawioną na poniższym rysunku.

Stronę podziel na: baner, panel lewy, panel prawy i stopkę.

W panelu lewym umieść formularz umożliwiający wpisanie liczby dzieci, osób dorosłych i noclegów. Poniżej wstaw przycisk, który spowoduje wyświetlenie kosztu wczasów.

W panelu prawym wstaw w tabeli zdjęcia związane z wypoczynkiem nad morzem, które sam przygotujesz.

W stopce umieść baner reklamowy firmy turystycznej. Wykonaj zadanie według własnego pomysłu w dowolnym edytorze graficznym.

Kolorystyka strony powinna być zbliżona do przedstawionego wzoru.

📊 Przykładowe rozwiązanie zadania

🔍 Otwórz rozwiązanie

📊 Zadanie egzaminacyjne – Biuro podróży

  1. Wykonaj stronę internetową przedstawiającą ofertę wycieczek zagranicznych.

Stronę podziel na:

  • baner (nagłówek)
  • panel lewy (formularz)
  • panel prawy (galeria)
  • stopkę

Panel lewy:

  • wprowadzenie liczby osób dorosłych
  • wprowadzenie liczby dzieci
  • wybór kraju (lista rozwijana: Hiszpania, Grecja, Włochy)
  • checkbox „ubezpieczenie”
  • przycisk „Oblicz”

Po kliknięciu przycisku oblicz koszt:

  • dorośli: 800 zł/os
  • dzieci: 500 zł/os
  • ubezpieczenie: +100 zł/os

Wynik wyświetl w panelu pod formularzem.

Panel prawy:

  • wstaw minimum 6 zdjęć (galeria)

Stopka:

  • napis: Biuro Podróży TravelX

Dodatkowe wymagania:

  • sprawdzenie czy pola nie są puste
  • zastosowanie JavaScript
  • estetyczny wygląd strony

📊 Zadanie egzaminacyjne – Sklep komputerowy

  1. Wykonaj stronę przedstawiającą ofertę sklepu komputerowego.

Panel lewy:

  • wybór produktu (select): Laptop, Monitor, Klawiatura
  • ilość (input number)
  • checkbox „stały klient” (20% rabatu)
  • przycisk „Oblicz”

Ceny:

  • Laptop – 3000 zł
  • Monitor – 800 zł
  • Klawiatura – 150 zł

Po kliknięciu przycisku:

  • oblicz koszt
  • jeśli zaznaczono rabat → -20%
  • wyświetl wynik

Panel prawy:

  • galeria produktów (minimum 4 zdjęcia)

Stopka:

  • napis: Sklep Komputerowy TECH

📝 Test (10 pytań)

1. Formularz służy do:

2. forms[0] to:

3. value oznacza:

4. getElementById służy do:

5. onclick to:

6. Number() służy do:

7. alert to:

8. checked dotyczy:

9. innerHTML służy do:

10. submit oznacza:

⬅ Poprzedni