Tabele, formularze i znaczniki semantyczne

Czego się nauczysz

Umiesz już zbudować prostą stronę z tekstem, listami i linkami. Teraz organizujemy większe fragmenty: dane w tabeli, dane od użytkownika w formularzu i czytelną strukturę całej strony.

Po tej lekcji:

• zbudujesz tabelę z wierszem nagłówkowym i danymi,
• stworzysz formularz z polem tekstowym, polem wieloliniowym i przyciskiem,
• uporządkujesz stronę znacznikami header, nav, main, section, footer,
• wyjaśnisz różnicę między head a header.

Tabele – dane w wierszach i kolumnach

Tabela służy do prezentowania danych, które naprawdę mają układ wierszy i kolumn – na przykład plan lekcji albo cennik.

<table>
    <tr>
        <th>Przedmiot</th>
        <th>Ocena</th>
    </tr>
    <tr>
        <td>Informatyka</td>
        <td>5</td>
    </tr>
</table>

• <table> to cała tabela.
• <tr> (table row) to jeden wiersz.
• <th> to komórka nagłówkowa – pogrubiona.
• <td> to zwykła komórka z danymi.

Dawniej tabel używano też do układania całej strony. Dziś to zły nawyk – od układu strony jest CSS.

Formularze – dane od użytkownika

Formularz pozwala użytkownikowi coś wpisać albo wybrać: imię, wiadomość, hasło. Sam HTML nie decyduje, co zrobić z wpisanymi danymi (to będzie temat PHP), ale poprawnie je zbiera.

<form>
  <label for="imie">Imię:</label>
  <input type="text" id="imie" name="imie">
  <label for="wiadomosc">Wiadomość:</label>
  <textarea id="wiadomosc" name="wiadomosc"></textarea>
  <button type="submit">Wyślij</button>
</form>

• <input type="text"> to pole jednoliniowe, <textarea> – wieloliniowe.
• <label for="..."> powiązany z id pola sprawia, że kliknięcie etykiety ustawia kursor w polu. To ważne dla wygody i dostępności.

Typy pól input

• type="text" – zwykły tekst jednoliniowy,
• type="password" – hasło, wpisywane znaki są ukryte,
• type="email" – adres e-mail, przeglądarka sama sprawdza format,
• type="checkbox" – pole wyboru tak/nie,
• type="radio" – wybór jednej opcji z grupy.

Pola radio należące do tej samej grupy muszą mieć identyczny atrybut name. Dzięki temu przeglądarka wie, że wybór jednego odznacza pozostałe.

Znaczniki semantyczne – czytelna struktura strony

Przed HTML5 do wszystkiego używano <div> – znacznika bez własnego znaczenia. HTML5 dodał znaczniki, które nazywają swoją rolę.

<header>...nagłówek strony...</header>
<nav>...menu nawigacyjne...</nav>
<main>
  <section>...wydzielona sekcja...</section>
</main>
<footer>...stopka...</footer>

Dzięki nim kod jest czytelniejszy, a czytniki ekranu rozpoznają strukturę strony.

Częsty błąd: head to nie header

To dwa zupełnie różne znaczniki, mimo podobnej nazwy.

• <head> (z lekcji 1) to niewidoczne metadane na samym początku dokumentu.
• <header> to widoczny nagłówek strony wewnątrz <body> – na przykład z tytułem i menu.

Spróbuj sam

Rozbuduj swoją stronę z poprzedniej lekcji: dodaj <header> z tytułem i menu, sekcję z tabelą ocen, sekcję z formularzem i <footer>. Spróbuj zrobić to bez ani jednego <div>.

Na karcie pracy do tej lekcji:

• zadania sprawdzające 1–3 – własna tabela, formularz, znaczniki semantyczne,
• zadania domowe 1–5 – kolejne pola formularza i struktura semantyczna.

Sprawdź się

• Zbuduję tabelę z wierszem nagłówkowym (th) i danymi (td).
• Stworzę formularz z polem tekstowym, polem wieloliniowym i przyciskiem.
• Uporządkuję stronę znacznikami header, nav, main, section, footer.
• Wyjaśnię różnicę między head a header.

Na następnej lekcji: CSS – selektory, model pudełkowy, kolory i czcionki. W końcu nadamy tym stronom kolor.