Ad banner
Ad banner

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

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

✅ Полезные ссылки:
Урок на сайте itProger:

⏰ Тайм коды:
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 – Заключительная часть

✔ Сообщество программистов:

✔ ————-
Вступай в группу Вк – 🚀
Группа FaceBook –
Инстаграм itProger:

Instagram:
Telegram:
Twitter –

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

(Visited 135 times, 1 visits today)

You Might Be Interested In

Комментарии (34)

  1. в итоге срабатывает только на несовпадение паролей и на не заполнение всех полей.

    а длина имени вообще значения не имеет, хоть 1 символ, хоть 70, говорит, что всё правильно.
    и на & тоже не реагирует))

    function checkForm(el) {

    var name = el.name.value;

    var pass = el.pass.value;

    var repass = el.repass.value;

    var state = el.state.value;

    var fail = "";

    if(name == "" || pass == "" || state == "")

    fail = "заполните все поля";

    else if(name.lenght <= 1 || name.lenght > 50)

    fail = "введите корректное имя";

    else if(pass != repass)

    fail = "пароли должны совпадать";

    else if(pass.split("&").lenght > 1)

    fail = "некорректный пароль";

    if(fail != "") {

    document.getElementById('error').innerHTML = fail;

    return false;

    } else {

    alert("it's OK");

    return true;

    }

    }

  2. объясните пожалуйста про return которое написали вначале это видеоролика вообще понять не могу когда его использовать

  3. Мне кажется для наглядности переменную куда помещаем объект через getElemntById надо назвать отлично от значения атрибута id, а то может быть путаница у людей, например назвать tx;

  4. почему у меня не работает getElementById ? что не так?
    вот мой код:

    HTML

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <title>Название страницы</title>

    <link rel="stylesheet" href="style.css">

    <script src="index.js"></script>

    </head>

    <body>

    <p id="text">Text</p>

    </body>

    </html>

    JS

    var text = document.getElementById('text');

    console.log(text.id);

  5. <form id="main-form" onsubmit="checkForm(this)">

    <label for="name">Имя:</label>

    <input type="text" name="name" placeholder="Имя" id="name"><br><br>

    <label for="password">Пароль:</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 for="male">Женский</label><br><br>

    <input type="submit" name="sumbit" value="Готово"

    </form>
    кому лень было писать

  6. авторы "молодцы" конечно: text это text, id – text, имя переменной text, невероятно удобно для понимания что и с чем взаимодействует)))

  7. а как выводить переменную в h2? я никак не могу понять, везде пишут про getElementById, но я помещаю в переменную переменную из html, но текст остаётся тот же. переменную не получается просто вывести в h2

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

  9. Ребятк помогите пожалуйста, когда ввожу данные пароля имени и пола и после этого нажимаю «готово» браузер пишет что страница не доступна и страница дальше не работает, что делать ?!!!

  10. Мистер Георгий Дударини, вы когда всему одинаковые названия даёте, потом сложно определить, это переменная, айди, или вообще какая-то функция или метод. Этот ваш так называемый текст has many personalities

  11. я не совсем понял, какой смысл получать данные в консоли, если их можно получить "методом – post" на свой сервер?

  12. почему после прописывания кода с разделением на js часть и html и прописывания event.preventDefault; все равно страница перезагружается не сообщая о ошибках?((((((((

  13. вообще не понятно. создали атрибут текст обратились к нему потом атрибут тайтл и отбращаемся текст.тайтл почему так? это же 2 разных атрибута……ничего не понятно!!!!

  14. <form id="main-form">

    <label for="name">Имя:</label>

    <input type="text" name="name" placeholder="Имя" id="name"><br><br>

    <label for="password"> Пароль:</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="Мужской"></label>

    <input type="radio" name="state" id="female" value="Женский">

    <label for="Женский"></label><br><br>

    <input type="button" name="submit" value="Готово">

    </form>

  15. Да уж…навалил все в кучу и понимай как хочешь..материал для новичков и нужно очень дозированно его давать иначе ничего не запоминается

  16. Я: ставлю один символ & в начало или вторым
    JavaScript: не, ну это нулевой или первый элемент и он не больше 1, пароль принят

Post A Comment For The Creator: Школа itProger / Программирование

Ваш адрес email не будет опубликован. Обязательные поля помечены *