KURS HTML5, CSS3 I NOWOCZESNY JAVASCRIPT (ES6)
Intensywny, 24-godzinny kurs tworzenia nowoczesnych stron i aplikacji internetowych. Uczestnicy poznają aktualne standardy HTML5, stylowanie interfejsów w CSS3 oraz praktyczne zastosowanie JavaScript i ES6. Szkolenie łączy teorię z warsztatami, dzięki czemu każdy moduł kończy się praktycznym projektem lub ćwiczeniami.
Kurs przygotowuje do samodzielnego tworzenia semantycznych stron, interaktywnych komponentów oraz prostych aplikacji webowych działających również w trybie offline.
Moduł 5 — Formularze HTML5 (2 godz.)
1. Nowe typy pól formularzy
- Typy pól:
email, url, tel, number, date, color, range. - Ułatwiają wprowadzanie danych i poprawiają doświadczenie użytkownika.
2. Nowe atrybuty formularzy
- Atrybuty:
placeholder, required, autofocus, pattern, maxlength, min, max, step. - Umożliwiają lepszą kontrolę nad wprowadzanymi danymi.
3. Walidacja danych
- Walidacja wbudowana w przeglądarkę HTML5.
- Sprawdzanie poprawności e-mail, numerów, zakresów i wzorców (pattern).
Moduł 5 — Formularze HTML5 (2 godz.)
W tym module uczestnicy poznają nowoczesne możliwości formularzy HTML5, w tym nowe typy pól, atrybuty oraz wbudowaną walidację danych.
1. Nowe typy pól formularzy
HTML5 wprowadza różne typy pól, które pomagają w poprawnym wprowadzaniu danych i automatyzują formatowanie. Przykłady:
<form> <label>Email:</label> <input type="email" placeholder="wpisz e-mail" required> <label>Data urodzenia:</label> <input type="date"> <label>Kolor:</label> <input type="color" value="#0ea5a3"> <button type="submit">Wyślij</button> </form>
2. Nowe atrybuty formularzy
Atrybuty takie jak required, placeholder, autofocus czy pattern pozwalają lepiej kontrolować dane wprowadzane przez użytkownika.
<input type="text" placeholder="Twoje imię" required autofocus>
<input type="text" pattern="[A-Za-z]{3,}" title="Minimum 3 litery">
<input type="number" min="1" max="100" step="1">
3. Walidacja danych
Walidacja w HTML5 umożliwia sprawdzanie poprawności danych bez konieczności użycia JavaScript. Przeglądarka blokuje wysłanie formularza, jeśli dane są niepoprawne.
<form style="margin-bottom:20px;">
<label>Email:</label>
<input type="email" placeholder="Twój e-mail" required><br><br>
<label>Hasło (min. 6 znaków):</label>
<input type="password" pattern=".{6,}" title="Minimum 6 znaków" required><br><br>
<label>Wiek (18–100):</label>
<input type="number" min="18" max="100" required><br><br>
<label>Strona WWW:</label>
<input type="url" placeholder="https://example.com"><br><br>
<label>Data urodzenia:</label>
<input type="date" required><br><br>
<label>Kolor ulubiony:</label>
<input type="color" value="#0ea5a3"><br><br>
<label>Akceptuję regulamin:</label>
<input type="checkbox" required><br><br>
<button type="submit">Wyślij</button>
</form>
Po ukończeniu modułu uczestnicy będą potrafili korzystać z nowych typów pól, atrybutów formularzy oraz wbudowanej walidacji w HTML5, co znacznie ułatwia tworzenie poprawnych i przyjaznych dla użytkownika formularzy.