Zadanie - menu restauracja

Treść zadania:

Proszę stworzyć tabelę z menu restauracji

• Tabela powinna mieć nagłówki: Kategoria, Danie, Opis, Cena.

• Wykorzystaj rowspan, aby połączyć w pionie komórki z tą samą kategorią (np. „Zupy”, „Dania główne”).

• Wykorzystaj colspan, aby stworzyć wiersz dla „Zestawu dnia” obejmujący kilka kolumn.

• W tabeli umieść co najmniej po 2 pozycje w każdej kategorii (zupy, dania główne, desery).

2. Formularz zamówienia

Pod tabelą dodaj formularz, w którym użytkownik będzie mógł złożyć zamówienie. Formularz powinien zawierać:

• Pole text do wpisania imienia i nazwiska,

• Pole email do podania adresu e-mail,

• Pole tel do wpisania numeru telefonu,

• Zestaw przycisków radio do wyboru jednego dania głównego,

• Pola checkbox do zaznaczenia dodatkowych opcji (np. napój, deser),

• Pole date do wyboru daty odbioru zamówienia,

• Pole number do podania liczby porcji,

• Przycisk submit do wysłania formularza.

3. Dodatkowe wymagania

• Strona powinna posiadać nagłówki (<h1>, <h2>) opisujące sekcje: „Menu restauracji” i „Formularz zamówienia”.

• Użyj atrybutu border="1" w tabeli, aby była widoczna.

• Zadbaj, żeby formularz zawierał etykiety (<label>) powiązane z polami.

Użyj następujących type input do obsługi formularza:

• type="text"

  • Pole tekstowe do wpisania krótkich danych (np. imię i nazwisko).

  • Umożliwia wprowadzenie dowolnych znaków.

• type="email"

  • Pole do wprowadzania adresu e-mail.

  • Przeglądarka sprawdza, czy wpisany tekst ma poprawny format adresu (np. cos@domena.com).

• type="tel"

  • Pole do wpisywania numeru telefonu.

  • Działa podobnie do text, ale na urządzeniach mobilnych pokazuje klawiaturę numeryczną.

• type="radio"

  • Przycisk opcji – pozwala wybrać jedną wartość spośród kilku dostępnych.

  • Wszystkie przyciski radiowe z tą samą nazwą (name="danie") są grupowane razem.

• type="checkbox"

  • Pole wyboru – pozwala zaznaczyć dowolną liczbę opcji (np. dodatkowy napój, deser).

  • Każdy checkbox działa niezależnie od innych.

• type="date"

  • Pole do wyboru daty z wbudowanego kalendarza.

  • Ułatwia wprowadzanie poprawnych dat.

• type="number"

  • Pole numeryczne (np. ilość porcji).

  • Pozwala wpisywać tylko liczby oraz ustawić zakres (min, max).

  • Zawiera strzałki ↑↓ do zmiany wartości.

• type="submit"

  • Przycisk wysyłający formularz.

  • Po kliknięciu dane z formularza są wysyłane (np. do serwera lub dalej przetwarzane).

Przykład użycia type input: 

<label><input type=”radio” name=”danie” value=”schabowy”> Schabowy</label><br>

Efekt końcowy strony: