Уроки JavaScript для начинающих / #12 – Управление HTML и обработка форм при помощи JS

JavaScript с легкостью позволяет обрабатывать HTML формы на сайте. За урок мы научимся работать с HTML объектами, а также создадим веб форму и научимся получать из нее данные. Полученные данные будут проходить валидацию.

✅ Полезные ссылки:

⏰ Тайм коды:
00:00 - Начало
00:18 - Выборка объектов по их «id»
03:55 - Работа с HTML объектами
10:12 - Нахождение объектов по тегу
13:50 - Нахождение объектов по классу
14:47 - Создание формы
18:18 - Отслеживание отправки данных
23:10 - Получение данных из формы
27:20 - Валидация данных
35:32 - Переадресация пользователя
36:54 - Обработчик события «eventListener»
41:00 - Заключительная часть

✔ -------------

- Уроки от #itProger 👨🏼‍💻
- Все уроки по хештегу #itprogerLessons

[memory-user]

Почему-то ни кто в комментариях не помог, поэтому нате
<form id="main-form" onsubmit="checkForm(this)" method="post">
<label for="name">Имя:</label>
<input type="text" name="name" placeholder="Имя" id="name"><br><br>
<label
<input type="password" name="pass" placeholder="Пароль" id="pass"><br><br>
<label for="repass">Проверка пароля:</label>
<input type="password" name="repass" placeholder="Проверка пароля" id="repass">
<span>Пол:</span>
<input type="radio" name="state" id="male" value="Мужской">
<label for="male">Мужской</label>
<input type="radio" name="state" id="female" value="Женский">
<label
<input type="submit" name="submit" value="Готово">
</form>

[АнуарЖолдыбаев-йх]

Вот это урок конечно! Спасибо! Надо теперь пересмотреть еще несколько раз и понять

[arrow_function]

Я, который знал только как найти елемент по ID и мог выводить его, теперь я знаю почти всё. Большое спасибо

[MintShampoo]

Смотришь такой - Все ок, все понятно.
Решаешь накатать свой шаблон страницы - Че там было? Как там писалось?

[akramhamidov]

Спасибо за полезный и доступный урок для новичка!)

[dmitriystr]

Было очень интересно, жду следующего видео !!!

[vuitlik]

JavaScript это: муки, пот, кровь, слёзы, крики, но всё же - результат

[dhbfjzc]

Чувак Спасибо за твои уроки. Сайты как живые получаются. Удачи в продвижении канала

[vacuumsplitting]

огромное спасибо тебе) мне очень тяжело дается js, но я прошел этот урок и по памяти сделал то же, что и ты, и у меня все получилось. не с первого раза, конечно, ошибки были (например я забыл про фигурные скобки и не мог понять почему "else if" отображается как ошибка), но потом все исправил и заработало)

[КириллКузнецов-нш]

Правильно человек сказал JavaScript это пот, слезы и кровь но зато результат два дня над этим парился и в итоге все получилось спасибо вам за такой курс)

[dudkamira]

Объясняешь клёво, все понятно и быстро, но это благодаря итак имеющимся знаниям в HTML, CSS и JS. Но вот в конце, с обновлением страницы, submit, true-false и чем-то там с отключением базового поведения я нифига не понял. Впервые про это слышу

[tvnbbyn]

7:12 название переменной в JS может начинаться только с букв латинского алфавита, знака доллара ($) и нижнего подчёркивания (_). И не зря...
text.style.background-color - вызовет ошибку, так как интерпретатор примет тире за оператор минус (-) и попытается из левой части выражения (по мнению интерпретатора) вычесть правую. Никакое преобразование типов данных здесь не поможет и будет ошибка.
Вот поэтому тире (знак минус) убирается и следующая буква начинается в верхнем регистре.

[qnhbnkg]

В 2015 году Гоша еще затрагивал тему "регулярных выражений js" когда объяснял формы, а тут это упустил. Для проверки корректности введения имэйла, например, важно было бы упомянуть что это такое.
А вообще, Гоша один из самых крутых учителей)

[melvin]

<form id="main-form" onsubmit="checkForm(this)">
<label for="name">Имя:</label>
<input type="text" name="name" placeholder="Имя" id="name"><br><br>
<label
<input type="password" name="repass" placeholder="Проверка пароля" id="repass"><br><br>
<label for="repass">Проверка пароля</label>
<input type="password" name="repass" placeholder="Проверка пароля" id="repass"><br><br>
<span>Пол:</span>
<input type="radio" name="state" id="female" value="Мужский">
<label for="male">Мужской</label>
<input type="radio" name="state" id="female" value="Женский">
<label
<input type="submit" name="sumbit" value="Готово"
</form>
кому лень было писать

[elizabetholsen]

Гоша Дударь:
-делает проверку для имени до 50 символов
Хьюберт Блейн
....

[xbndizd]

🟥У кого document is not defind, советую прописать <script> после объекта <p>🟥

[xeither]

БОГ ЕСТЬ ЛЮБИТЕ БОГА И СВОИХ БЛИЖНИХ!!!

[Syrolub]

хоть я и знаю немного javascript но про то что можно поставить стили я не знал, спасибо

[scahai_]

<form id="main-form" onsubmit="return checkForm(this)" method="post">
<label for="name">Имя:</label>
<input type="text" name="name" placeholder="Имя" id="name"><br><br>
<label
<input type="password" name="pass" placeholder="Пароль" id="pass"><br><br>
<label for="repass">Проверка пароля:</label>
<input type="password" name="repass" placeholder="Проверка пароля" id="repass"><br><br>
<span>Поль:</span>
<input type="radio" name="state" id="male" value="Мужской">
<label for="male">Мужской</label>
<input type="radio" name="state" id="female" value="Женский">
<label
<div id="error" style="color: red;"></div>
<input type="submit" name="submit" value="Готова">
</form><br><br>
не благадарите 😇

[ALB]

если у вас пишет что var которую вы сделали undefined или null попытаться перенести ссылку на js в конец html файла, я поставил ссылку в hеad и у меня js грузился быстрее чем html и из-за этого писало что var=null