Формы и ввод данных в JavaScript: input, select, textarea

Что такое формы и зачем они нужны

Формы — это способ взаимодействия сайта с пользователем. С их помощью мы можем:

получить имя, номер телефона или e-mail пользователя,
спросить мнение (например, через отзыв),
дать выбрать из списка (цвет, город, модель и т.д.).

Чтобы JavaScript мог реагировать на действия в форме — нужно:

Добавить форму на страницу;
Назначить обработчик события (например, при нажатии на кнопку);
Прочитать значение из поля ввода;
Сделать что-то с этим значением — например, показать результат.

Пример №1: Получаем имя пользователя и приветствуем его

Что делаем: создаём поле для ввода имени и кнопку. Когда пользователь нажмёт кнопку — выведем приветствие.

HTML:

<input type="text" id="username" placeholder="Введите имя">
<button id="greetBtn">Поздороваться</button>
<p id="greeting"></p>

JavaScript:

const input = document.getElementById("username");
const button = document.getElementById("greetBtn");
const greeting = document.getElementById("greeting");

button.addEventListener("click", function() {
  const name = input.value.trim();
  if (name !== "") {
    greeting.textContent = `Привет, ${name}!`;
  } else {
    greeting.textContent = "Пожалуйста, введите имя.";
  }
});

Что делает код:

input.value — получает текст из поля.
addEventListener — реагирует на клик.
textContent — выводит текст на экран.

Попробуйте прямо здесь:

Пример №2: Работа с <textarea>

Для чего нужно: поле textarea используется для длинных текстов (комментарии, отзывы, сообщения).

HTML:

<textarea id="feedback" placeholder="Оставьте отзыв..."></textarea>
<button id="sendFeedback">Отправить</button>
<p id="feedbackMessage"></p>

JavaScript:

const textarea = document.getElementById("feedback");
const sendBtn = document.getElementById("sendFeedback");
const message = document.getElementById("feedbackMessage");

sendBtn.addEventListener("click", () => {
  const text = textarea.value.trim();
  if (text.length < 10) {
    message.textContent = "Пожалуйста, напишите отзыв подробнее.";
  } else {
    message.textContent = "Спасибо за отзыв!";
  }
});

Попробуйте прямо здесь:

Пример №3: Выпадающий список select

Для чего нужно: когда нужно выбрать одно значение из списка (например, город).

HTML:

<select id="city">
  <option value="">Выберите город</option>
  <option value="Москва">Москва</option>
  <option value="Саратов">Саратов</option>
  <option value="Екатеринбург">Екатеринбург</option>
</select>
<p id="selectedCity"></p>

JavaScript:

const citySelect = document.getElementById("city");
const selected = document.getElementById("selectedCity");

citySelect.addEventListener("change", () => {
  if (citySelect.value) {
    selected.textContent = `Вы выбрали: ${citySelect.value}`;
  } else {
    selected.textContent = "Пожалуйста, выберите город.";
  }
});

Попробуйте прямо здесь:

Пример №4: Выбор нескольких значений с помощью чекбоксов

Для чего нужно: когда пользователю нужно выбрать сразу несколько вариантов (например, интересующие города для переезда).

HTML:

<form id="citiesForm">
  <label><input type="checkbox" name="city" value="Москва"> Москва</label><br>
  <label><input type="checkbox" name="city" value="Саратов"> Саратов</label><br>
  <label><input type="checkbox" name="city" value="Екатеринбург"> Екатеринбург</label><br>
  <label><input type="checkbox" name="city" value="Казань"> Казань</label><br>
  <button type="button" id="showSelected">Показать выбранные</button>
</form>
<p id="selectedCities"></p>

JavaScript:

const showBtn = document.getElementById("showSelected");
const result = document.getElementById("selectedCities");

showBtn.addEventListener("click", () => {
  const checkedBoxes = document.querySelectorAll('input[name="city"]:checked');
  const cities = Array.from(checkedBoxes).map(cb => cb.value);
  
  if (cities.length > 0) {
    result.textContent = "Вы выбрали: " + cities.join(", ");
  } else {
    result.textContent = "Выберите хотя бы один город.";
  }
});

Попробуйте прямо здесь:

Пример №5: Обработка отправки формы

Зачем это нужно: формы — важная часть сайтов. С их помощью пользователи отправляют заявки, комментарии, вопросы. Нужно уметь «перехватывать» отправку формы, чтобы выполнять проверку данных или предотвращать перезагрузку страницы.

Что нужно сделать:

Создать форму с полями «Имя» и «Email».
При нажатии на кнопку «Отправить» — предотвратить стандартную отправку формы (чтобы не перезагружалась страница).
Вывести результат на экран: успешно или не заполнены поля.

HTML:

<form id="contactForm">
  <input type="text" id="name" placeholder="Ваше имя"><br>
  <input type="email" id="email" placeholder="Ваш email"><br>
  <button type="submit">Отправить</button>
</form>
<p id="formMessage"></p>

JavaScript:

const form = document.getElementById("contactForm");
const nameInput = document.getElementById("name");
const emailInput = document.getElementById("email");
const message = document.getElementById("formMessage");

form.addEventListener("submit", function(event) {
  event.preventDefault(); // остановим стандартную отправку

  const name = nameInput.value.trim();
  const email = emailInput.value.trim();

  if (name === "" || email === "") {
    message.textContent = "Пожалуйста, заполните все поля.";
  } else {
    message.textContent = "Форма успешно отправлена!";
  }
});

Попробуйте прямо здесь:

Совет: Всегда проверяй значения, введённые пользователем, перед тем как использовать их. Это важно и для UX, и для безопасности.

Что дальше

Теперь ты умеешь обрабатывать поля input, textarea и select. В следующем уроке: как хранить данные в браузере (LocalStorage).

К содержанию курса