0Pricing
HTML for Kids · Урок

Формы: собираем данные от пользователей

Создавайте простые формы с текстовыми полями, кнопками и другими элементами

«Формы: собираем данные от пользователей» — бесплатный урок HTML for Kids на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML for Kids, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML for Kids содержит 4 уроков всего.

Формы: сбор данных пользователя

Добро пожаловать в следующий урок! Сегодня мы узнаем, как создавать формы в HTML. Формы позволяют пользователям вводить данные, например имя или адрес электронной почты, на веб-странице.

Формы: собираем данные от пользователей — иллюстрация 1

Что такое формы?

Формы используются для сбора информации от пользователей. Например, при регистрации учётной записи вы заполняете форму с такими полями, как имя и адрес электронной почты.

Формы в HTML создаются с помощью тега <form>.

Создание простой формы

Форма создаётся с помощью тега <form>. Внутри этого тега добавляются поля ввода, кнопки и другие элементы.

Пример:

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" />
  <br />
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" />
  <br />
  <button type="submit">Submit</button>
</form>

Типы полей ввода формы

Формы HTML поддерживают разные типы полей ввода. Вот некоторые распространённые типы:

  • text: для ввода короткого текста
  • email: для адресов электронной почты
  • password: для паролей
  • number: для чисел

Пример:

<form>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" />
  <br />
  <label for="age">Age:</label>
  <input type="number" id="age" name="age" />
</form>

Добавление переключателей и флажков

Переключатели можно использовать для выбора одного варианта, а флажки — для выбора нескольких вариантов.

Пример:

<form>
  <p>Favorite Color:</p>
  <input type="radio" id="red" name="color" value="red" />
  <label for="red">Red</label>
  <br />
  <input type="radio" id="blue" name="color" value="blue" />
  <label for="blue">Blue</label>
  <br />

  <p>Hobbies:</p>
  <input type="checkbox" id="reading" name="hobby" value="reading" />
  <label for="reading">Reading</label>
  <br />
  <input type="checkbox" id="sports" name="hobby" value="sports" />
  <label for="sports">Sports</label>
</form>

Добавление раскрывающихся списков

С помощью тега <select> можно создать раскрывающийся список, из которого пользователи смогут выбирать варианты.

Пример:

<form>
  <label for="country">Select your country:</label>
  <select id="country" name="country">
    <option value="usa">United States</option>
    <option value="uk">United Kingdom</option>
    <option value="canada">Canada</option>
  </select>
</form>

Кнопки формы

Кнопки позволяют пользователям отправить или сбросить форму. Обычно для этого используется тег <button>.

Пример:

<form>
  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
</form>

Стилизация формы

Вы можете стилизовать форму с помощью CSS, чтобы сделать её более привлекательной. Например, можно изменить размер полей или их цвет.

Пример:

<style>
  form {
    width: 300px;
    margin: 20px auto;
  }
  input, select, button {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
  }
</style>

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" />
  <button type="submit">Submit</button>
</form>

Отличная работа!

Поздравляем! Вы научились создавать формы, использовать разные типы полей ввода и стилизовать их. Формы необходимы для сбора данных пользователей и создания интерактивных веб-страниц. В следующем уроке мы рассмотрим мультимедиа — например, видео и аудио, — чтобы сделать страницы более динамичными. Приготовьтесь к новым творческим заданиям!

Формы: собираем данные от пользователей — иллюстрация 10

Часто задаваемые вопросы

Урок «Формы: собираем данные от пользователей» бесплатный?

Да — полный текст урока «Формы: собираем данные от пользователей» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML for Kids, подпишись на CoddyKit PRO. Курс HTML for Kids содержит 4 уроков всего.

Чему я научусь в уроке «Формы: собираем данные от пользователей»?

Создавайте простые формы с текстовыми полями, кнопками и другими элементами Ты практикуешь HTML for Kids с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML for Kids?

Предыдущий опыт не требуется. HTML for Kids на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Формы: собираем данные от пользователей»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML for Kids?

Да. Каждый урок HTML for Kids включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Таблицы: организуем данные
  2. Формы: собираем данные от пользователей
  3. Атрибуты HTML
  4. Мультимедиа: добавляем видео и аудио
← Назад к HTML for Kids