Listy, tabele i formularze w HTML

Tworzenie list w HTML

W tej lekcji wyjaśnimy, jak formatować tekst w HTML przy użyciu różnych tagów, aby nadać mu odpowiedni wygląd.

Listy są jednym z najbardziej podstawowych elementów używanych na stronach internetowych do prezentacji zbiorów informacji w sposób uporządkowany lub nieuporządkowany.

HTML pozwala na tworzenie dwóch głównych typów list:

Lista nieuporządkowana (<ul>) – Używana, gdy elementy nie muszą mieć określonej kolejności, np. lista punktów.
Lista uporządkowana (<ol>) – Używana, gdy elementy muszą być wyświetlane w określonej kolejności, np. lista kroków do wykonania.

Każdy element listy jest oznaczony tagiem <li>, bez względu na to, czy lista jest uporządkowana czy nie.

Przykład listy nieuporządkowanej:

<ul>
  <li>Pierwszy element</li>
  <li>Drugi element</li>
  <li>Trzeci element</li>
</ul>

Przykład listy uporządkowanej:

<ol>
  <li>Pierwszy krok</li>
  <li>Drugi krok</li>
  <li>Trzeci krok</li>
</ol>

Listy mogą być również zagnieżdżane, czyli jedna lista może znajdować się wewnątrz innej:

<ul>
  <li>Pierwszy element</li>
  <li>Drugi element
    <ul>
      <li>Zagnieżdżony pierwszy</li>
      <li>Zagnieżdżony drugi</li>
    </ul>
  </li>
  <li>Trzeci element</li>
</ul>

Listy to świetny sposób na porządkowanie treści w sposób klarowny i przejrzysty.

Tworzenie tabel w HTML

Tabele pozwalają na wyświetlanie danych w formie siatki, co jest szczególnie przydatne przy prezentowaniu informacji w formacie kolumn i wierszy.

Aby utworzyć tabelę, używamy tagu <table>, a każdy wiersz tabeli oznaczamy tagiem <tr> (table row). Wewnątrz wiersza umieszczamy komórki, które tworzymy za pomocą tagów <td> (table data) dla zwykłych komórek i <th> (table header) dla nagłówków kolumn.

Przykład prostej tabeli:

<table>
  <tr>
    <th>Nagłówek 1</th>
    <th>Nagłówek 2</th>
  </tr>
  <tr>
    <td>Dane 1</td>
    <td>Dane 2</td>
  </tr>
  <tr>
    <td>Dane 3</td>
    <td>Dane 4</td>
  </tr>
</table>

W powyższym przykładzie mamy tabelę z dwoma nagłówkami i dwoma wierszami danych. Każdy wiersz zawiera dwie komórki danych. Tabele można formatować, aby były bardziej czytelne, ale na razie skupiamy się na podstawowej strukturze.

Formularze w HTML

Formularze są nieodzowną częścią stron internetowych, ponieważ pozwalają użytkownikom na interakcję z witryną, np. poprzez przesyłanie danych.

Formularz tworzymy za pomocą tagu <form>. Wewnątrz formularza umieszczamy różne pola, które użytkownik może wypełnić. Najczęściej używane elementy formularza to:

Pole tekstowe (<input type="text">) – Pozwala użytkownikowi wpisać krótki tekst.
Pole typu password (<input type="password">) – Podobne do pola tekstowego, ale wpisywany tekst jest ukrywany.
Przycisk wysyłania (<input type="submit">) – Przycisk, który wysyła formularz do serwera.

Oto przykład prostego formularza:

<form action="/submit" method="post">
  <label for="name">Imię:</label>
  <input type="text" id="name" name="name">
  
  <label for="password">Hasło:</label>
  <input type="password" id="password" name="password">
  
  <input type="submit" value="Wyślij">
</form>

Atrybut action określa, dokąd zostaną wysłane dane po kliknięciu przycisku “Wyślij”.
Atrybut method określa, jak dane zostaną przesłane: post to najczęściej stosowana metoda do przesyłania danych w bezpieczny sposób.

Formularze mogą zawierać także inne elementy, takie jak pola wyboru, przyciski radiowe, rozwijane listy i teksty objaśniające.

Ćwiczenie – Tworzymy listę, tabelę i formularz

Po nauce tworzenia list, tabel i formularzy, czas na ćwiczenie praktyczne.

Zadanie: Stwórz stronę, która zawiera listę ulubionych filmów, tabelę z danymi kontaktowymi oraz prosty formularz do zapisania się do newslettera.

<!DOCTYPE html>
<html>
<head>
  <title>Strona z listą, tabelą i formularzem</title>
</head>
<body>
  <h1>Moje ulubione filmy</h1>
  <ul>
    <li>Film 1</li>
    <li>Film 2</li>
    <li>Film 3</li>
  </ul>

  <h2>Dane kontaktowe</h2>
  <table>
    <tr>
      <th>Imię</th>
      <th>Email</th>
    </tr>
    <tr>
      <td>Jan Kowalski</td>
      <td>jan@example.com</td>
    </tr>
    <tr>
      <td>Anna Nowak</td>
      <td>anna@example.com</td>
    </tr>
  </table>

  <h2>Zapisz się do newslettera</h2>
  <form action="/submit" method="post">
    <label for="email">Twój email:</label>
    <input type="email" id="email" name="email">
    <input type="submit" value="Zapisz się">
  </form>
</body>
</html>

Wypełnij kod, wstaw dane i przetestuj w przeglądarce, aby zobaczyć, jak działa strona!

Gratulacje! Ukończyłeś lekcję 3.
Przejdź teraz do lekcji 4 >> Wprowadzenie do CSS