Odczyt kontrolek formularza

Prawie każde zadanie praktyczne INF.03 z JavaScriptem zaczyna się tak samo: użytkownik coś wpisuje, zaznacza lub wybiera, klika przycisk, a skrypt odczytuje kontrolki i coś z nimi robi. W tej lekcji poznasz wszystkie kontrolki, jakie pojawiły się w arkuszach – od zwykłego pola tekstowego po pole wyboru pliku – i nauczysz się odczytywać je bez typowych błędów. Umiesz już znajdować elementy (lekcja 11) i reagować na kliknięcie (lekcja 12); teraz dochodzi odczyt tego, co w kontrolkach siedzi.

Formularz, jaki dostaniesz na egzaminie

Arkusz zwykle opisuje formularz słownie („pole numeryczne z etykietą Liczba kopii, dwa przyciski opcji, przycisk Dodaj do koszyka”), a ty budujesz go w HTML. Żeby skrypt mógł z niego czytać, każda kontrolka potrzebuje id (dla getElementById) albo przynajmniej wspólnej name (dla grupy radio). Dobrze zrobiony formularz wygląda tak:

<label for="imie">Imię:</label>
<input type="text" id="imie">

<label for="ilosc">Liczba sztuk:</label>
<input type="number" id="ilosc" min="1" value="1">

<input type="checkbox" id="zgoda"> <label for="zgoda">Akceptuję regulamin</label>

<input type="radio" name="rozmiar" value="S" id="rS"> <label for="rS">S</label>
<input type="radio" name="rozmiar" value="M" id="rM" checked> <label for="rM">M</label>

<select id="miasto">
  <option value="waw">Warszawa</option>
  <option value="krk">Kraków</option>
</select>

<button type="button" onclick="pokaz()">Pokaż</button>
<p id="wynik"></p>

Zwróć uwagę na type="button". Zwykły <button> wewnątrz <form> jest domyślnie przyciskiem wysyłającym formularz – strona się przeładuje i twój wynik zniknie. Na egzaminie najbezpieczniej w ogóle nie opakowywać kontrolek w <form> albo dać przyciskowi type="button".

Pole tekstowe i liczbowe – value to zawsze napis

Właściwość value zwraca to, co jest wpisane w polu, jako napis (string). Dotyczy to także type="number" – przeglądarka pilnuje, żeby użytkownik wpisał liczbę, ale do skryptu i tak trafia "12", nie 12.

var a = document.getElementById('a').value;
var b = document.getElementById('b').value;
document.getElementById('wynik').innerHTML = a + b;

<label>a: <input type="number" id="a" value="5"></label>
<label>b: <input type="number" id="b" value="3"></label>
<button id="dodaj">Dodaj</button>
<p id="wynik"></p>

document.getElementById('dodaj').addEventListener('click', () => {
  const tekstA = document.getElementById('a').value;   // "5" – napis!
  const tekstB = document.getElementById('b').value;   // "3"
  const liczbaA = parseFloat(tekstA);                  // 5 – liczba
  const liczbaB = parseFloat(tekstB);                  // 3
  document.getElementById('wynik').innerHTML =
    'Sklejanie napisów: ' + (tekstA + tekstB) + '<br>' +
    'Dodawanie liczb: ' + (liczbaA + liczbaB) + '<br>' +
    'typeof value: ' + typeof tekstA;
});

Trzy sposoby zamiany na liczbę

const wpisane = '12.5';            // tak wygląda value
console.log(parseFloat(wpisane) + 1); // 13.5
console.log(parseInt(wpisane) + 1);   // 13
console.log(Number(wpisane) + 1);     // 13.5
console.log(Number('') , parseFloat(''));   // 0 NaN – puste pole zachowuje się różnie!
console.log(parseFloat('abc'));       // NaN

