Szkielet dokumentu
często na egzaminie
Pierwsza linia każdej strony. Mówi przeglądarce: „to dokument HTML5”. Na egzaminie to kryterium „zapisana w języku HTML5”. Nie jest znacznikiem – nie ma zamknięcia.
<!DOCTYPE html>
ma zamknięcie
Korzeń dokumentu – wszystko inne jest w środku. Atrybut lang podaje język treści.
<html lang="pl">
…
</html>
atrybutczęsto na egzaminie
Atrybut znacznika <html> – język treści strony. lang="pl" = kryterium „zadeklarowany polski język”. Pomaga czytnikom ekranu i wyszukiwarkom.
<html lang="pl">
ma zamknięcie
Sekcja z informacjami O stronie, których nie widać: kodowanie, tytuł karty, podłączony CSS. Nie wstawiaj tu treści widocznej.
<head>
<meta charset="UTF-8">
<title>Tytuł</title>
</head>
znacznik pusty – bez zamknięciaczęsto na egzaminie
Metadane strony. Najważniejsze: charset="UTF-8" (polskie litery działają) i viewport (strona na telefonie). Znacznik pusty.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
ma zamknięcieczęsto na egzaminie
Tytuł widoczny na karcie przeglądarki (nie na stronie!). Przepisz go z arkusza co do znaku.
<title>Ranking gier</title>
👁 Podgląd efektu
znacznik pusty – bez zamknięciaczęsto na egzaminie
Dołącza zewnętrzny plik, najczęściej arkusz CSS. rel mówi, czym jest plik, href – gdzie leży. Znacznik pusty, umieszczany w <head>.
<link rel="stylesheet" href="styl.css">
ma zamknięcie
Kod CSS wpisany wewnątrz pliku HTML (w <head>). Na egzaminie zwykle ZABRONIONY – CSS ma być w osobnym pliku.
<style>
p { color: red; }
</style>
ma zamknięcie
Kod JavaScript – wpisany w środku albo z pliku (src). Najlepiej na końcu <body>, gdy elementy strony już istnieją.
<script src="skrypt.js"></script>
<script>
console.log("Działa");
</script>
ma zamknięcie
Ciało dokumentu – wszystko, co użytkownik widzi w oknie przeglądarki: nagłówki, tekst, obrazy, formularze. Na stronie jest dokładnie jedno <body>, umieszczone po zamknięciu </head>. Style ustawione dla body (np. czcionka, tło) dziedziczą się na całą stronę.
<body>
<h1>Witaj</h1>
</body>
👁 Podgląd efektu
Komentarz – przeglądarka go ignoruje. Służy do notatek w kodzie.
<!-- tu będzie menu -->
<meta name="description">
#
znacznik pusty – bez zamknięcia
Krótki opis strony dla wyszukiwarek – Google często pokazuje go pod tytułem w wynikach wyszukiwania. Umieszczany w <head>, nie widać go na stronie.
<meta name="description" content="Kurs INF.03 z rozwiązaniami arkuszy">
ma zamknięcie
Treść pokazywana tylko wtedy, gdy JavaScript jest wyłączony lub niedostępny.
<noscript>Włącz JavaScript, aby korzystać z kalkulatora.</noscript>
Bloki semantyczne (układ strony)
ma zamknięcieblokowysemantycznyczęsto na egzaminie
Blok nawigacyjny – miejsce na główne menu strony z odnośnikami. Wygląda jak zwykły <div>, ale mówi przeglądarce i wyszukiwarce: „tu jest nawigacja”. Na egzaminie arkusz nazywa go „blok nawigacyjny” albo „menu”. Zwykle zawiera listę <ul> z linkami <a>.
<nav>
<a href="index.html">Start</a>
</nav>
👁 Podgląd efektu
ma zamknięcieblokowysemantycznyczęsto na egzaminie
Główna, unikalna treść strony. Jeden na stronę. Często zawiera bloki <section> i <aside>.
<main>
<section>…</section>
</main>
ma zamknięcieblokowysemantycznyczęsto na egzaminie
Sekcja – tematyczna część strony, zwykle z własnym nagłówkiem. Na egzaminie bloki „lewy”, „prawy”, „pierwszy blok sekcji” to najczęściej <section>, rozróżniane atrybutem id. Wygląda jak <div>, ale jest znacznikiem semantycznym, więc arkusz go wymaga przy „podziale strony za pomocą znaczników semantycznych”.
<section id="lewy">…</section>
ma zamknięcieblokowysemantycznyczęsto na egzaminie
Samodzielna, kompletna treść, którą można by wyjąć i opublikować osobno: artykuł, post, karta produktu.
<article>
<h3>Nowość</h3>
<p>…</p>
</article>
👁 Podgląd efektu
ma zamknięcieblokowysemantycznyczęsto na egzaminie
Treść poboczna względem głównej – panel boczny, ramka z dodatkowymi informacjami, reklama. Na egzaminie „blok boczny” to zwykle <aside>. Domyślnie nie ma żadnego wyglądu – położenie z boku nadaje mu dopiero CSS (float, flex albo grid).
<aside>
<img src="reklama.png" alt="Reklama">
</aside>
👁 Podgląd efektu
ma zamknięcieblokowysemantyczny
Samodzielna ilustracja: zdjęcie, wykres, schemat albo fragment kodu, do którego tekst może się odwoływać. Podpis dodaje się znacznikiem <figcaption> wewnątrz <figure>. Domyślnie figure ma marginesy po bokach – jeśli przeszkadzają, wyzeruj je w CSS.
<figure>
<img src="mapa.png" alt="Mapa">
<figcaption>Mapa dojazdu</figcaption>
</figure>
👁 Podgląd efektu
ma zamknięciesemantyczny
Podpis ilustracji. Umieszcza się go wewnątrz <figure> – jako pierwszy element (podpis nad obrazem) albo ostatni (pod obrazem). Dzięki temu przeglądarka i czytnik ekranu wiedzą, że podpis dotyczy właśnie tej ilustracji.
<figcaption>Rys. 1</figcaption>
👁 Podgląd efektu
ma zamknięciesemantyczny
Rozwijany blok – po kliknięciu w <summary> pokazuje resztę treści. Działa bez JavaScriptu.
<details>
<summary>Pokaż odpowiedź</summary>
42
</details>
👁 Podgląd efektu
ma zamknięciesemantyczny
Widoczny nagłówek rozwijanego bloku <details>. Użytkownik widzi tylko tekst z <summary> ze strzałką; kliknięcie rozwija resztę zawartości <details>. Działa bez JavaScriptu – to gotowy mechanizm „pokaż/ukryj”, np. w sekcji FAQ.
<summary>Więcej</summary>
👁 Podgląd efektu
ma zamknięcieliniowysemantyczny
Data lub godzina zapisana tak, żeby zrozumiały ją programy (np. kalendarz, wyszukiwarka). Na ekranie możesz napisać „15 czerwca”, a w atrybucie datetime podać dokładną wartość: <time datetime="2026-06-15">15 czerwca</time>. Wyglądu nie zmienia.
<time datetime="2026-06-10">10 czerwca</time>
👁 Podgląd efektu
ma zamknięcieliniowysemantyczny
Tekst wyróżniony jak zakreślaczem – domyślnie żółte tło. Używa się go do zaznaczenia fragmentu, który jest ważny w danym kontekście, np. szukanego słowa w wynikach. Kolor tła można zmienić w CSS.
<p>Ważne: <mark>termin 10 czerwca</mark></p>
👁 Podgląd efektu
ma zamknięcieblokowy
Ogólny blok BEZ znaczenia – „pudełko” do grupowania. Gdy arkusz mówi „semantyczne znaczniki”, zamiast div użyj header/nav/main/section…
<div class="karta">…</div>
👁 Podgląd efektu
ma zamknięcieliniowy
Ogólny znacznik LINIOWY bez znaczenia – do ostylowania lub złapania kawałka tekstu w JS.
<p>Cena: <span class="cena">49 zł</span></p>
👁 Podgląd efektu
ma zamknięcieblokowysemantyczny
Dane kontaktowe autora strony lub firmy – zwykle w stopce. Domyślnie wyświetlane kursywą.
<address>
ul. Polna 5, 00-001 Warszawa<br>
tel. 123 456 789
</address>
👁 Podgląd efektu
ma zamknięcieblokowy
Okno dialogowe na stronie. Atrybut open pokazuje je od razu; w JavaScripcie: showModal() otwiera, close() zamyka.
<dialog open>
<p>Zapisano zmiany!</p>
</dialog>
👁 Podgląd efektu
Tekst
ma zamknięcieblokowyczęsto na egzaminie
Nagłówek 1. stopnia – najważniejszy tytuł. Stopnie: <h1> … <h6>. „Nagłówek trzeciego stopnia” = <h3>.
<h1>Tytuł strony</h1>
<h2>Rozdział</h2>
<h3>Podrozdział</h3>
👁 Podgląd efektu
ma zamknięcieblokowyczęsto na egzaminie
Akapit (paragraf) – podstawowy blok tekstu. Przeglądarka sama dodaje odstęp nad i pod akapitem, a enter wciśnięty w kodzie wewnątrz <p> NIE tworzy nowej linii (do tego służy <br>). Akapit jest elementem blokowym, więc zawsze zaczyna się w nowej linii. Nie można w nim umieszczać innych bloków, np. <div> ani drugiego <p>.
<p>To jest akapit.</p>
👁 Podgląd efektu
znacznik pusty – bez zamknięcialiniowy
Przejście do nowej linii wewnątrz tekstu, np. w adresie lub wierszu. Jest znacznikiem pustym – nie ma pary </br>, bo nie obejmuje żadnej treści. Nie używaj kilku <br> do robienia odstępów między blokami – od tego jest margin w CSS.
Linia 1<br>Linia 2
👁 Podgląd efektu
znacznik pusty – bez zamknięciablokowy
Pozioma linia oddzielająca części treści (horizontal rule). Znacznik pusty – bez pary </hr>. Wygląd linii (grubość, kolor) zmienia się w CSS przez border lub height i background-color.
<hr>
👁 Podgląd efektu
ma zamknięcieliniowy
Pogrubienie tekstu – tylko efekt wizualny, bez dodatkowego znaczenia. Jeśli arkusz mówi „tekst pogrubiony”, użyj <b>. Jeśli mówi „tekst ważny” albo „znacznik semantyczny… domyślnie pogrubiony”, użyj <strong> – wygląda tak samo, ale informuje przeglądarkę i czytniki ekranu, że treść jest istotna.
<b>Uwaga</b>
👁 Podgląd efektu
ma zamknięcieliniowysemantyczny
Tekst WAŻNY (semantyczny) – domyślnie pogrubiony. Czytniki ekranu go akcentują.
<strong>Nie wyłączaj komputera!</strong>
👁 Podgląd efektu
ma zamknięcieliniowy
Kursywa (pochylenie) – tylko wygląd, bez znaczenia. Jej semantycznym odpowiednikiem jest <em> (emfaza, akcent), który też domyślnie daje kursywę. Arkusz „pochylony” → <i>, „wyróżniony/akcentowany” → <em>.
<i>termin obcy</i>
👁 Podgląd efektu
ma zamknięcieliniowysemantycznyczęsto na egzaminie
Tekst UWYPUKLONY / akcentowany (semantyczny) – domyślnie kursywa. „Znacznik uwypuklony, formatowany jako pochylony” = <em>.
<p>Autor: <em>01234567890</em></p>
👁 Podgląd efektu
ma zamknięcieliniowy
Podkreślenie tekstu.
<u>podkreślony</u>
👁 Podgląd efektu
ma zamknięcieliniowy
Mniejszy tekst, np. przypisy.
<small>© 2026</small>
👁 Podgląd efektu
ma zamknięcieliniowy
Indeks DOLNY.
H<sub>2</sub>O
👁 Podgląd efektu
ma zamknięcieliniowyczęsto na egzaminie
Indeks GÓRNY – potęgi.
r<sup>2</sup>
👁 Podgląd efektu
ma zamknięcieliniowy
Krótki cytat w środku zdania. Przeglądarka sama dodaje cudzysłowy dopasowane do języka strony (przy lang="pl" – polskie „ ”). Długi cytat w osobnym bloku zapisuje się znacznikiem <blockquote>.
<q>Kto pyta, nie błądzi</q>
👁 Podgląd efektu
ma zamknięcieblokowy
Długi cytat w osobnym bloku, z wcięciem.
<blockquote>Cytat…</blockquote>
👁 Podgląd efektu
ma zamknięcieblokowy
Tekst sformatowany – zachowuje spacje i entery, czcionka o stałej szerokości.
<pre>a b
c</pre>
👁 Podgląd efektu
ma zamknięcieliniowy
Fragment kodu programu wewnątrz zwykłego tekstu, np. nazwa funkcji. Przeglądarka wyświetla go czcionką o stałej szerokości (każda litera tak samo szeroka). Dłuższe bloki kodu wstawia się jako <pre><code>…</code></pre>, żeby zachować wcięcia i entery.
<code>echo</code>
👁 Podgląd efektu
ma zamknięcieliniowysemantyczny
Skrót z pełną nazwą w atrybucie title – po najechaniu kursorem widać rozwinięcie.
<abbr title="HyperText Markup Language">HTML</abbr>
👁 Podgląd efektu
ma zamknięcieliniowysemantyczny
Tekst usunięty (przekreślony) i wstawiony (podkreślony) – np. stara i nowa cena.
<del>99 zł</del> <ins>79 zł</ins>
👁 Podgląd efektu
ma zamknięcieliniowy
Tekst nieaktualny – przekreślony (bez znaczenia „usunięty z dokumentu”, jak <del>).
<s>Wyprzedane</s>
👁 Podgląd efektu
ma zamknięcieliniowysemantyczny
Klawisz lub skrót klawiszowy do wciśnięcia. Czcionka o stałej szerokości.
Zapisz plik: <kbd>Ctrl</kbd> + <kbd>S</kbd>
👁 Podgląd efektu
ma zamknięcieliniowysemantyczny
Tytuł dzieła: książki, filmu, gry, piosenki. Domyślnie kursywa.
<p>Lektura: <cite>Pan Tadeusz</cite></p>
👁 Podgląd efektu
ma zamknięcieliniowysemantyczny
<var> – zmienna we wzorze (kursywa), <samp> – przykładowy wynik działania programu (stała szerokość).
Pole = <var>a</var> × <var>b</var><br>
Program wypisał: <samp>Hello</samp>
👁 Podgląd efektu
znacznik pusty – bez zamknięcialiniowy
Miejsce, w którym przeglądarka MOŻE złamać bardzo długie słowo, gdy brakuje miejsca. Znacznik pusty.
Konstantynopolitańczy<wbr>kowianeczka
👁 Podgląd efektu
ma zamknięcieliniowy
<progress> – pasek postępu (np. pobierania pliku), <meter> – wskaźnik wartości w znanym zakresie (np. zapełnienie dysku).
<progress value="70" max="100"></progress>
<meter value="0.6">60%</meter>
👁 Podgląd efektu
Odnośniki i obrazy
ma zamknięcieliniowyczęsto na egzaminie
Odnośnik (link). href = dokąd prowadzi: plik, adres, #kotwica, mailto:. Treść między znacznikami jest klikalna.
<a href="kontakt.html">Kontakt</a>
<a href="https://cke.gov.pl" target="_blank">CKE</a>
<a href="mailto:biuro@firma.pl">Napisz</a>
👁 Podgląd efektu
atrybutczęsto na egzaminie
Adres celu odnośnika (<a>) albo pliku w <link>. Może być względny (kontakt.html), bezwzględny (https://…), kotwica (#sekcja) lub mailto:.
<a href="#kontakt">Przewiń</a>
atrybut
Gdzie otworzyć link. target="_blank" = nowa karta, _self = ta sama (domyślnie).
<a href="x.html" target="_blank">
często na egzaminie
Początek adresu odnośnika, który zamiast strony otwiera program pocztowy z wpisanym odbiorcą: <a href="mailto:biuro@firma.pl">. Można od razu dodać temat: mailto:biuro@firma.pl?subject=Pytanie. Na egzaminie częsty w stopce („link Napisz do nas”).
<a href="mailto:biuro@firma.pl">Napisz do nas</a>
👁 Podgląd efektu
znacznik pusty – bez zamknięcialiniowyczęsto na egzaminie
Obraz. src = ścieżka do pliku, alt = tekst alternatywny (wymagany). Znacznik pusty – nie ma </img>.
<img src="logo.png" alt="Logo sklepu">
👁 Podgląd efektu
atrybutczęsto na egzaminie
Ścieżka do pliku: obrazu (<img>), skryptu (<script>), filmu, dźwięku. Względna (sama nazwa) – plik w tym samym folderze.
<img src="obrazy/kot.jpg" alt="Kot">
atrybutczęsto na egzaminie
Tekst alternatywny obrazu: wyświetla się, gdy obraz się nie wczyta, i czytają go czytniki dla niewidomych. Przepisz dokładnie z arkusza.
<img src="a.jpg" alt="Zamek">
atrybutczęsto na egzaminie
Dymek pokazujący się po najechaniu kursorem. Może go mieć prawie każdy element.
<img src="a.jpg" alt="Zamek" title="Zamek w Malborku">
👁 Podgląd efektu
atrybut
Wymiary w pikselach podane w HTML (bez „px”). Zwykle lepiej ustawiać rozmiar w CSS, chyba że arkusz każe inaczej.
<img src="a.jpg" alt="A" width="200">
ma zamknięcie
Ramka, w której wyświetla się inna strona – np. mapa Google, film z YouTube albo osobny plik HTML. Adres podaje się w atrybucie src, rozmiar w width i height. Treść ramki jest osobnym dokumentem: style z Twojej strony jej nie zmieniają.
<iframe src="mapa.html" width="400" height="300"></iframe>
👁 Podgląd efektu
często na egzaminie
Odnośnik do miejsca na TEJ SAMEJ stronie: href="#kontakt" przewija do elementu z id="kontakt". Z innej strony: href="o-nas.html#kontakt".
<a href="#kontakt">Kontakt</a>
…
<section id="kontakt">…</section>
👁 Podgląd efektu
atrybut
Atrybut <a> – plik zostanie pobrany na dysk zamiast otworzyć się w przeglądarce.
<a href="cennik.pdf" download>Pobierz cennik</a>
👁 Podgląd efektu
atrybut
Obraz wczytuje się dopiero wtedy, gdy użytkownik przewinie do niego – strona ładuje się szybciej.
<img src="galeria1.jpg" alt="Plaża" loading="lazy">
ma zamknięcie
Kilka wersji tego samego obrazu – przeglądarka wybiera pierwszą pasującą <source> (np. mniejszą na telefon), a <img> jest wersją zapasową.
<picture>
<source media="(max-width: 600px)" srcset="male.jpg">
<img src="duze.jpg" alt="Widok">
</picture>
👁 Podgląd efektu
ma zamknięcie
Mapa obrazu – klikalne obszary na jednym obrazie. shape: rect (prostokąt), circle (koło), poly (wielokąt); coords – współrzędne w pikselach.
<img src="plan.png" alt="Plan" usemap="#plan">
<map name="plan">
<area shape="rect" coords="0,0,100,50" href="sala1.html" alt="Sala 1">
</map>
👁 Podgląd efektu
Osadzenie zewnętrznego pliku, np. PDF. Dziś częściej używa się <iframe>, <video> albo <img>.
<object data="regulamin.pdf" type="application/pdf" width="400" height="300"></object>
ma zamknięcie
Grafika wektorowa zapisana kodem – ostra przy każdym powiększeniu. Można ją wstawić jako plik (<img src="logo.svg">) albo bezpośrednio w HTML.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="tomato" />
</svg>
👁 Podgląd efektu
Tabele
ma zamknięcieblokowyczęsto na egzaminie
Tabela. Składa się z wierszy <tr>, a te z komórek <td> (dane) lub <th> (nagłówek).
<table>
<tr><th>Gra</th><th>Cena</th></tr>
<tr><td>Minecraft</td><td>89</td></tr>
</table>
👁 Podgląd efektu
ma zamknięcieczęsto na egzaminie
Wiersz tabeli (table row). Tabelę buduje się wierszami: każdy <tr> zawiera komórki <td> (dane) albo <th> (nagłówki). Liczba komórek w każdym wierszu powinna być taka sama – chyba że któraś jest scalona przez colspan.
<tr><td>1</td><td>2</td></tr>
ma zamknięcieczęsto na egzaminie
Zwykła komórka tabeli z danymi (table data). Stoi zawsze wewnątrz <tr>. Komórka może zajmować kilka kolumn (colspan="2") albo kilka wierszy (rowspan="2"). Dla komórek nagłówkowych – pogrubionych i wyśrodkowanych – używa się <th>.
<td>Minecraft</td>
ma zamknięcieczęsto na egzaminie
Komórka nagłówkowa (table header) – domyślnie pogrubiona i wyśrodkowana. „Wiersz nagłówkowy” = komórki <th>.
<th>Cena</th>
👁 Podgląd efektu
atrybutczęsto na egzaminie
Komórka rozciąga się W PRAWO na kilka kolumn. W tym wierszu piszesz o tyle mniej komórek.
<td colspan="2">zajmuje 2 kolumny</td>
👁 Podgląd efektu
atrybutczęsto na egzaminie
Komórka rozciąga się W DÓŁ na kilka wierszy. W wierszu poniżej piszesz o jedną komórkę mniej.
<td rowspan="2">zajmuje 2 wiersze</td>
👁 Podgląd efektu
ma zamknięcie
Tytuł tabeli wyświetlany nad nią. Musi być pierwszym elementem zaraz po <table>. Pozycję można zmienić w CSS: caption-side: bottom przenosi podpis pod tabelę.
<caption>Cennik</caption>
👁 Podgląd efektu
<thead> / <tbody> / <tfoot>
#
ma zamknięcie
Grupy wierszy tabeli: nagłówek, treść i stopka. Są opcjonalne – tabela działa bez nich – ale porządkują kod i ułatwiają stylowanie (np. thead { background: … }). Przy drukowaniu długiej tabeli przeglądarka może powtarzać <thead> na każdej stronie.
<thead><tr><th>A</th></tr></thead>
👁 Podgląd efektu
Ustawienia dla całych kolumn tabeli (np. tło lub szerokość) bez powtarzania ich w każdej komórce. span – ile kolumn obejmuje.
<colgroup>
<col style="background: #eef">
<col span="2">
</colgroup>
👁 Podgląd efektu
atrybut
Atrybut <th>: nagłówek dotyczy kolumny (col) albo wiersza (row). Pomaga czytnikom ekranu odczytać tabelę.
<th scope="col">Cena</th>
ma zamknięcieblokowyczęsto na egzaminie
Formularz. action – dokąd wysłać (plik PHP), method – jak: get (dane w adresie) lub post (ukryte, „metoda bezpieczna”).
<form action="index.php" method="post">
…
</form>
znacznik pusty – bez zamknięcialiniowyczęsto na egzaminie
Pole formularza. Rodzaj ustala type: text, number, email, password, date, color, range, checkbox, radio, file, submit, reset, button. Znacznik pusty.
<input type="number" name="ilosc" min="1" max="10">
👁 Podgląd efektu
atrybutczęsto na egzaminie
Rodzaj pola <input> albo przycisku. Najczęstsze na egzaminie: text, number, radio, checkbox, submit. Każdy rodzaj ma osobne hasło w grupie „Rodzaje pól formularza”.
<input type="email">
👁 Podgląd efektu
atrybutczęsto na egzaminie
Nazwa pola – pod nią wartość trafia do PHP ($_POST["name"]). Bez name pole NIE zostanie wysłane!
<input type="text" name="imie">
atrybutczęsto na egzaminie
Wartość pola. W <option> i radio – to, co wyśle formularz (a nie widoczny tekst). W polu tekstowym – wartość startowa.
<option value="1">gruszka</option>
ma zamknięcieliniowyczęsto na egzaminie
Etykieta pola. Powiązanie z polem: for etykiety = id pola. Kliknięcie etykiety zaznacza pole.
<label for="imie">Imię</label>
<input type="text" id="imie">
👁 Podgląd efektu
atrybutczęsto na egzaminie
Atrybut <label> – id pola, z którym etykieta jest powiązana. (W JS i PHP for to także pętla).
<label for="email">E-mail</label>
ma zamknięcieczęsto na egzaminie
Lista rozwijana. Każda pozycja to <option>: użytkownik widzi tekst między znacznikami, a formularz wysyła wartość z atrybutu value (gdy go nie ma – sam tekst). Nazwę, pod którą wartość trafi do PHP, nadaje atrybut name na <select>. Atrybut multiple pozwala zaznaczyć kilka pozycji (z Ctrl), a selected na <option> – zaznaczyć ją na starcie.
<select name="kolor">
<option value="1">czerwony</option>
</select>
👁 Podgląd efektu
ma zamknięcieczęsto na egzaminie
Pozycja listy <select> lub <datalist>. value – wysyłana wartość, treść – widoczny tekst, selected – zaznaczona na start.
<option value="2" selected>zielony</option>
👁 Podgląd efektu
ma zamknięcieczęsto na egzaminie
Wielowierszowe pole tekstowe. rows i cols – rozmiar. Ma zamknięcie (treść startowa w środku).
<textarea name="opis" rows="4" cols="40"></textarea>
👁 Podgląd efektu
ma zamknięcieliniowyczęsto na egzaminie
Przycisk. type="submit" wysyła formularz, type="button" nic nie wysyła (do JS), type="reset" czyści pola.
<button type="submit">Wyślij</button>
<button type="button" onclick="policz()">Policz</button>
👁 Podgląd efektu
ma zamknięcieblokowy
Grupuje powiązane pola formularza (np. „Dane osobowe”, „Adres”) i rysuje wokół nich ramkę. Tytuł grupy wpisuje się w znaczniku <legend> zaraz po <fieldset> – pojawia się w linii ramki. Atrybut disabled na fieldset wyłącza od razu wszystkie pola w środku.
<fieldset>
<legend>Dane osobowe</legend>
…
</fieldset>
👁 Podgląd efektu
ma zamknięcie
Lista podpowiedzi do pola tekstowego – użytkownik może wybrać albo wpisać własną wartość.
<input list="miasta" name="miasto">
<datalist id="miasta">
<option value="Kraków">
</datalist>
👁 Podgląd efektu
atrybutczęsto na egzaminie
Atrybut zaznaczający pole radio albo checkbox od razu po załadowaniu strony („domyślnie zaznaczone”). Jest atrybutem logicznym: wystarczy samo słowo checked, bez wartości. W grupie radio (pola o tej samej nazwie) checked może mieć tylko jedno pole.
<input type="radio" name="w" checked>
👁 Podgląd efektu
atrybutczęsto na egzaminie
Pole nieaktywne – wyszarzone, nie da się go zmienić i NIE jest wysyłane. Atrybut bez wartości.
<input type="number" disabled>
👁 Podgląd efektu
atrybut
Pole tylko do odczytu: widać jego wartość, można ją zaznaczyć i skopiować, ale nie można jej zmienić. Wartość JEST wysyłana z formularzem. Tym różni się od disabled – pole wyłączone jest szare i jego wartość NIE jest wysyłana.
<input type="text" value="PL" readonly>
👁 Podgląd efektu
atrybut
Pole wymagane: przeglądarka nie wyśle formularza, dopóki pole jest puste, i pokaże komunikat „Wypełnij to pole”. To wygodna walidacja po stronie przeglądarki, ale da się ją obejść – ważne dane trzeba sprawdzić także w PHP.
<input type="email" required>
👁 Podgląd efektu
atrybut
Szary tekst-podpowiedź widoczny w pustym polu, np. „np. Jan Kowalski”. Znika, gdy zaczniesz pisać, i NIE jest wysyłany z formularzem. Nie zastępuje etykiety <label> – po wpisaniu tekstu podpowiedź znika i użytkownik nie wie już, czego dotyczy pole.
<input type="text" placeholder="np. Jan">
👁 Podgląd efektu
atrybut
Jakie pliki pokaże okno wyboru w <input type="file">: image/* – obrazy, .pdf – tylko PDF, .jpg,.png – wymienione.
<input type="file" accept="image/*">
👁 Podgląd efektu
atrybutczęsto na egzaminie
Zakres i krok pola liczbowego lub daty. step="1" = liczby całkowite, step="0.01" = grosze.
<input type="number" min="1" max="4" step="1" value="2">
👁 Podgląd efektu
atrybut
Największa liczba znaków, jaką da się wpisać w pole tekstowe, np. maxlength="11" dla numeru PESEL. Przeglądarka po prostu nie pozwoli wpisać więcej. Działa dla type="text", password, email i dla <textarea>, ale nie dla type="number" (tam używa się min i max).
<input type="text" maxlength="20">
👁 Podgląd efektu
atrybut
Wzór, który musi spełnić tekst wpisany w pole – zapisany jako wyrażenie regularne. Przykład: pattern="[0-9]{2}-[0-9]{3}" przyjmie tylko kod pocztowy typu 31-123. Gdy wartość nie pasuje, przeglądarka nie wyśle formularza i pokaże komunikat. Treść podpowiedzi można podać w atrybucie title.
<input type="text" pattern="[0-9]{11}" title="11 cyfr">
atrybut
Po załadowaniu strony kursor od razu ustawia się w tym polu, więc można pisać bez klikania. Na stronie powinno być tylko jedno pole z autofocus. Atrybut logiczny – wystarczy samo słowo.
<input type="text" autofocus>
ma zamknięcie
Grupa opcji w <select> z nagłówkiem (label). Samego nagłówka nie da się wybrać.
<select name="produkt">
<optgroup label="Owoce">
<option>jabłko</option>
<option>gruszka</option>
</optgroup>
</select>
👁 Podgląd efektu
ma zamknięcieliniowy
Miejsce na wynik obliczeń w formularzu (np. wpisywany przez JavaScript).
Suma: <output name="wynik">0</output> zł
👁 Podgląd efektu
atrybut
Pozwala wybrać kilka opcji w <select> (Ctrl + klik) albo kilka plików w <input type="file">. W PHP nazwa pola z [] (jezyki[]) daje tablicę.
<select name="jezyki[]" multiple>
<option>HTML</option>
<option>CSS</option>
</select>
👁 Podgląd efektu
atrybut
W <select> – ile opcji widać naraz (zamiast listy rozwijanej); w <input> – szerokość pola w znakach.
<select size="3">…</select>
👁 Podgląd efektu
atrybut
Czy przeglądarka ma podpowiadać zapamiętane wartości: on / off albo rodzaj danych (email, name, tel).
<input type="email" name="email" autocomplete="email">
atrybut
Sposób kodowania danych formularza. Do wysyłania plików konieczne: method="post" i enctype="multipart/form-data".
<form action="upload.php" method="post" enctype="multipart/form-data">
atrybut
Wyłącza sprawdzanie formularza przez przeglądarkę (required, type="email" itp.) – dane i tak trzeba sprawdzić w PHP.
<form action="zapisz.php" method="post" novalidate>
type="text" / "password"
#
często na egzaminie
Pole tekstowe w jednej linii. password ukrywa wpisywane znaki kropkami (ale wysyła je zwykłym tekstem – stąd HTTPS).
<input type="text" name="login">
<input type="password" name="haslo">
👁 Podgląd efektu
często na egzaminie
Pole liczbowe ze strzałkami. min, max i step ograniczają wartość. W PHP i JS wartość i tak przychodzi jako TEKST – zamień ją na liczbę.
<input type="number" name="ilosc" min="1" max="10" value="1">
👁 Podgląd efektu
type="email" / "tel" / "url"
#
Pola na e-mail, telefon i adres WWW. email i url przeglądarka sprawdza przed wysłaniem, a na telefonie pokazuje dopasowaną klawiaturę.
<input type="email" name="email">
<input type="tel" name="telefon">
<input type="url" name="strona">
👁 Podgląd efektu
często na egzaminie
Wybór daty z kalendarza i godziny. Wartość ma format RRRR-MM-DD i GG:MM – taki sam jak typy DATE i TIME w bazie danych.
<input type="date" name="data">
<input type="time" name="godzina">
👁 Podgląd efektu
często na egzaminie
Przycisk opcji – z grupy o tym samym name można zaznaczyć tylko JEDEN. value mówi, co zostanie wysłane do PHP.
<input type="radio" name="dostawa" value="kurier" checked> Kurier
<input type="radio" name="dostawa" value="paczkomat"> Paczkomat
👁 Podgląd efektu
często na egzaminie
Pole wyboru – każde zaznacza się niezależnie. Niezaznaczony checkbox w ogóle NIE jest wysyłany, dlatego w PHP sprawdza się go przez isset().
<input type="checkbox" name="zgoda" id="zgoda">
<label for="zgoda">Akceptuję regulamin</label>
👁 Podgląd efektu
Suwak wartości od min do max (domyślnie 0–100).
<input type="range" name="glosnosc" min="0" max="100" value="50">
👁 Podgląd efektu
Wybór koloru z palety – wartość w zapisie #RRGGBB.
<input type="color" name="kolor" value="#2a9d8f">
👁 Podgląd efektu
często na egzaminie
Wybór pliku z dysku. accept zawęża typy plików, multiple pozwala wybrać kilka. Formularz musi mieć method="post" i enctype="multipart/form-data".
<input type="file" name="zdjecie" accept="image/*">
👁 Podgląd efektu
type="submit" / "reset"
#
często na egzaminie
Przyciski formularza: submit wysyła dane, reset przywraca wartości początkowe pól. value to napis na przycisku.
<input type="submit" value="Zapisz">
<input type="reset" value="Wyczyść">
👁 Podgląd efektu
Pole niewidoczne – wysyła wartość, której użytkownik nie widzi (np. numer rekordu do zmiany).
<input type="hidden" name="id" value="7">
👁 Podgląd efektu
Atrybuty globalne (dla każdego znacznika)
atrybutczęsto na egzaminie
Unikalna nazwa elementu – jeden na stronie. Używa jej CSS (#nazwa), JavaScript (getElementById) i etykiety (for).
<section id="lewy">…</section>
atrybutczęsto na egzaminie
Nazwa GRUPY elementów – wiele elementów może mieć tę samą klasę, a element może mieć kilka klas (po spacji). W CSS: .nazwa.
<div class="karta promocja">…</div>
atrybut
CSS wpisany bezpośrednio w znacznik (styl liniowy). Na egzaminie zwykle niedozwolony – CSS ma być w pliku.
<p style="color: red;">
atrybut
Własne atrybuty z danymi, np. <div data-cena="49">. Nie zmieniają wyglądu – przechowują informację, którą odczyta JavaScript: element.dataset.cena (albo getAttribute("data-cena")). Nazwa po data- może być dowolna, byle bez wielkich liter.
<button data-cena="20">
atrybut
Ustala, w jakiej kolejności klawisz Tab przechodzi między elementami strony. tabindex="0" dodaje element do zwykłej kolejności (np. klikalny <div>), tabindex="-1" wyłącza go z przechodzenia klawiszem. Ważne dla dostępności – osoby bez myszy poruszają się po stronie właśnie klawiszem Tab.
<div tabindex="0">
atrybut
Atrybut ukrywający element – przeglądarka go nie wyświetla, jakby miał display: none. Uwaga: to coś innego niż <input type="hidden">, czyli niewidoczne pole formularza, które wysyła ukrytą wartość (np. id rekordu).
<p hidden>Niewidoczne</p>
👁 Podgląd efektu
atrybutczęsto na egzaminie
Zdarzenie: po kliknięciu wykonaj kod JavaScript (zwykle wywołanie funkcji – z nawiasami!).
<button onclick="policz()">Policz</button>
atrybut
Treść elementu można edytować bezpośrednio na stronie, jak w edytorze tekstu.
<p contenteditable="true">Kliknij i pisz</p>
👁 Podgląd efektu
atrybut
Kierunek tekstu: ltr – od lewej (domyślnie), rtl – od prawej (np. arabski, hebrajski).
<p dir="rtl">tekst od prawej</p>
👁 Podgląd efektu
atrybut
Element można przeciągać myszą (samą obsługę przeciągania pisze się w JavaScripcie).
<img src="a.png" alt="A" draggable="true">