Przez Małgorzata Rzerzycha-Myśliwy w JS — 2 lis 2025

HTML podstawy

Visual Studio Code (VS Code) to edytor kodu stworzony przez Microsoft. Służy do pisania, uruchamiania i testowania kodu w różnych językach programowania — np. HTML, CSS, JavaScript, Python, C++, itp.
Można w nim:
pisać strony internetowe
tworzyć programy
pisać skrypty i aplikacje
współpracować z systemem kontroli wersji (np. Git)
uruchamiać kod bez wychodzenia z edytora

VS Code sam w sobie jest lekki i szybki, a jego możliwości rozszerzają wtyczki (extensions).
Wtyczki to dodatki, które rozszerzają możliwości VS Code.
Oto kilka popularnych:

Live Server
Live Server pozwala uruchomić stronę HTML w przeglądarce i automatycznie ją odświeżać po zapisaniu zmian.
• Otwiera lokalny serwer (np. http://127.0.0.1:5500)
• Pokazuje stronę HTML „na żywo”
• Gdy zapiszesz plik, przeglądarka odświeży się automatycznie
Zmieniasz coś w index.html, zapisujesz (Ctrl + S), i od razu widzisz wynik w przeglądarce — bez ręcznego odświeżania
Prettier (Code Formatter) Prettier automatycznie formatuje Twój kod, żeby był czytelny i estetyczny.
• Uporządkuje wcięcia (tabulatory, spacje)
• Doda lub usunie zbędne spacje i średniki
• Ujednolici styl kodu (np. cudzysłowy, nawiasy)
• Ułatwia współpracę w zespole, bo każdy ma „ten sam styl”
ESLint. ESLint analizuje kod JavaScript lub TypeScript i sprawdza, czy nie ma błędów lub niezgodności ze standardami.
• Wskazuje błędy w składni i logice kodu
• Pomaga utrzymać spójny styl pisania
• Ostrzega przed nieużywanymi zmiennymi lub niebezpiecznym kodem
• Może automatycznie poprawiać niektóre błędy
W VS Code w lewej części interface’u tworzymy foldery i pliki:

Foldery w VS Code – do organizowania projektu, służą do:
• grupowania plików, które należą do tego samego projektu (np. strony internetowej, programu, gry itp.),
• utrzymania porządku w kodzie,
• ułatwienia pracy, gdy masz wiele powiązanych plików.

Pliki w VS Code – do pisania kodu lub treści
Pliki to konkretne części projektu. Każdy plik ma swoje rozszerzenie, które mówi VS Code, jakiego języka lub typu treści dotyczy (np. .html, .css, .js, .py, .txt). Warto ustawić w programie widoczność rozszerzeń.

organizacja pracy:

długi tekst kodu można zawijać skrótem crtl + z

spa- single page aplication

Języki programowania:
HTML – odpowiada za strukturę strony (właściwie nie język programowania a język opisu struktury stron www)
CSS – odpowiada za wygląd i style
Java Script – odpowiada za interakcję, pozwala manipulować elementami innych języków
• Java Script powstał w 1992 r.
• ES2015 (czyli ECMAScript 2015) to wersja języka JavaScript wprowadzona w 2015 roku. To duża aktualizacja języka — dodała mnóstwo nowych możliwości, które dziś są podstawą nowoczesnego JavaScriptu.

HTML podstawy
A Każdy dokument HTML ma określoną strukturę — coś jak „szkielet” strony.
Każdy element HTML ma zazwyczaj:

Tag otwierający – np.

<p>

Treść – np. To jest akapit

Tag zamykający – np.

 </p>

Niektóre nie mają zamknięcia:

(np. <img>, <br>, <meta>).

Sekcja	Co zawiera	Przykład
<!DOCTYPE html>	Deklaracja typu dokumentu (HTML5)	<!DOCTYPE html>
<html>	Główny element strony (tu często informacja o tłumaczeniu na dany język)	<html lang="pl">...</html>
<head>	Informacje o stronie (niewidoczne na ekranie, info o UTF-8; meta name= ‘viewport’ content= … określenie dla urządzeń mobilnych – ustawienie na rzeczywistą szerokość ekranu)	<meta>, <title>, <link>
<body>	Treść widoczna na stronie	<h1>, <p>, <img>, <a>

Zmacznik	Znaczenie	Przykład
<h1> – <h6>	Nagłówki	<h1>Tytuł</h1>
<p>	Akapit tekstu	<p>To jest tekst.</p>
<a>	Link	<a href="https://example.com">Link</a>
<img>	Obrazek	<img src="foto.jpg" alt="Opis">
<ul>, <ol>, <li>	Listy	<ul><li>Element</li></ul>
<div>	Blok (kontener)	<div>Treść</div>
<span>	Krótki fragment tekstu w linii	<span>tekst</span>
<header>, <main>, <footer>	Sekcje semantyczne (nagłówek, część główna, stopka)	<header>Nagłówek</header>

Inne:

Znacznik	Znaczenie / zastosowanie
<main>	Główna zawartość strony
<article>	Samodzielna treść (artykuł, wpis)
<section>	Sekcja strony, blok tematyczny
<p>	Akapit tekstu
<br>	Łamanie linii w tekście
<hr>	Pozioma linia oddzielająca treść
<span>	Fragment tekstu w linii (do stylowania)
<link rel="icon">	Ikona strony (favicon)
<strong>	Ważny, pogrubiony tekst
<em>	Wyróżniony, pochylony tekst
<mark>	Podświetlony tekst
<q>	Krótki cytat w linii
<blockquote>	Dłuższy cytat, blokowy
<cite>	Źródło cytatu lub tytuł
<iframe>	Pozwala osadzić inną stronę internetową (lub dokument HTML) wewnątrz aktualnej strony. Można myśleć o nim jak o „okienku” w Twojej stronie, w którym wyświetlana jest inna zawartość.

W HTML elementy inline to takie, które:
• Nie łamią linii — czyli nie zaczynają nowego wiersza,
• Zajmują tylko tyle miejsca, ile potrzebuje ich zawartość,
• Mogą znajdować się wewnątrz innych elementów inline lub blokowych.

Najważniejsze elementy inline w HTML

Znacznik	Znaczenie / zastosowanie
<a>	Link
<span>	Fragment tekstu do stylowania lub selekcji
<strong>	Ważny tekst (pogrubiony)
<b>	Pogrubiony tekst (bez semantyki)
<em>	Tekst wyróżniony (pochylony)
<i>	Tekst kursywą (bez semantyki)
<mark>	Podświetlony tekst
<code>	Fragment kodu
<abbr>	Skrót z możliwością podania pełnej nazwy (title)
<cite>	Źródło cytatu lub tytuł pracy
<q>	Krótki cytat w linii
<time>	Znacznik czasu lub daty w tekście
<img>	Obrazek (inline w tekście)
<small>	Tekst mniejszy niż normalny
<sub>	Indeks dolny
<sup>	Indeks górny

W HTML elementy blokowe (block-level) to te, które:
• Zawsze zaczynają się od nowej linii,
• Zajmują całą szerokość kontenera (np. strony),
• Mogą zawierać inne elementy blokowe i inline.

Najważniejsze elementy blokowe w HTML

Znacznik	Znaczenie / zastosowanie
<div>	Ogólny kontener dla grupy elementów
<p>	Akapit tekstu
<h1> – <h6>	Nagłówki różnych poziomów
<header>	Nagłówek strony lub sekcji
<footer>	Stopka strony lub sekcji
<section>	Sekcja strony, np. rozdział
<article>	Samodzielna treść, np. wpis lub artykuł
<aside>	Treść poboczna, np. sidebar
<nav>	Menu nawigacyjne
<main>	Główna zawartość strony
<ul>	Lista nieuporządkowana
<ol>	Lista uporządkowana
<li>	Element listy (w <ul> lub <ol>)
<form>	Formularz
<table>	Tabela
<blockquote>	Dłuższy cytat (blokowy)
<figure>	Obrazek z podpisem
<figcaption>	Podpis obrazka (wewnątrz <figure>)

Atrybut to dodatkowa informacja o elemencie HTML.
Pomaga przeglądarce zrozumieć, jak ma działać lub wyglądać dany element. Atrybuty umieszcza się wewnątrz tagu otwierającego i zawsze mają strukturę:
nazwa="wartość"

Atrybut	Do jakiego elementu	Co robi
href	<a>	Określa adres linku
src	<img>, <script>	Określa źródło pliku (np. obrazka)
alt	<img>	Tekst alternatywny, gdy obrazek się nie wczyta
title	Dowolny	Pokazuje dymek z opisem po najechaniu kursorem
id	Dowolny	Nadaje unikalny identyfikator elementowi
class	Dowolny	Nadaje nazwę klasy (używaną w CSS/JS)
style	Dowolny	Dodaje styl bezpośrednio do elementu
lang	<html>	Określa język dokumentu (pl, en, itp.)
target	<a>	Ustawia, gdzie otworzy się link (_blank, _self, itd.)
width	<iframe>, <img>	Szerokość elementu w pikselach (lub procentach).
height	<iframe>, <img>	Wysokość elementu w pikselach (lub procentach).
loading	<iframe>, <img>	"lazy" – ładowanie elementu dopiero, gdy jest blisko widoku użytkownika (optymalizacja wydajności). "eager" – natychmiastowe ładowanie (domyślne).

Atrybuty są zawsze w tagu otwierającym.
Jeśli atrybut ma wartość tekstową, należy ją pisać w cudzysłowie.
Można mieć kilka atrybutów w jednym tagu, np.:

<img src="foto.jpg" alt="Opis obrazka" width="300" height="200">

Istnieją znaczniki, które nie potrzebują zamknięcia czyli nie mają na końcu />

1. `<area>`

2. `<base>`

3. `<br>`

4. `<col>`

5. `<embed>`

6. `<hr>`

7. `<img>`

8. `<input>`

9. `<link>`

10. `<meta>`

11. `<param>`

12. `<source>`

13. `<track>`

14. `<wbr>`

Komentarze w HTML
Komentarze to notatki w kodzie, które:
• nie są widoczne dla użytkownika na stronie,
• nie są wykonywane przez przeglądarkę,
• służą do opisywania lub wyłączania fragmentów kodu.

Komentarz możesz też użyć, by czasowo ukryć kod, np.:

<!-- <img src="logo.png" alt="Logo"> -->

Najnowsza wersja to HTML 5, ważne informacje ogólne, w <head> znajdziemy:

<!DOCTYPE html> mówi przeglądarce internetowej, z jaką wersją HTML-a ma do czynienia i jak ma interpretować kod.
W skrócie — to instrukcja dla przeglądarki, żeby poprawnie wyświetliła stronę.

UTF-8 (czyt. „ju ti ef eight”) to standard kodowania znaków — czyli sposób, w jaki komputer zapisuje i odczytuje litery, cyfry, symbole i znaki specjalne.

<meta charset="UTF-8">

To linijka w sekcji strony HTML, która mówi przeglądarce:
„Ta strona używa kodowania UTF-8, więc wyświetl znaki poprawnie.”

<meta name="viewport">

To znacznik meta w HTML, który kontroluje sposób wyświetlania strony na różnych urządzeniach — zwłaszcza na smartfonach i tabletach.
Znajduje się w sekcji strony, np.:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Element	Znaczenie
<meta>	znacznik z informacją o stronie
name="viewport"	dotyczy sposobu wyświetlania strony
width=device-width	dopasowuje stronę do szerokości ekranu
initial-scale=1.0	ustawia początkowe powiększenie na 100%

Łączenie z CSS

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>Przykład CSS</title>
  <!-- Tutaj wstawiamy zewnętrzny CSS -->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Witaj na mojej stronie!</h1>
</body>
</html>

· <link> – znacznik służący do podłączenia pliku.

· rel="stylesheet" – informuje, że to arkusz stylów.

· href="style.css" – ścieżka do pliku CSS.

Łączenie z JS

Najczęściej przed zamknięciem tagu , żeby strona najpierw się załadowała:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>Przykład JS</title>
</head>
<body>
  <h1>Witaj!</h1>

  <!-- Tutaj wstawiamy zewnętrzny JS -->
  <script src="script.js"></script>
</body>
</html>

· <script> – znacznik dla JavaScript.

· src="script.js" – ścieżka do pliku JS.

Ważne uwagi:
• Ścieżka do pliku: jeśli plik CSS lub JS jest w tym samym folderze co HTML, wystarczy nazwa (style.css).
• Ładowanie JS: Jeśli umieścisz <script> w <head>, strona może się ładować wolniej — często dodaje się wtedy defer:

<script src="script.js" defer></script>

defer powoduje, że skrypt wykona się dopiero po załadowaniu całej strony

Kolejność: CSS w <head> (żeby styl był widoczny od razu), JS przed </body> lub z defer/async.

Accessibility w web designie oznacza, że strona jest:

1. Czytelna dla osób niewidomych i słabowidzących

o np. obsługa czytników ekranu (screen readers), alternatywne teksty do obrazków (alt).

2. Przystosowana dla osób niesłyszących i słabosłyszących

o np. napisy do wideo, transkrypcje audio.

3. Łatwa do obsługi dla osób z ograniczoną sprawnością ruchową

o np. dostępność klawiaturą, odpowiednio duże przyciski, możliwość powiększania tekstu.

4. Zrozumiała dla wszystkich

o logiczna struktura nagłówków (<h1>, <h2>…), odpowiednie kontrasty kolorów, czytelne etykiety formularzy.

ARIA – Accessible Rich Internet Applications

ARIA to zestaw atrybutów HTML, który pomaga osobom korzystającym z technologii wspomagających (np. czytników ekranu) zrozumieć, co robią elementy strony.

Innymi słowy: ARIA poprawia accessibility stron internetowych. Nie zmienia wyglądu strony, ale dodaje informacje semantyczne, które mówią technologii wspomagającej:

Role (role) – określa typ elementu.
Etykiety (aria-label) – opis elementu, który nie jest widoczny na stronie.
Stany (aria-checked, aria-expanded, aria-hidden) – informują o stanie elementu.

Najczęściej używane atrybuty ARIA

Atrybut	Znaczenie
`role`	Określa rolę elementu (np. button, navigation, dialog)
`aria-label`	Krótki opis elementu dla czytników ekranu
`aria-labelledby`	Wskazuje ID elementu, który opisuje dany element
`aria-hidden`	Ukrywa element dla technologii wspomagających
`aria-checked`	Informuje, czy element jest zaznaczony (checkbox, radio)
`aria-expanded`	Informuje, czy element (np. menu) jest rozwinięty
`aria-live`	Powiadamia, że zawartość zmienia się dynamicznie

Dlaczego ARIA jest ważna?

Pozwala tworzyć interaktywne strony dostępne dla wszystkich.
Poprawia doświadczenie użytkowników czytników ekranu.
Wspiera standardy WCAG i dobre praktyki web accessibility.

FORMULARZE PODSTAWY

Znacznik	Znaczenie
<form>	Tworzy formularz
<label>	Opisuje pole formularza
<fieldset>	Grupuje pola
<button>	Tworzy przycisk
<input>	Tworzy pole wprowadzania danych

Atrybut	Znaczenie
for	Łączy etykietę z polem o danym id
id	Unikalny identyfikator elementu
autocomplete	Włącza/wyłącza podpowiedzi
placeholder	Tekst pomocniczy w polu
type	Określa rodzaj pola (tekst, email, radio, checkbox itp.)
required	Wymaga wypełnienia pola

Znacznik	Znaczenie	Gdzie się używa	Przykład
<legend>	Tytuł grupy pól	wewnątrz <fieldset>	<legend>Dane osobowe</legend>
<textarea>	Wieloliniowe pole tekstowe	wewnątrz formularzy	<textarea rows="4"></textarea>
<small>	Mniejszy, pomocniczy tekst	przy polach, w stopce, przy uwagach	<small>Hasło min. 8 znaków</small>

input obsługuje text, email, password, numer; typy inputu to:

checkbox – prawda/fałsz, wybór zerojedynkowy – np. służy do odbierania zgód, można też wybrać więcej możliwości

radio button – szereg możliwości do zaznaczania, ale możliwość wyboru tylko jednej opcji

    <form action="/submit" method="post">
        <h2>Pojedynczy checkbox</h2>
        <div>
            <label>
                <input type="checkbox" name="newsletter" value="yes">
                Chcę otrzymywać newsletter
            </label>
        </div>

type – określa typ pola (np. checkbox, radio), name = nadaje nazwę, pod którą wartość zostanie wysłana do serwera po wysłaniu formularza, value = to wartość, która zostanie wysłana, jeśli pole zostanie zaznaczone

required – atrybut dodany na końcu <input> określa pole jako obowiązkowe

checked – atrybut dodany na końcu <input> określa pole jako domyślnie zaznaczone

Atrybut method i get w <form>

action – określa, dokąd dane mają być wysłane (np. adres skryptu PHP lub API).
method – określa, w jaki sposób dane mają zostać przesłane.

method="POST"

Opis:

Dane formularza są wysyłane „wewnątrz” zapytania HTTP, czyli niewidoczne w pasku adresu.
Najczęściej używana metoda, gdy przesyłasz dane osobowe, logowanie, rejestrację itp.

Cechy:

Bezpieczniejsza (bo dane nie widać w URL).
Pozwala wysyłać dużo danych (np. długie teksty, pliki).
Używana w formularzach logowania, kontaktowych, rejestracji.

Przykład:

<label for="email">Email:</label>

<button type="submit">Wyślij</button>

</form>

Dane (np. [email protected]) zostaną wysłane w ciele zapytania, a nie w adresie URL.

method="GET"

Opis:

Dane są dołączane do adresu strony jako parametry w URL.
Używana głównie do pobierania danych, np. wyszukiwania, filtrowania.

Cechy:

Dane są widoczne w pasku adresu (np. [email protected]).
Nie nadaje się do przesyłania haseł i danych prywatnych.

Ograniczona długość danych (do ok. 2000 znaków).

LISTY I TABELE

Znacznik / Atrybut	Znaczenie	Użycie
<ul> rodzic	lista nieuporządkowana (kropki)	<ul><li>...</li></ul>
<ol> rodzic	lista uporządkowana (numery, litery)	<ol><li>...</li></ol>
<li>	element listy	wewnątrz <ul> lub <ol>
type	typ numeracji (1, A, a, I, i)	w <ol>
start	numer startowy listy	w <ol>
value	numer danego elementu	w <li>
<dl> rodzic	lista opisowa	<dt> + <dd>
<dt>	pojęcie (tytuł)	wewnątrz <dl>
<dd>	opis pojęcia	wewnątrz <dl>

Znacznik	Znaczenie	Gdzie się używa
<table>	Tworzy całą tabelę	Zawiera wszystkie elementy tabeli
<caption>	Dodaje tytuł tabeli (opis)	Tuż po otwarciu <table>
<tr>	Table Row – wiersz tabeli	Wewnątrz <table>
<th>	Table Header – nagłówek kolumny lub wiersza	Wewnątrz <tr>
<td>	Table Data – komórka z danymi	Wewnątrz <tr>
<thead>	Zawiera nagłówek tabeli	Nad <tbody>
<tbody>	Zawiera główną treść (wiersze z danymi)	Między <thead> a <tfoot>
<tfoot>	Stopka tabeli (np. podsumowanie)	Na końcu tabeli
<colgroup>	Grupuje kolumny (do stylowania lub atrybutów)	Po <caption>
<col>	Definiuje jedną kolumnę w <colgroup>	Wewnątrz <colgroup>

Inne ważne informacje:

Atrybuty dodaje się do dzieci nie do znaczników ‘rodziców’

W liście nieuporządkowanej punktatory są domyślne, sublista – punktatory otwarte

Lista zagnieżdżona = <ul> lub <ol> w <li>

Breadcrumbs – ścieżka nawigacji użytkownika

srcset - wskazuje alternatywne źródła obrazu dla różnych rozdzielczości

Można podać również link np. do regulaminu, sposób zawarcia linku w słowie:

<a href="/terms">regulamin</a>

FORMULARZ z przesyłaniem plików i kolejne typy input

form action="/upload" method="post" enctype="multipart/form-data">
        <!-- File input -->
        <h2>Przesyłanie plików</h2>
        
        <div>
            <label for="avatar">Avatar (tylko obrazy):</label>
            <input type="file" 
                   id="avatar" 
                   name="avatar" 
                   accept="image/*">
        </div>

<Label for=> - atrybut for="avatar" łączy etykietę z polem <input id="avatar">, co sprawia, że kliknięcie w tekst etykiety też aktywuje wybór pliku.

enctype="multipart/form-data” – atrybut, który określa sposób kodowania danych formularza. Bez tego przeglądarka nie dołączy plików do zapytania HTTP

<input type="file" - określa to, że pole służy do wyboru pliku

accept="image/*" - ogranicza wybór plików do obrazów (jpg, png, gif, itd.). Przeglądarka pokaże tylko te typy w oknie wyboru.

accept=".pdf" - ogranicza wybór plików do konkretnego formatu, w tym przypadku plików pdf

dodanie na koniec <input> atrybutu multiple – pozwala wybrać więcej niż jeden plik z komputera

pole freetekst, other – to już w JS

inne typy input – natywne, zdefiniowane w HTML (niepotrzebne tu biblioteki JS), używane do np. rezerwacji (oferują określone sposoby zapisu np. daty, czasu) to:

type="date”, "datetime-local" (łączenie daty i czasu lokalnego, bez strefy czasowej) "time”, "month” (w tych związanych z czasem możemy określać zakres czasu używając atrybutów min=, max=), "color”(tu picker koloru, wartości RGB i HEX),

*stare przeglądarki zdegradują ‘podpowiedzi’ do pustego pola tekstowego

*do uaktualniania dat bieżących – JS (żeby ograniczyć wybór dat)

PODSUMOWANIE / WALIDACJA FORMULARZY

TABELA TYPOWYCH input + atrybuty + opis

Typ `input`	Główne atrybuty	Co robi?	Walidacja przeglądarki?
text	`maxlength`, `placeholder`, `required`, `pattern`	Zwykłe pole tekstowe	❌ nie, chyba że użyjesz `pattern`
email	`required`, `multiple`, `placeholder`	Pole na email	✅ tak – sprawdza format `@`
password	`maxlength`, `placeholder`, `required`	Pole hasła (ukryte znaki)	❌ brak automatycznej jakości hasła
number	`min`, `max`, `step`, `required`	Liczba z możliwością strzałek	✅ tak
tel	`pattern`, `required`, `placeholder`	Numer telefonu	❌ brak walidacji bez `pattern`
url	`required`, `placeholder`	Link URL	✅ tak
search	`placeholder`	Pole wyszukiwania	❌
date	`min`, `max`, `required`	Wybór daty z kalendarza	✅
time	`min`, `max`, `step`	Godzina	✅
datetime-local	`min`, `max`	Data + godzina	✅
month	`min`, `max`	Wybór miesiąca	✅
week	`min`, `max`	Wybór tygodnia	✅
checkbox	`checked`, `required`, `value`	Pole wielokrotnego wyboru	❌ brak walidacji poza `required`
radio	`name`, `checked`, `required`, `value`	Jedna opcja z wielu (grupa)	❌
file	`accept`, `multiple`, `required`	Wybór pliku	❌ (kontroluje tylko rozszerzenia)
range	`min`, `max`, `step`, `value`	Suwak wartości	❌
color	`value`	Wybór koloru	❌
hidden	`value`	Ukryte dane wysyłane w formularzu	n/d
submit	`value`	Przycisk wysyłania formularza	n/d
reset	`value`	Reset formularza	n/d
button	`value`, `onclick`	Przyciski niestandardowe	n/d
image	`src`, `alt`, `width`, `height`	Przycisk graficzny wysyłający formularz	n/d

Wyjaśnienie wybranych atrybutów:

Atrybut: step mówi przeglądarce, o ile ma zwiększać lub zmniejszać wartość przy użyciu strzałek (↑ / ↓) lub suwaka.

Wartość może być:

liczbą całkowitą (step="1")
ułamkiem dziesiętnym

Atrybut placeholder ustawia tekst podpowiedzi (szary tekst) wewnątrz pola, który znika, gdy użytkownik zacznie pisać. Pokazuje przykładowy format danych, jakich oczekujesz.

dla pól (input) o typie = ”text” mamy kolejne atrybuty:

Id, name, min, max, minlenght, maxlenght (minimalna, maksymalna długość tekstu),pattern (walidacja wzorca – np. numeru telefonu wg ustalonego zapisu: pattern="..." — zawiera wyrażenie regularne (regex), które określa, jakie dane są dozwolone; title="..." — (opcjonalnie) ustawia komunikat, który pojawia się, gdy użytkownik wpisze coś niepoprawnego), required

https://regex-generator – generator regex

Atrybuty input dotyczące logiki:

Atrybut	Co robi?
required	Pole musi być wypełnione
readonly	Pole nie może być zmienione
disabled	Pole jest całkowicie wyłączone (nie wysyłane w formularzu)
name	Klucz pod jakim dane pojawią się na serwerze
value	Wartość pola (domyślna lub zaznaczona)

LISTY ROZWIJANE

a) Bez domyślnej wartości