valueAsNumber jest wygodne: document.getElementById('ilosc').valueAsNumber daje od razu liczbę, a dla pustego pola NaN. Działa we wszystkich aktualnych przeglądarkach, ale tylko na polach typu number, range, date, time i podobnych – dla type="text" zawsze zwraca NaN. Na egzaminie parseFloat(...value) jest równie dobre i bardziej uniwersalne – wybierz jedno i trzymaj się go.

Zapis do kontrolki

value działa też w drugą stronę – przypisanie pole.value = 'Ala' wpisuje tekst do pola, a pole.value = '' je czyści (przydaje się po dodaniu pozycji do koszyka). Pamiętaj: treść pola zmieniasz przez value, nie przez innerHTML – <input> nie ma zawartości między tagami.

Pole wyboru (checkbox) – checked

Checkbox ma dwie przydatne właściwości: checked (true/false) oraz value – napis z atrybutu value, który jest taki sam niezależnie od zaznaczenia (domyślnie "on"). Do sprawdzenia, czy pole zaznaczono, służy więc wyłącznie checked.

Najczęstszy wzorzec egzaminacyjny: kilka usług z cenami, zsumuj zaznaczone. Zasady oceniania mówią wprost, że skrypt ma testować zaznaczenie każdego pola osobno – dlatego każde if jest tu konieczne.

<input type="checkbox" id="strzyzenie"> <label for="strzyzenie">Strzyżenie – 60 zł</label><br>
<input type="checkbox" id="koloryzacja"> <label for="koloryzacja">Koloryzacja – 150 zł</label><br>
<input type="checkbox" id="modelowanie"> <label for="modelowanie">Modelowanie – 40 zł</label><br>
<button type="button" onclick="policzCene()">Policz</button>
<p id="wynik"></p>

function policzCene() {
  let suma = 0;
  if (document.getElementById('strzyzenie').checked) suma += 60;
  if (document.getElementById('koloryzacja').checked) suma += 150;
  if (document.getElementById('modelowanie').checked) suma += 40;
  document.getElementById('wynik').innerHTML = 'Cena zabiegów: ' + suma + ' zł';
}

Gdy checkboxów jest więcej, wygodnie trzymać cenę w atrybucie value i przejść pętlą po zaznaczonych. Selektor :checked zwraca tylko zaznaczone pola, więc nie trzeba sprawdzać checked w pętli:

<input type="checkbox" class="zabieg" value="60"> Strzyżenie 60 zł<br>
<input type="checkbox" class="zabieg" value="150"> Koloryzacja 150 zł<br>
<input type="checkbox" class="zabieg" value="40"> Modelowanie 40 zł<br>
<input type="checkbox" class="zabieg" value="25"> Mycie 25 zł<br>
<button id="policz">Policz</button>
<p id="wynik"></p>

document.getElementById('policz').addEventListener('click', () => {
  const zaznaczone = document.querySelectorAll('.zabieg:checked');
  let suma = 0;
  for (const pole of zaznaczone) {
    suma += parseFloat(pole.value);   // value to napis – konwersja!
  }
  document.getElementById('wynik').textContent =
    `Zaznaczono ${zaznaczone.length} zabiegi, cena: ${suma} zł`;
});

Checkbox można też zaznaczyć ze skryptu: pole.checked = true. Przełączanie: pole.checked = !pole.checked.

Przyciski opcji (radio) – grupa z jednym zaznaczonym

Przyciski radio łączy wspólny atrybut name – w grupie może być zaznaczony tylko jeden. Każdy ma własne value (np. cenę lub kod), a zaznaczenie sprawdzasz przez checked, dokładnie jak w checkboxie. Różnica: zwykle nie interesuje cię każdy radio osobno, tylko ten jeden zaznaczony.

Dwa sposoby:

1. Selektor :checked – document.querySelector('input[name="papier"]:checked') zwraca zaznaczony element albo null, jeśli nic nie zaznaczono.
2. Pętla po document.querySelectorAll('input[name="papier"]') albo po getElementsByName('papier') i sprawdzanie checked.

var wybrany = document.querySelector('input[name="papier"]:checked');
document.getElementById('wynik').innerHTML = wybrany.value;

