Добавление новых элементов в DOM
+ 7 (906) 272-38-19
Блог
Делимся с Вами своими знаниями и новостями

#Cruelten » Блог » Web » Добавление новых элементов в DOM — HTML5 (урок 2)

18.09.2014

Добавление новых элементов в DOM — HTML5 (урок 2)

html5

Добавление новых элементов в DOM (Объектная модель документа) поможет Вам делать Ваши формы обратной связи более динамичными. Сегодня мы научимся это делать.

Для начала давайте представим, что у нас есть некая страница с формой обратной связи, где присутствуют поля: имя, емейл, телефон, комментарий. Довольно распространенный вариант, неправда ли? Давайте тогда и создадим такую страницу. Весь урок можно будет смотреть здесь. Для начала стандартный код HTML5.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Форма обратной связи</title>
    <script></script>
    <style>
    </style>
</head>
<body>
</body>
</html>

В коде все просто как никогда. Это стандартное начало для любого сайта на  HTML5. Идем дальше. Давайте теперь создадим некую обертку что-ли, нашей формы, чтобы покрасивше была. Плюс добавим наше первое поле с именем и все это еще в форму обернем, для будущего взаимодействия с сервером.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Форма обратной связи</title>
    <script></script>
    <style>
    h1 {
font-size: 19px;
font-family: Verdana;
background: rgb(116, 158, 185);
padding: 10px;
text-align: center;
color: rgb(253, 252, 244);
text-shadow: 0 0 1px black;
    }
    .my_forma {
width: 560px;
height: 360px;
margin-top: 3%;
margin-left: auto;
margin-right: auto;
background: rgb(201, 201, 202);
-webkit-border-radius: 10px;
border-radius: 10px;
padding: 20px;
    }
    .input_my {
width: 400px;
height: 0px;
padding: 20px 10px;
font-size: 20px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid rgb(150, 143, 143);
box-shadow: 0 0 6px black;
    }
    #add_button {
width: 120px;
margin-left: 13px;
height: 41px !important;
background: rgb(96, 112, 30);
color: white;
font-size: 23px;
border: 1px solid rgb(145, 145, 145);
box-shadow: 0 0 6px black;
-webkit-border-radius: 10px;
border-radius: 10px;
cursor: pointer;
    }
    #add_button:hover {
background: rgb(70, 160, 73);
    }
    </style>
</head>
<body>
    <div class="my_forma">
        <h1>Форма для заказа индивидуального сайта</h1>
        <form>  
            <input type="text" class="input_my" id="my_name" size="40" placeholder="Введите Ваше Имя">
            <input type="button" id="add_button" value="Далее">
        </form>
    </div>
</body>
</html>

Итак, получилась форма. И в сегодняшнем уроке мы научимся динамически добавлять к этой форме новые поля с помощью JavaScript. Поле для ввода имени у нас есть. Но при заполнении данной формы и нажати на «Далее» ничего не происходит. Пришло время добавить немного магии к нашему коду. Магии JavaScript. Заодно из этого урока Вы научитесь оформлять событие клика по элементу. Весьма нужная штука. Также я советую Вам привыкнуть к тому, что извлекать нужный элемент из DOM и переносить его в переменную. В нашем пример я так сделал с кнопкой «Далее». Внимательно посмотрите код. Обратите внимание я выложил сюда только то, что изменилось на нашей странице, а именно содержимое между тегами <script></script>.

   <script>
        window.onload = init; //Важная составляющая нашей страницы. Начинаем извлекать наши элементы после загрузки всей страницы и построения DOM
        function init () { //теперь нам доступен весь DOM, можно работать с элементами.
            var button = document.getElementById('add_button'); //упаковываем нашу кнопочку в переменную, с которой будем работать
            button.onclick = my_vyvod; // Так, теперь нашей кнопке задаем событие клика мышки и привязываем к ней функцию.
        }
        function my_vyvod () {
          var name = document.getElementById('my_name');//добавляем переменную и вносим в нее наш  input, куда мы вводим свое имя
          var name_out = name.value;//вводим еще одну переменную, используем свойство input - value, чтобы внести в переменную эти данные, которые ввел пользователь.
          //Далее осуществляем проверку, чтобы пользователь хоть что-нибудь ввел.
          if(name_out != "") { //Если ввел, то идем дальше.
            alert(name_out); 
          }
          else { //Если ничего не ввел, выводим предупреждение
            alert('Ничего не введено'); 
          }
        }
    </script>

