Урок 9. Форми (частина 1): Текстові поля, кнопки, чекбокси, радіо-кнопки

План уроку: Форми (частина 1) — текстові поля, кнопки, чекбокси, радіо-кнопки (25-30 хвилин)

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

• З цього уроку ви дізнаєтесь, як створювати форми для збирання даних від користувачів, використовуючи різні типи елементів: текстові поля, кнопки, чекбокси та радіо-кнопки. Форми використовуються для того, щоб користувачі могли вводити свої дані — наприклад, ім’я, електронну пошту, або обирати варіанти відповідей.

2. Тег <form>: основа для форми (5 хвилин)

• Ціль: Ознайомити учнів із базовим тегом для створення форми.

Тег <form>:

• Тег <form> огортає всі елементи форми і визначає, як дані з неї будуть відправлятись (це частково залежить від атрибутів, але про це детальніше в наступних уроках).

• Приклад:

  <form>
    <!-- Елементи форми будуть тут -->
  </form>
  

3. Текстові поля та кнопки (10 хвилин)

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

Тег <input type="text">:

• Використовується для створення текстового поля, де користувач може вводити текст.

• Може мати атрибут placeholder для підказки, що вводити у це поле.

  • Приклад:

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

Тег <input type="submit">:

• Створює кнопку для відправлення форми. Коли користувач натискає цю кнопку, дані форми відправляються (на сервер або обробляються jаvascript).

  • Приклад:

    <form>
      <input type="submit" value="Відправити">
    </form>
    

Тег <button>:

• Ще один спосіб створити кнопку, яка може виконувати різні дії (не тільки відправлення форми, але й запуск jаvascript).

  • Приклад:

    <button type="button">Натисніть мене</button>
    

4. Чекбокси та радіо-кнопки (10 хвилин)

• Ціль: Ознайомити учнів із елементами, що дозволяють вибирати кілька або один варіант.

Чекбокси: Тег <input type="checkbox">:

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

• Якщо чекбокс позначений, його значення буде відправлене при відправленні форми.

  • Приклад:

    <form>
      <label for="subscribe">Підписатись на новини</label>
      <input type="checkbox" id="subscribe" name="subscribe">
    </form>
    

Радіо-кнопки: Тег <input type="radio">:

• Радіо-кнопки дозволяють користувачеві вибрати лише один варіант із кількох.

• Радіо-кнопки з однаковим значенням атрибута name об'єднуються в одну групу, і лише один варіант у групі може бути обраний.

  • Приклад:

    <form>
      <p>Виберіть свій улюблений колір:</p>
      <label for="red">Червоний</label>
      <input type="radio" id="red" name="color" value="red">
      
      <label for="blue">Синій</label>
      <input type="radio" id="blue" name="color" value="blue">
      
      <label for="green">Зелений</label>
      <input type="radio" id="green" name="color" value="green">
    </form>
    

5. Практика: Створення форми з різними елементами (10 хвилин)

• Ціль: Закріпити навички створення різних елементів форм.

Завдання:

• Створити форму для реєстрації на вебсайті, яка містить:
  • Текстове поле для імені користувача.
  • Чекбокс для підтвердження згоди з правилами.
  • Радіо-кнопки для вибору статі.
  • Кнопку для відправлення форми.

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

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

• Ціль: Закріпити знання про основні елементи форм.

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

  • Як створювати текстові поля, чекбокси і радіо-кнопки.
  • Чим відрізняється використання кнопки <input type="submit"> від тегу <button>.

• Запитання:

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

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

• Створити форму для опитування, яка включатиме текстове поле для імені, чекбокс для підтвердження згоди на обробку даних, та радіо-кнопки для вибору улюбленого жанру музики.

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