<p>Rodzaj papieru:</p>
<input type="radio" name="papier" value="1.5" id="blysk" checked> <label for="blysk">Błyszczący – 1,50 zł</label><br>
<input type="radio" name="papier" value="2" id="mat"> <label for="mat">Matowy – 2,00 zł</label><br>
<label>Liczba odbitek: <input type="number" id="odbitki" value="10" min="1"></label>
<button type="button" onclick="policz()">Policz</button>
<p id="wynik"></p>

function policz() {
  // sposób 1: selektor :checked – zwraca zaznaczony element
  const wybrany = document.querySelector('input[name="papier"]:checked');
  const cenaZaSztuke = parseFloat(wybrany.value);
  const odbitki = parseInt(document.getElementById('odbitki').value);
  const koszt = cenaZaSztuke * odbitki;
  document.getElementById('wynik').innerHTML = 'Cena: ' + koszt.toFixed(2) + ' zł';
}

// sposób 2 (dialekt egzaminacyjny): pętla po grupie
function wybranaWartosc(nazwaGrupy) {
  var przyciski = document.getElementsByName(nazwaGrupy);
  for (var i = 0; i < przyciski.length; i++) {
    if (przyciski[i].checked) return przyciski[i].value;
  }
  return null;   // nic nie zaznaczono
}
console.log('Na start zaznaczono:', wybranaWartosc('papier'));

Jeśli arkusz podaje ceny w treści („laminowane 12 zł/m², winylowe 14 zł/m²”), możesz wpisać je jako value przycisków albo trzymać tylko nazwy w value i dobierać cenę w if/else lub z obiektu (ceny[wybrany.value]). Oba podejścia są oceniane tak samo – liczy się wynik.

Lista rozwijana (select)

Element <select> ma trzy przydatne właściwości:

Najprostszy zapis to select.value. Gdy chcesz pokazać użytkownikowi widoczny tekst, a nie kod, użyj select.options[select.selectedIndex].text.

var lista = document.getElementById('m');
document.write(lista.value + ' ' + lista.selectedIndex);

<label>Miasto kursu:
  <select id="miasto">
    <option value="Warszawa">Warszawa</option>
    <option value="Katowice">Katowice</option>
    <option value="Gdańsk">Gdańsk</option>
  </select>
</label>
<label>Dostawa:
  <select id="dostawa">
    <option value="0">Odbiór osobisty</option>
    <option value="15">Kurier – 15 zł</option>
    <option value="9">Paczkomat – 9 zł</option>
  </select>
</label>
<button id="pokaz">Pokaż</button>
<p id="wynik"></p>

document.getElementById('pokaz').addEventListener('click', () => {
  const miasto = document.getElementById('miasto');
  const dostawa = document.getElementById('dostawa');
  const kosztDostawy = parseFloat(dostawa.value);          // value to napis
  const nazwaDostawy = dostawa.options[dostawa.selectedIndex].text;
  document.getElementById('wynik').innerHTML =
    `Kurs odbędzie się w ${miasto.value} (pozycja ${miasto.selectedIndex + 1}).<br>` +
    `${nazwaDostawy}: ${kosztDostawy} zł`;
});

Jeśli opcje nie mają atrybutu value, select.value zwraca tekst opcji – to częsty przypadek w prostych formularzach (np. „lista rozwijana z miastami”), gdzie wystarczy <option>Warszawa</option>.

Pozostałe kontrolki

Pole wielowierszowe (textarea)

<textarea id="tresc"></textarea> odczytujesz jak zwykłe pole: tresc.value. Znaki nowej linii są w napisie jako \n; jeśli wypisujesz treść przez innerHTML, zamień je na <br>: tresc.value.replace(/\n/g, '<br>') albo nadaj akapitowi styl white-space: pre-line.

Suwak (range)