Как видно из кода нашей страницы я создал функцию my_vyvod(), которая должна добавить элемент в наш DOM. Сейчас она только проверяет наличие текста в поле. Чтобы сделать это нам потребуется немного изменить наш код в body.

div class="my_forma">
        <h1>Форма для заказа индивидуального сайта</h1>
        <form>  
            <ul class="my_ul" id="my_ul_id"></ul>
            <input type="text" class="input_my" id="my_name" size="40" placeholder="Введите Ваше Имя">
            <input type="button" id="add_button" value="Далее">
        </form>
    </div>

Итак, мы добавили наш пока невидимый список <ul> с id — my_ul_id. Теперь у нас есть место куда вставлять наши новые элементы. Теперь еще немного магии в наш скрипт и в нашей форме появляется возможность вставлять новый элемент, вносить в него данные и всяческим образом манипулировать с DOM. Ниже я привожу финальный код, в комментариях к коду я постарался максимально дать пояснения к тому, что делает каждый элемент.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Форма обратной связи</title>
    <script>
        window.onload = init; //Важная составляющая нашей страницы. Начинаем извлекать наши элементы после загрузки всей страницы и построения DOM
         var my_variant = ["Имя: ","E-mail: ","Телефон: ","Комментарий: " ]; // Выводим список наименований нашего цикла имен. Здесь может быть и больше наименований.
         var my_place = ["Введите Ваш e-mail", "Введите Ваш телефон","Введите Ваш комментарий"] //Вводим значения для placeholder.
        var my_dop_inf = 0;//объявляем переменную-счетчик нашего цикла нажатий на кнопку Далее
        function init () { //теперь нам доступен весь DOM, можно работать с элементами.
            var button = document.getElementById('add_button'); //упаковываем нашу кнопочку в переменную, с которой будем работать
            button.onclick = my_vyvod; // Так, теперь нашей кнопке задаем событие клика мышки и привязываем к ней функцию.
        }
        function my_vyvod () {
        
          var name = document.getElementById('my_name');//добавляем переменную и вносим в нее наш  input, куда мы вводим свое имя
          var name_out = name.value;//вводим еще одну переменную, используем свойство input - value, чтобы внести в переменную эти данные, которые ввел пользователь.
          var button = document.getElementById('add_button'); //вызываем переменную для улучшения
          var my_send = document.getElementById('my_form');
          var ul = document.getElementById('my_ul_id');
              var li = document.createElement('li'); //создаем новый элемент li
          //Далее осуществляем проверку, чтобы пользователь хоть что-нибудь ввел.
          if(name_out != "") { //Если ввел, то идем дальше.
              li.innerHTML = my_variant[my_dop_inf] + name_out; //Вносим в нашу переменную данные из нашего архива плюс введенные данные от пользователя.
              ul.appendChild(li);//добавляем новый элемент в DOM.
          }
          else { //Если ничего не ввел, выводим предупреждение
            alert('Ничего не введено'); 
          }
            name.value = ""; //удаляем из нашего input данные о предыдущем вводе информации.
            name.placeholder = my_place[my_dop_inf]; //добавляем новое значение в placegolder.
            my_dop_inf = my_dop_inf + 1; //увеличиваем нашу переменную на 1 единицу.
            if(my_dop_inf == 4) {//равняем с 4-мя, так как отсчет идет от 1, ибо строчкой выше мы увеличили переменную на 1
                var my_input = document.createElement('input'); //создаем новый элемент кнопку
                my_input.type = "button"; //присваиваем ей type
                my_input.value = "Отправить";//значение
                my_input.id = "otprav";//присваиваем id
                my_send.removeChild(name); //удаляем ненужный нам поле для ввода, свою задачу этот код выполнил.
                my_send.replaceChild(my_input, button);//заменяем существующую кнопку на новую.
            } 
        }
    </script>
    <style>
    h1 {
font-size: 19px;
font-family: Verdana;
background: rgb(116, 158, 185);
padding: 10px;
text-align: center;
color: rgb(253, 252, 244);
text-shadow: 0 0 1px black;
    }
    .my_forma {
width: 560px;
height: 360px;
margin-top: 3%;
margin-left: auto;
margin-right: auto;
background: rgb(201, 201, 202);
-webkit-border-radius: 10px;
border-radius: 10px;
padding: 20px;
    }
    .input_my {
width: 400px;
height: 0px;
padding: 20px 10px;
font-size: 20px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid rgb(150, 143, 143);
box-shadow: 0 0 6px black;
    }
    #add_button {