c)	            <label for="country">Wybierz kraj:</label>
d)	            <select id="country" name="country" required>
e)	                <option value="">-- Wybierz kraj --</option>
f)	                <option value="pl">Polska</option>
g)	                <option value="de">Niemcy</option>

<label for="country">Wybierz kraj:</label> - to etykieta (opis) dla pola formularza.

<select> - pole listy rozwijanej, <option> - jedna z opcji do wyboru

pierwsza opcja jest ustawiana jako pusta (same ””)

Atrybut for="country" łączy etykietę z elementem <select id="country">.

Dzięki temu kliknięcie w tekst „Wybierz kraj” również aktywuje rozwijaną listę.

selected- wstępne zaznaczenie, required – obowiązkowe pole, disabled – wyłączone pole (atrybuty w option i nie tylko tu); multiple – atrybut wielokrotnego wyboru (dla select)

Znacznik <optgroup> w HTML służy do grupowania opcji (<option>) w rozwijanych listach (<select>). Dzięki niemu można uporządkować długie listy — np. kraje według kontynentów, miasta według regionów

HTML podstawy

1. `<area>`

2. `<base>`

3. `<br>`

4. `<col>`

5. `<embed>`

6. `<hr>`

7. `<img>`

8. `<input>`

9. `<link>`

10. `<meta>`

11. `<param>`

12. `<source>`

13. `<track>`

14. `<wbr>`

Rozwinięcie gry

HTML: Listy i nawigacja

1. <area>

2. <base>

3. <br>

4. <col>

5. <embed>

6. <hr>

7. <img>

8. <input>

9. <link>

10. <meta>

11. <param>

12. <source>

13. <track>

14. <wbr>

Rozwinięcie gry

HTML: Listy i nawigacja

1. `<area>`

2. `<base>`

3. `<br>`

4. `<col>`

5. `<embed>`

6. `<hr>`

7. `<img>`

8. `<input>`

9. `<link>`

10. `<meta>`

11. `<param>`

12. `<source>`

13. `<track>`

14. `<wbr>`