<input type="range" id="jasnosc" min="0" max="200" value="100"> zwraca aktualne położenie jako napis ("100"). Suwak nie ma stanu „pusty” – zawsze ma jakąś wartość. Często łączy się go ze zdarzeniem input, żeby reagować w trakcie przesuwania:

<label>Przezroczystość: <input type="range" id="krycie" min="0" max="100" value="100"></label>
<span id="odczyt">100</span>%
<p id="probka" style="background:#f2d338;padding:8px">Próbka koloru</p>

const suwak = document.getElementById('krycie');
suwak.addEventListener('input', () => {
  const procent = suwak.valueAsNumber;            // od razu liczba
  document.getElementById('odczyt').textContent = procent;
  document.getElementById('probka').style.opacity = procent / 100;
});

Hasło, kolor, data

type="password" to zwykłe pole tekstowe z kropkami – value zwraca prawdziwy tekst. W zadaniu „porównaj dwa hasła” wystarczy haslo1.value === haslo2.value. Pole type="color" zwraca kolor w zapisie #rrggbb (np. "#ff0000"), a type="date" napis "2026-10-20" (rok-miesiąc-dzień, niezależnie od tego, jak wyświetla go przeglądarka).

Pole pliku (type=file) – C:\fakepath\

Od 2025 r. w arkuszach pojawia się pole <input type="file">. Jego value nie zawiera prawdziwej ścieżki – ze względów bezpieczeństwa każda przeglądarka zwraca napis C:\fakepath\ + nazwa pliku, np. "C:\fakepath\zdjecie.jpg" (bez wybranego pliku: ""). Stąd polecenie „ustal nazwę pliku bez ścieżki dostępu”. Masz dwa sposoby:

1. Wyciąć nazwę z value – wszystko po ostatnim ukośniku wstecznym: sciezka.slice(sciezka.lastIndexOf('\\') + 1). W kodzie JS ukośnik wsteczny zapisujesz podwójnie, bo pojedynczy \ rozpoczyna znak specjalny.
2. Odczytać files[0].name – właściwość files to lista wybranych plików; files[0] to pierwszy z nich, a .name to sama nazwa. Daje to też files[0].size (bajty) i files[0].type (np. "image/png").

<input type="file" id="plik" accept="image/*">
<button id="sprawdz">Sprawdź</button>
<p id="wynik">Wybierz plik i kliknij „Sprawdź”.</p>

document.getElementById('sprawdz').addEventListener('click', () => {
  const pole = document.getElementById('plik');
  const wynik = document.getElementById('wynik');
  if (pole.files.length === 0) {
    wynik.textContent = 'Nie wybrano pliku.';
    return;
  }
  const sciezka = pole.value;                                   // "C:\fakepath\kot.png"
  const nazwaZeSciezki = sciezka.slice(sciezka.lastIndexOf('\\') + 1);   // "kot.png"
  const nazwaZFiles = pole.files[0].name;                       // "kot.png"
  wynik.innerHTML = 'value: ' + sciezka + '<br>' +
    'slice po ostatnim \\: ' + nazwaZeSciezki + '<br>' +
    'files[0].name: ' + nazwaZFiles + '<br>' +
    'rozmiar: ' + pole.files[0].size + ' B';
});

Dwa style zapisu: egzaminacyjny i nowoczesny

W arkuszach i tabelach pomocniczych CKE kod wygląda tak: atrybut onclick="funkcja()", var, getElementById, innerHTML. Ty możesz pisać nowocześniej – const, addEventListener, querySelector, textContent. Oba style są na egzaminie w pełni poprawne – egzaminator sprawdza efekt w przeglądarce i obecność konstrukcji w kodzie, nie wersję języka. Umiej czytać i pisać oba; w lekcji 14 porównamy je dokładnie na pełnym zadaniu.

// dialekt egzaminacyjny
function pokaz() {
  var imie = document.getElementById('imie').value;
  document.getElementById('wynik').innerHTML = 'Witaj, ' + imie;
}
// w HTML: <button onclick="pokaz()">Pokaż</button>