width: 120px;
margin-left: 13px;
height: 41px !important;
background: rgb(96, 112, 30);
color: white;
font-size: 23px;
border: 1px solid rgb(145, 145, 145);
box-shadow: 0 0 6px black;
-webkit-border-radius: 10px;
border-radius: 10px;
cursor: pointer;
    }
    #add_button:hover {
background: rgb(70, 160, 73);
    }
     #otprav {
width: 150px;
height: 41px !important;
background: rgb(96, 112, 30);
color: white;
font-size: 23px;
border: 1px solid rgb(145, 145, 145);
box-shadow: 0 0 6px black;
-webkit-border-radius: 10px;
border-radius: 10px;
cursor: pointer;
float: right;
    }
    #otprav:hover {
background: rgb(70, 160, 73);
    }
    .my_ul {
        margin: 0px;
        padding: 0px;
    }
    .my_ul li{
list-style: none;
padding: 10px;
font-size: 24px;
background: white;
margin-bottom: 10px;
color: black;
-webkit-border-radius: 10px;
    }
    </style>
</head>
<body>
    <div class="my_forma">
        <h1>Форма для заказа индивидуального сайта</h1>
        <form id="my_form">  
            <ul class="my_ul" id="my_ul_id"></ul>
            <input type="text" class="input_my" id="my_name" size="40" placeholder="Введите Ваше Имя">
            <input type="button" id="add_button" value="Далее">
        </form>
    </div>
</body>
</html>

P.S. Статья посвящена исключительно для начинающих программистов и направлена на обучение. В своих комментариях Вы можете оставлять свои пожелания. С радостью с ними ознакомлюсь. Спасибо.

Метки: , ,
Не удаляется торговый аккаунт в Facebook Business — решение проблемы
Настройка отправки почты с Вашего домена в ispmanager
Поиск

Рубрики

1С Битрикс Ajax Civilization V Civilization VI Cruelten CSS Diablo III Elementor Facebook Google API HTML JavaScript MODX Mongo DB Node.JS PHP ShopCMS Tilda UIkit Warcraft (MMO) WooCommerce WordPress Базы данных Геолокация Ошибки Плагины Полезно знать Слайдер Таиланд Форма обратной связи

Свяжитесь с нами уже сейчас

Вы привыкли видеть здесь форму обратной связи. Ведь так? Ее делают почти все. Но исследуя поведение людей, мы пришли к выводу, что форма совершенно не нужна. В любом случае все сводится к обсуждению Вашего проекта в WhatsApp или Telegram. А зачем нам тратить Ваше время на заполнение различных форм? Поэтому, пишите в Telegram или в WhatsApp.

© 2011-2022 Творческая студия #Cruelten