Урок 11. Розширена робота з формами: Підказки, автозаповнення, вимоги до полів

План уроку: Розширена робота з формами (25-30 хвилин)

1. Вступ до розширеної роботи з формами (5 хвилин)

• Форми — це важливий елемент взаємодії з користувачами на сайті. Окрім базових полів для введення, ми можемо покращити досвід користувачів, використовуючи підказки (placeholders), функції автозаповнення та встановлюючи вимоги до полів.
• Це допоможе уникнути помилок при введенні даних та зробить форми більш зрозумілими.

2. Підказки в полях (5 хвилин)

• Підказки (placeholders) — це текст, що відображається всередині поля до моменту, коли користувач починає вводити дані.
• Вони використовуються для того, щоб пояснити, який тип даних необхідно ввести у конкретне поле.

Приклад використання підказок:

<form>
  <label for="name">Ваше ім'я:</label>
  <input type="text" id="name" name="name" placeholder="Введіть ваше ім'я">

  <label for="email">Ваш email:</label>
  <input type="email" id="email" name="email" placeholder="example@email.com">
</form>

• Пояснення:
  • Атрибут placeholder додає текст всередині поля, який зникає, коли користувач починає вводити свої дані.

3. Автозаповнення (autocomplete) (5 хвилин)

• Автозаповнення (autocomplete) дозволяє браузерам зберігати інформацію, яку користувачі часто вводять у поля форм, і автоматично заповнювати ці поля у майбутньому.
• Це може значно прискорити процес введення даних і підвищити зручність користування формою.

Приклад автозаповнення:

<form autocomplete="on">
  <label for="name">Ваше ім'я:</label>
  <input type="text" id="name" name="name" autocomplete="name">

  <label for="email">Ваш email:</label>
  <input type="email" id="email" name="email" autocomplete="email">
</form>

• Пояснення:
  • Атрибут autocomplete може бути встановлений для форми або для окремих полів. Якщо він увімкнений, браузер запам'ятовує введені дані і пропонує їх для автозаповнення наступного разу.

4. Вимоги до полів (5-7 хвилин)

• Ви можете встановлювати певні вимоги до полів, щоб гарантувати правильність введення даних.
• Для цього використовують такі атрибути, як required (обов'язкове поле), minlength (мінімальна довжина), maxlength (максимальна довжина), pattern (шаблон для введення) та інші.

Приклад встановлення вимог:

<form>
  <label for="username">Ім'я користувача:</label>
  <input type="text" id="username" name="username" required minlength="3" maxlength="15" placeholder="від 3 до 15 символів">

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

• Пояснення:
  • Атрибут required робить поле обов'язковим для заповнення перед відправкою форми.
  • minlength і maxlength обмежують кількість символів, які можуть бути введені в поле.
  • pattern дозволяє створювати шаблони для введення даних, наприклад, формат номера телефону чи поштового індексу.

5. Практична вправа: Створення розширеної форми (7 хвилин)

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

Приклад коду для практики:

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

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

  • Як додавати підказки до полів за допомогою атрибута placeholder.
  • Як ввімкнути автозаповнення форми за допомогою атрибута autocomplete.
  • Як встановлювати вимоги до полів для введення за допомогою required, minlength, maxlength, pattern.
    
    

• Запитання для обговорення:

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

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

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

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