Урок 10. Форми (частина 2): Валідація форм, поля введення даних (email, date, password)

План уроку: Форми (частина 2) — валідація форм, поля введення даних (email, date, password) (25-30 хвилин)

1. Вступ: Що таке валідація форм (2-3 хвилини)

• З цього уроку ви дізнаєтесь, як забезпечити правильне введення даних у формах за допомогою вбудованих механізмів валідації HTML. Валідація дозволяє перевіряти, чи відповідає введена інформація вимогам, ще до того, як вона буде відправлена.

2. Поля для введення специфічних типів даних (10 хвилин)

• Ціль: Ознайомити учнів із спеціалізованими полями введення в HTML, такими як поля для електронної пошти, дати і паролів.

Поле для введення електронної пошти: Тег <input type="email">:

• Це поле автоматично перевіряє, чи введена адреса електронної пошти має правильний формат (наприклад, чи є символ @).

  • Приклад:

    <form>
      <label for="email">Ваш email:</label>
      <input type="email" id="email" name="email" placeholder="Введіть свою електронну пошту">
    </form>
    

Поле для введення дати: Тег <input type="date">:

• Це поле дозволяє користувачеві обирати дату з календаря або вводити її вручну у форматі, який розпізнається браузером.

  • Приклад:

    <form>
      <label for="birthdate">Дата народження:</label>
      <input type="date" id="birthdate" name="birthdate">
    </form>
    

Поле для введення пароля: Тег <input type="password">:

• Поле для пароля приховує введені символи для безпеки. Введені дані виглядають як крапки або зірочки.

  • Приклад:

    <form>
      <label for="password">Пароль:</label>
      <input type="password" id="password" name="password">
    </form>
    

3. Валідація даних у формах (10 хвилин)

• Ціль: Навчити учнів проводити базову валідацію даних, введених у форму, використовуючи вбудовані механізми HTML.

Атрибут required:

• Забезпечує, що поле не залишиться порожнім. Якщо користувач не введе дані, браузер не дозволить відправити форму.

  • Приклад:

    <form>
      <label for="email">Ваш email:</label>
      <input type="email" id="email" name="email" required placeholder="Введіть свою електронну пошту">
    </form>
    

Атрибут minlength і maxlength:

• Контролюють мінімальну та максимальну довжину тексту, який можна ввести в поле.

  • Приклад:

    <form>
      <label for="password">Пароль (мінімум 8 символів):</label>
      <input type="password" id="password" name="password" minlength="8" required>
    </form>
    

Атрибут pattern:

• Використовується для перевірки введених даних за певним регулярним виразом. Наприклад, для перевірки формату номера телефону або поштового індексу.

  • Приклад:

    <form>
      <label for="phone">Номер телефону (у форматі 123-456-7890):</label>
      <input type="text" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
    </form>
    

Атрибут placeholder:

• Дає користувачам підказку, що саме потрібно вводити в полі (наприклад, формат або приклад даних).

  • Приклад:

    <form>
      <label for="phone">Номер телефону:</label>
      <input type="text" id="phone" name="phone" placeholder="123-456-7890">
    </form>
    

4. Практика: Створення форми з полями введення даних та валідацією (10 хвилин)

• Ціль: Закріпити навички роботи з полями введення даних і валідацією.

Завдання:

• Створити форму для реєстрації, яка включатиме:
  • Поле для введення електронної пошти.
  • Поле для введення дати народження.
  • Поле для введення пароля з вимогою мінімальної кількості символів.
  • Додати валідацію для перевірки, що поля не порожні, а пароль відповідає вимогам.

Приклад завдання:

5. Підсумок і обговорення (5 хвилин)

• Ціль: Підтвердити розуміння учнів про спеціалізовані поля введення даних та механізми валідації.

• Що повторити:

  • Як працюють різні типи полів введення.
  • Як забезпечити правильність введення даних за допомогою атрибутів required, pattern, minlength.
    
    

• Запитання:

  • Як перевірити, що користувач ввів дійсну електронну пошту?
  • Що робить атрибут required?
  • Як обмежити мінімальну кількість символів для поля введення пароля?

Домашнє завдання

• Створити форму для реєстрації на подію. Вона повинна містити:
  • Поле для електронної пошти (з валідацією).
  • Поле для введення дати (наприклад, дати події).
  • Поле для пароля з мінімум 8 символами і підтвердженням пароля (введіть ще раз).

Цей урок допоможе учням створювати більш безпечні та функціональні форми, використовуючи спеціалізовані поля введення даних та валідацію, щоб уникати помилок при введенні інформації.