Ćwiczenia powtórzeniowe z HTML i CSS. - Powtórzenie podstaw formularzy w html

Zakres materiału:

  1. Tworzenie formularzy:
  • Znacznik <form> jako kontener formularza.
  • Znaczniki <input>, <select>, <textarea> do tworzenia różnych typów pól formularzy.
  • Atrybuty: type (np. tekst, e-mail, hasło, submit), name, placeholder, value, required, maxlength.
  1. Walidacja pól formularza:
  • Atrybuty required (pole obowiązkowe), maxlength (maksymalna liczba znaków), min i max (dla pól liczbowych).
  • Walidacja wbudowana w przeglądarkę vs. walidacja po stronie serwera.

Przykład 1: Prosty formularz kontaktowy

Przykład kodu:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Formularz kontaktowy</title>
</head>
<body>
<h2>Formularz kontaktowy</h2>
<form action="/submit" method="POST">
<label for="name">Imię:</label>
<input type="text" id="name" name="name" placeholder="Wpisz swoje imię" required><br><br>

<label for="email">E-mail:</label>
<input type="email" id="email" name="email" placeholder="Wpisz swój e-mail" required><br><br>

<label for="message">Wiadomość:</label><br>
<textarea id="message" name="message" placeholder="Wpisz wiadomość" rows="5" required></textarea><br><br>

<button type="submit">Wyślij</button>
</form>
</body>
</html>

Opis przykładu:

  • Formularz zawiera pole tekstowe na imię (<input type="text">), pole na adres e-mail (<input type="email">), oraz pole tekstowe do wpisania wiadomości (<textarea>).
  • Użyto atrybutu required, aby użytkownik nie mógł wysłać formularza bez wypełnienia obowiązkowych pól.

Ćwiczenie 1: Zaprojektuj formularz kontaktowy

Zadanie:

  • Uczniowie mają zaprojektować formularz kontaktowy zawierający następujące pola:
  • Imię (pole tekstowe, wymagane),
  • E-mail (pole tekstowe z walidacją formatu e-mail, wymagane),
  • Wiadomość (pole tekstowe, maksymalnie 500 znaków, wymagane),
  • Przycisk do wysłania formularza.

Wymagania:

  • Użycie atrybutu required dla imienia i e-maila.
  • Zastosowanie atrybutu maxlength do ograniczenia liczby znaków w wiadomości.

Przykład 2: Formularz z dodatkowymi polami

Przykład kodu:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Formularz rejestracyjny</title>
</head>
<body>
<h2>Formularz rejestracyjny</h2>
<form action="/register" method="POST">
<label for="username">Nazwa użytkownika:</label>
<input type="text" id="username" name="username" placeholder="Wpisz swoją nazwę użytkownika" required maxlength="20"><br><br>

<label for="password">Hasło:</label>
<input type="password" id="password" name="password" placeholder="Wpisz hasło" required minlength="6"><br><br>

<label for="age">Wiek:</label>
<input type="number" id="age" name="age" min="18" max="100" required><br><br>

<label for="gender">Płeć:</label>
<select id="gender" name="gender" required>
        <option value="">--Wybierz--</option>
        <option value="male">Mężczyzna</option>
        <option value="female">Kobieta</option>
        <option value="other">Inne</option>
</select><br><br>

<button type="submit">Zarejestruj</button>
</form>
</body>
</html>

Opis przykładu:

  • Formularz zawiera dodatkowe pola, takie jak password (pole na hasło), number (pole na wiek z ograniczeniem minimalnym i maksymalnym) oraz select (lista rozwijana z opcjami wyboru płci).
  • Wprowadzone ograniczenia: pole tekstowe na nazwę użytkownika ma maksymalną długość 20 znaków, hasło wymaga minimum 6 znaków, a wiek musi być liczbą z zakresu 18–100.

Ćwiczenie 2: Formularz rejestracyjny

Zadanie:

  • Uczniowie mają zaprojektować formularz rejestracyjny zawierający:
  • Pole tekstowe na nazwę użytkownika (wymagane, maksymalnie 20 znaków),
  • Pole na hasło (wymagane, minimum 6 znaków),
  • Pole na wiek (liczba w zakresie od 18 do 100, wymagane),
  • Listę rozwijaną do wyboru płci,
  • Przycisk do wysłania formularza.

Wymagania:

  • Zastosowanie walidacji dla wszystkich pól formularza, w tym ograniczenia dla pola age oraz pola password.
  • Użycie atrybutu required dla każdego pola.