// styl nowoczesny
document.querySelector('#pokaz').addEventListener('click', () => {
  const imie = document.querySelector('#imie').value;
  document.querySelector('#wynik').textContent = `Witaj, ${imie}`;
});

Reagowanie na zmianę kontrolki

Nie zawsze trzeba czekać na przycisk. Zdarzenie change uruchamia się, gdy użytkownik zakończy zmianę (odznaczy checkbox, wybierze opcję, opuści pole tekstowe), a input – przy każdej zmianie wartości (każdy wpisany znak, każdy ruch suwaka). Zdarzenia focus/blur (wejście i wyjście z pola) znasz z lekcji 12 – arkusz z czerwca 2024 (INF.03-08-24.06) kazał zwiększać pasek postępu właśnie po opuszczeniu każdego pola.

<label><input type="checkbox" id="faktura"> Chcę fakturę</label>
<div id="daneFirmy" style="display:none">
  <label>NIP: <input type="text" id="nip" maxlength="10"></label>
  <span id="licznik">0/10</span>
</div>

const faktura = document.getElementById('faktura');
const daneFirmy = document.getElementById('daneFirmy');
faktura.addEventListener('change', () => {
  daneFirmy.style.display = faktura.checked ? 'block' : 'none';
});

const nip = document.getElementById('nip');
nip.addEventListener('input', () => {
  document.getElementById('licznik').textContent = nip.value.length + '/10';
});

Na egzaminie

Ściąga

Zadania

Imię: Ola
Wiek: 17 (za rok: 18)
Newsletter: tak
Płeć: K
Klasa: 3

<label>Imię: <input type="text" id="imie" value="Ola"></label><br>
<label>Wiek: <input type="number" id="wiek" value="17"></label><br>
<label><input type="checkbox" id="newsletter"> Newsletter</label><br>
<input type="radio" name="plec" value="K" id="pK" checked> <label for="pK">K</label>
<input type="radio" name="plec" value="M" id="pM"> <label for="pM">M</label><br>
<label>Klasa:
  <select id="klasa">
    <option>1</option><option>2</option><option>3</option><option>4</option>
  </select>
</label><br>
<button type="button" id="pokaz">Pokaż</button>
<p id="wynik"></p>

document.getElementById('pokaz').addEventListener('click', () => {
  const imie = document.getElementById('imie').value;
  const wiek = parseInt(document.getElementById('wiek').value);      // liczba, nie napis
  const newsletter = document.getElementById('newsletter').checked ? 'tak' : 'nie';
  const plec = document.querySelector('input[name="plec"]:checked').value;
  const klasa = document.getElementById('klasa').value;               // brak atrybutu value → tekst opcji

  document.getElementById('wynik').innerHTML =
    'Imię: ' + imie + '<br>' +
    'Wiek: ' + wiek + ' (za rok: ' + (wiek + 1) + ')<br>' +
    'Newsletter: ' + newsletter + '<br>' +
    'Płeć: ' + plec + '<br>' +
    'Klasa: ' + klasa;
});

<p>Rodzaj biletu:</p>
<input type="radio" name="bilet" value="28" id="normalny" checked> <label for="normalny">Normalny – 28 zł</label><br>
<input type="radio" name="bilet" value="19" id="ulgowy"> <label for="ulgowy">Ulgowy – 19 zł</label><br>
<input type="radio" name="bilet" value="70" id="rodzinny"> <label for="rodzinny">Rodzinny – 70 zł</label><br>
<label>Liczba biletów: <input type="number" id="liczba" min="1" value="1"></label><br>
<label><input type="checkbox" id="okulary"> Okulary 3D (+5 zł do biletu)</label><br>
<button type="button" onclick="obliczKwote()">Oblicz</button>
<p id="wynik"></p>

function obliczKwote() {
  const wybranyBilet = document.querySelector('input[name="bilet"]:checked');
  let cenaBiletu = parseFloat(wybranyBilet.value);
  const liczbaBiletow = parseInt(document.getElementById('liczba').value);
  if (document.getElementById('okulary').checked) {
    cenaBiletu += 5;                       // dopłata do KAŻDEGO biletu
  }
  const doZaplaty = cenaBiletu * liczbaBiletow;
  document.getElementById('wynik').innerHTML = 'Do zapłaty: ' + doZaplaty + ' zł';
}

<input type="checkbox" id="mycie"> <label for="mycie">Mycie zewnętrzne – 35 zł</label><br>
<input type="checkbox" id="odkurzanie"> <label for="odkurzanie">Odkurzanie – 20 zł</label><br>
<input type="checkbox" id="woskowanie"> <label for="woskowanie">Woskowanie – 50 zł</label><br>
<input type="checkbox" id="tapicerka"> <label for="tapicerka">Pranie tapicerki – 90 zł</label><br>
<label>Rozmiar auta:
  <select id="rozmiar">
    <option>Osobowe</option>
    <option>SUV / van</option>
  </select>
</label><br>
<button type="button" onclick="obliczKoszt()">Oblicz</button>
<p id="wynik"></p>

function obliczKoszt() {
  // kryterium 3: każde pole osobno
  let suma = 0;
  if (document.getElementById('mycie').checked) suma += 35;
  if (document.getElementById('odkurzanie').checked) suma += 20;
  if (document.getElementById('woskowanie').checked) suma += 50;
  if (document.getElementById('tapicerka').checked) suma += 90;

  // kryterium 4: dopłata zależna od listy
  const rozmiar = document.getElementById('rozmiar').value;   // tekst opcji (brak atrybutu value)
  if (rozmiar === 'SUV / van') {
    suma = suma * 1.2;
  }

  // kryterium 5: dokładny format
  document.getElementById('wynik').innerHTML =
    'Rozmiar: ' + rozmiar + '. Do zapłaty: ' + suma + ' zł';
}

<label>Plik: <input type="file" id="plik" accept="image/*"></label><br>
<label>Liczba kopii: <input type="number" id="kopie" min="1" value="1"></label><br>
<input type="radio" name="format" value="2" id="a4" checked> <label for="a4">A4 – 2 zł</label>
<input type="radio" name="format" value="3.5" id="a3"> <label for="a3">A3 – 3,50 zł</label><br>
<label>Uwagi:<br><textarea id="uwagi" rows="2" cols="30"></textarea></label><br>
<button type="button" id="dodaj">Dodaj do zamówienia</button>
<p id="wynik"></p>

document.getElementById('dodaj').addEventListener('click', () => {
  const polePliku = document.getElementById('plik');
  const wynik = document.getElementById('wynik');

  // 1. nazwa pliku bez ścieżki
  if (polePliku.files.length === 0) {
    wynik.textContent = 'Wybierz plik.';
    return;
  }
  const sciezka = polePliku.value;                                 // "C:\fakepath\kot.png"
  const nazwaPliku = sciezka.slice(sciezka.lastIndexOf('\\') + 1); // "kot.png"
  // równoważnie: const nazwaPliku = polePliku.files[0].name;

  // 2. cena
  const kopie = parseInt(document.getElementById('kopie').value);
  const wybranyFormat = document.querySelector('input[name="format"]:checked');
  const cenaFormatu = parseFloat(wybranyFormat.value);
  const nazwaFormatu = wybranyFormat.id.toUpperCase();              // "a4" → "A4"
  const cena = cenaFormatu * kopie;

  // 3. wynik w trzech (lub czterech) liniach
  let tekst = 'Plik: ' + nazwaPliku + '<br>' +
    'Kopie: ' + kopie + ', format ' + nazwaFormatu + '<br>' +
    'Cena: ' + cena + ' zł';
  const uwagi = document.getElementById('uwagi').value.trim();
  if (uwagi !== '') {
    tekst += '<br>Uwagi: ' + uwagi;
  }
  wynik.innerHTML = tekst;
});

Test powtórkowy

var x = document.getElementById('ile').value;