🧱

Модуль 1. Введение и HTML

Занятие 10
Формы

Сегодня мы сделаем анкету «Мои интересы» с полями ввода, списком выбора и кнопкой.

👀

Сегодня сделаем вот такое

📝

Формы — анкеты сайта

  • 🔍 Поиск
  • 🔑 Вход в дневник
  • 🍕 Заказ пиццы
  • 💬 Комментарии и опросы

Форма = способ сайта получить данные от человека.

🔤

<input> — сто лиц одного тега

Вид поля меняет атрибут type:

text · email · password · number · date · color · range

Попробуй поля справа!

<p>Имя: <input type="text" placeholder="Лиза"></p>
<p>Пароль: <input type="password"></p>
<p>Возраст: <input type="number" min="7" max="18"></p>
<p>День рождения: <input type="date"></p>
<p>Любимый цвет: <input type="color"></p>
<p>Громкость: <input type="range"></p>
☑️

checkbox или radio?

☑️ checkbox
можно несколько
🔘 radio
только один
одинаковый name!
<p>Увлечения:</p>
<label><input type="checkbox"> Спорт</label>
<label><input type="checkbox"> Музыка</label>

<p>Класс:</p>
<label><input type="radio" name="grade"> 7А</label>
<label><input type="radio" name="grade"> 7Б</label>
🏷

<label> — подпись к полю

  • for у подписи = id у поля
  • Клик по подписи → курсор в поле
  • Программа для незрячих назовёт поле

placeholder — не подпись! Он исчезает при вводе.

<label for="city">Город:</label>
<input type="text" id="city">
📋

textarea, select, button

  • textarea — длинный текст
  • select + option — выпадающий список
  • button — кнопка
<p>Любимый предмет:
  <select>
    <option>Информатика</option>
    <option>История</option>
  </select>
</p>
<p>О себе:<br><textarea rows="3"></textarea></p>
<button>Отправить</button>
❗

required и placeholder

  • required — обязательное поле
  • placeholder — серая подсказка

Нажми «Отправить», не заполнив поле, — браузер остановит тебя.

<form>
  <label for="n">Имя:</label>
  <input id="n" placeholder="Например, Лиза" required>
  <button>Отправить</button>
</form>
🛡

Осторожно с формами!

  • ❓ Зачем сайту эти данные?
  • 🚫 Не вводи пароли и адрес на незнакомых сайтах
  • 🎁 «Выиграй телефон — введи номер карты» — обман!
  • 🙅 В своих анкетах не спрашивай личное
🃏

Запомни!

  • <form>Форма
  • <label for="name">Подпись к полю с id="name"
  • <input type="text">Текстовое поле
  • type="checkbox" / "radio"Флажок / переключатель
  • <textarea>Большое поле
  • <select><option>Выпадающий список
  • requiredОбязательно заполнить
⌨️

Практика: Анкета «Мои интересы»

  1. Добавь поле «Имя» с label и placeholder.
  2. Сделай выпадающий список «Любимый предмет» из 4 вариантов.
  3. Добавь три checkbox «Чем увлекаюсь»: спорт, музыка, рисование.
  4. Добавь textarea «О себе» и кнопку «Отправить».

🚀 Со звёздочкой: Добавь поля type="color", type="range" и группу radio «Сколько часов в неделю ты занимаешься хобби».

🔒 Без входа в аккаунт работу из практики нельзя сохранить на сайте, а занятие — отметить пройденным.

🪞

Подведём итоги

  • Что нового я сегодня узнал(а)?
  • Что получилось лучше всего?
  • Где было трудно и что поможет в следующий раз?

✨ По желанию: Придумай 5 вопросов для анкеты на своём будущем сайте.