Загрузка...

Формы в JavaScript

У чайной стойки один бланк. Форма — #slip. В ней текстовое поле #guest с именем guest, числовое поле #cups с именем cups и кнопка #send с type="submit". Под формой #note пока говорит blank.
Форма собирает именованные поля. Набранное лежит в value, и это всегда строка, даже если type равен number. Отправка — событие submit на самой форме. Без preventDefault браузер открывает адрес формы, и эта страница уходит. Здесь preventDefault вызывается, чтобы заметку ещё можно было прочитать. Страница записывает lida, записывает 2, один раз нажимает send, и строка становится lida / 2 / stayed.

Это не лента билетов

Лента вешала один слушатель клика на родителя и читала event.target. Строка была red / blue / gold / 1, без preventDefault. Страница таблички вызывала его на ссылке. Строка была click / seal / plaque / true / quiet. Этот бланк — ни то ни другое. Нет кнопки gold и нет currentTarget. Событие называется submit. Важны lida и строка 2.
getElementById("guest") находит поле по id. slip.elements.guest находит его по name, через форму. Здесь id и name — одно слово. Следующий урок проверит пустое поле. Этот — нет. Пустой гость всё равно уйдёт.

Что записывает бланк

Заметка начинается с blank. Гость и чашки пустые. Надпись кнопки остаётся send. Читайте строки по порядку. Каждый кусок стартует с пустого бланка, кроме строки страницы: это демо внизу. Демо нажимает send один раз.

📊 Что записывает бланк

Момент Что читаете Заметка Легко перепутать
гость записан как lida guest.value lida читать id guest
чашки записаны как 2 cups.value 2, и это строка ждать число 2
щелчок send, функция пишет stayed заметка stayed вызов slip.submit(), который пропускает слушатель
оба имени через форму elements.guest и elements.cups lida 2 читать elements.slip
скрипт страницы строка lida / 2 / stayed red / blue / gold / 1

value не превращает числовое поле в число. После записи 2 свойство cups.value — это символы 2. typeof cups.value равен "string". Число понадобится позже — преобразуйте сами. Эта строка так не делает.
send.click() запускает submit, потому что type кнопки — submit. slip.submit() — другой вызов. Он отправляет форму и не выполняет ваш слушатель. До preventDefault дело не доходит. Эта страница пользуется щелчком.

Две дороги к одному полю

getElementById("cups") берёт id. slip.elements.cups берёт name, и только когда форма уже в руках. Здесь оба атрибута — одно слово. Если бы name был count, а id остался cups, elements.cups не нашлось бы, и поле жило бы в elements.count.

Имя гостя

Поле сначала пустое. Скрипт кладёт lida в value и читает то же свойство обратно в заметку. Пока ничего не отправлено.

Read the guest

javascript 
let guest = document.getElementById("guest");
let note = document.getElementById("note");
guest.value = "lida";
note.textContent = guest.value;
console.log(note.textContent);

В журнале lida. id равен guest. Заметка — не слово guest. Это строка, которая сидит в value.

Сколько чашек

Свежий бланк. Поле чашек имеет type="number". Запишите 2, прочитайте value и спросите typeof.

Read the cups as text

javascript 
let cups = document.getElementById("cups");
let note = document.getElementById("note");
cups.value = "2";
note.textContent = cups.value + " " + typeof cups.value;
console.log(note.textContent);

В журнале 2 string. Клетка выглядит числовой, а скрипт получает текст. Запишите число 2 без кавычек — свойство всё равно вернётся строкой "2".

Кнопка отправки

Свежий бланк. Слушатель на форме, на событие submit. Он вызывает preventDefault и пишет stayed. Потом страница нажимает send. slip.submit() она не вызывает.

Stay on the page

javascript 
let slip = document.getElementById("slip");
let note = document.getElementById("note");
function pour(event) {
event.preventDefault();
note.textContent = "stayed";
}
slip.addEventListener("submit", pour);
document.getElementById("send").click();
console.log(note.textContent);

В журнале stayed. Слушатель выполнился, браузер не ушёл. Вызовите slip.submit() вместо щелчка — pour не запустится. Заметка останется blank.

Имена на бланке

Свежий бланк, без слушателя. Скрипт пишет оба поля через slip.elements по name и склеивает их в заметке.

Read both names

javascript 
let slip = document.getElementById("slip");
let note = document.getElementById("note");
slip.elements.guest.value = "lida";
slip.elements.cups.value = "2";
note.textContent = slip.elements.guest.value + " " + slip.elements.cups.value;
console.log(note.textContent);

В журнале lida 2. elements.guest — поле с именем guest, а не элемент с id slip. Пробел только разделяет заметку. Строка страницы позже использует /.

Строка под бланком

Скрипт стоит в конце body, после формы и абзацев. mark сначала равен left. Слушатель отменяет обычную отправку, копирует оба значения в заметку и ставит mark в stayed. Потом скрипт заполняет lida и 2 и один раз нажимает send. Строка пишется после этого щелчка.

Page demo — tea slip

html 
<!DOCTYPE html>
<html>
<head>
<title>forms — page</title>
</head>
<body>
<form id="slip">
<input id="guest" name="guest" type="text">
<input id="cups" name="cups" type="number">
<button id="send" type="submit">send</button>
</form>
<p id="note">blank</p>
<p id="line">…</p>
<script>
let slip = document.getElementById("slip");
let note = document.getElementById("note");
let mark = "left";
function pour(event) {
event.preventDefault();
note.textContent =
slip.elements.guest.value + " / " + slip.elements.cups.value;
mark = "stayed";
}
slip.addEventListener("submit", pour);
slip.elements.guest.value = "lida";
slip.elements.cups.value = "2";
document.getElementById("send").click();
document.getElementById("line").textContent =
note.textContent + " / " + mark;
</script>
</body>
</html>

Строка — lida / 2 / stayed. Первое слово — гость, второе — чашки как текст, последнее — mark. Слушатель выполнился, поэтому stayed, а не left. Заметка кончается на lida / 2. Слово blank исчезло. Строка билетов — другая страница. Этот бланк не проверяет, заполнены ли поля.

У стойки

  1. Запишите lida в поле гостя и прочитайте value. Заметка — lida.
  2. Запишите 2 в чашки и прочитайте value вместе с typeof. Заметка — 2 string.
  3. Слушайте submit, вызовите preventDefault и нажмите send. Заметка — stayed.
  4. Прочитайте оба поля через slip.elements. Затем строка страницы: lida / 2 / stayed.

Промахи у стойки

Подписи остаются guest, cups и send. Заметка — не слово slip.

  • Считать cups.value числом 2
  • Вызвать slip.submit() и ждать pour
  • Забыть preventDefault, и браузер откроет адрес
  • Прочитать id guest, когда нужно было value
  • Искать slip.elements.slip
  • Проверять пустые поля или шаблон на этой странице
  • Прочитать строку как red / blue / gold / 1

Оставьте это

  • После записи lida свойство guest.value равно lida
  • cups.value — строка 2, а typeof равен "string"
  • send.click() запускает слушатель submit, slip.submit() — нет
  • preventDefault — причина, почему страница ещё здесь и заметка может сказать stayed
  • slip.elements.guest и slip.elements.cups читают именованные поля
  • Строка страницы — lida / 2 / stayed

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
7
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 53 из 55
Javascript Урок