Презентація "Створення динамічних елементів на веб-сторінках. Форма"

Створення динамічних елементів на веб-сторінках. Форма

Форма Форма — електронний аналог звичайної паперової анкети, яка містить поля для вводу інформації, відмітки якихось позицій в списках з варіантами відповідей тощо. Користувач може вводити інформацію з клавіатури, а також вибираючи потрібні перемикачі чи прапорці. Його дії потім опрацьовує програма-сценарій. Форма може містити поля для введення текстової інформації, списки для вибору заздалегідь визначених відповідей, прапорці, перемикачі, кнопки та інші елементи керування.

Елементи форми. Текстові поля Для введення текстових даних у спеціальні поля використовують тег , в якого атрибут TYPE має значення t e x t :Інші атрибути тегу :• NAME — ім'я змінної, в якій зберігається введене значення;• VALUE — початкове значення;• SIZE — довжина текстового поля;• MAXLENGTH — максимальна кількість символів для введення. Цей самий тег, в якого атрибут TYPE має значення password використовують у разі потреби ввести пароль. При цьому надруковані символи будуть приховані за зірочками чи крапками.

Для текстів великого обсягу зі смугами прокручування використовують парний тег з такими атрибутами:• ROWS — висота текстового прямокутника в символах;• COLS — ширина текстового прямокутника в символах;• WRAP — визначення способу переходу на інший рядок (off — за допомогою клавіші Enter, v i r t u a l — автоматично);• NAME — ім'я для доступу до текстової області з програми-сценарію.</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/21659/108845/115754_images/5.jpg" data-lightbox="slides" data-title="Слайд №5"><img src="/uploads/files/21659/108845/115754_images/thumb_5.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 5</div> <p>Елементи форми Щоб дізнатися про думку відвідувача з того чи іншого приводу, не змушуючи його вводити інформацію, використовують перемикачі з варіантами відповідей. Відвідувач переглядає їх і вибирає потрібний. Перемикачі дають змогу вибрати лише один із запропонованих варіантів. Для створення перемикачів використовують тег <INPUT>, в якого атрибут TYPE (тип) має значення radio. Групі перемикачів, що стосуються одного питання, обов'язково присвоюють однакове ім'я (NAME). Атрибут VALUE позначає відповідний перемикачу варіант відповіді для розробника форми, тоді як напис після тегу <INPUT> — для користувача. Для вибору одного з перемикачів за умовчанням використовують атрибут CHECKED. Приклад:<Н4>Вибери мову:</Н4><INPUT TYPE="radio" NAME="lang" VALUE="українська" CHECKED>Українська <BR><INPUT TYPE="radio" NAME="lang" VALUE="російська">Російська <BR><INPUT TYPE="radio" NAME="lang" VALUE="англійська">Англійська <BR></p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/21659/108845/115754_images/6.jpg" data-lightbox="slides" data-title="Слайд №6"><img src="/uploads/files/21659/108845/115754_images/thumb_6.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 6</div> <p>Прапорці Прапорці дають змогу вибирати кілька варіантів із запропонованих. Для них атрибут TYPE тегу <INPUT> має значення checkbox. Вибери екзамен:<INPUT TYPE="checkbox" NAME="exam" VALUE="українська"> Українська <BR><INPUT TYPE="checkbox" NAME="exam" VALUE="фізика"> Фізика <BR><INPUT TYPE="checkbox" NAME="exam" VALUE="математика">Математика <BR></p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/21659/108845/115754_images/7.jpg" data-lightbox="slides" data-title="Слайд №7"><img src="/uploads/files/21659/108845/115754_images/thumb_7.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 7</div> <p>Списки Списки, які можна розміщувати у формі так само, як перемикачі та прапорці, також позбавляють відвідувачів веб-сторінки від необхідності вводити інформацію вручну, даючи змогу вибрати відповідь із запропонованих варіантів. Список розміщують між тегами <SELECT> та </SELECT>, а його елементи визначають за допомогою тегу <OPTION>. Наприклад: Район:<SELECT><OPTION NAME="frank">Франківський<OPTION NAME="syh">Сихівський<OPTION NAME="gal">Галицький</SELECT>Якщо замість <SELECT> записати <SELECT MULTIPLE>, користувач отримає можливість вибрати зі списку кілька варіантів. Атрибут SIZE=N тегу <SELECT> обмежує КІЛЬКІСТЬ показаних елементів списку числом N, після чого буде використано прокручування.</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/21659/108845/115754_images/8.jpg" data-lightbox="slides" data-title="Слайд №8"><img src="/uploads/files/21659/108845/115754_images/thumb_8.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 8</div> <p>Кнопки Заповнивши форму текстом та вибравши потрібні елементи керування, користувач повинен мати можливість підтвердити свої дії або скасувати помилково введені дані. Для підтвердження правильності введення використовують кнопку, яку створює тег <INPUT> з атрибутом TYPE="submit". На цій кнопці буде напис, заданий атрибутом VALUE. Аналогічно створюють кнопку скасування дії: атрибут TYPE у цьому випадку повинен мати значення r e s e t . Звичайна кнопка, з якою можна зв'язати будь-яку дію, має атрибут TYPE="button". <INPUT TYPE="submit" VALUE="Biдicлaти"><INPUT TYPE="reset" VALUE="Оновити форму"><INPUT TYPE="button" VALUE="Обчислити"> Для оригінального оформлення кнопки в неї можна вставити малюнок. Для цього використовують такий синтаксис:<INPUT TYPE="image" SRC="..."WIDTH=... HEIGHT=... ALT="..." VALUE=...></p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/21659/108845/115754_images/9.jpg" data-lightbox="slides" data-title="Слайд №9"><img src="/uploads/files/21659/108845/115754_images/thumb_9.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 9</div> <p>Надсилання форми Розробник веб-сторінки має змогу отримати відповіді користувача на поставлені запитання, не обмежуючись діалоговими вікнами методів Confirm та Prompt. Форми можна проектувати відповідно до своїх потреб, додавати до них зображення та інші елементи. Після заповнення форми користувач надсилає дані на подальше опрацювання. Включені в документ HTML елементи на зразок полів введення даних, перемикачів, прапорців та кнопок вміщують у тег форми <FORM>. . .</FORM>. Цей тег повинен мати певні атрибути, наприклад:<FORM METHOD="post" ACTION="/bin/serv"ENCTYPE="text/plain"> Атрибут METHOD може мати значення p o s t або g e t , які визначають різні методи передавання інформації з форми на URL-адресу сценарію-обробника, що зазначена в атрибуті ACTION. У свого провайдера потрібно уточнити, який із методів слід використовувати. Необхідно також знати місце розташування доступних сценаріїв та їхні імена.</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/21659/108845/115754_images/10.jpg" data-lightbox="slides" data-title="Слайд №10"><img src="/uploads/files/21659/108845/115754_images/thumb_10.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 10</div> <p>Надсилання форми Дані форми можна пересилати на певну адресу електронної пошти, якщо задати атрибут ACTION=mailto:aflpeca_nom. TM. Атрибут ENCTYPE визначає, в який спосіб дані форми потрібно кодувати перед надсиланням на сервер. За замовчуванням використовується кодування, під час якого символи замінюються комбінацією символу ≪% ≫ та шістнадцяткового коду символу тексту в ASCII- таблиці. Щоб дані форми не перетворювати на шістнадцяткові числа, слід задавати значення t e x t / p l a i n .__</p> </div> </div> </div> </div> </div> <div class="content-block comment-content-block"> <div class="block-head">Середня оцінка розробки</div> <div class="rating-view avarage"> <div class="row"> <div class="col-md-6"> <div class="rating-mark"> <span class="rate-title">Структурованість</span> <div class="rating"> <span class="active"></span><span class=""></span><span class=""></span><span class=""></span><span class=""></span> </div> 5.0 </div> <div class="rating-mark"> <span class="rate-title">Оригінальність викладу</span> <div class="rating"> <span class="active"></span><span class=""></span><span class=""></span><span class=""></span><span class=""></span> </div> 5.0 </div> <div class="rating-mark"> <span class="rate-title">Відповідність темі</span> <div class="rating"> <span class="active"></span><span class=""></span><span class=""></span><span class=""></span><span class=""></span> </div> 5.0 </div> </div> <div class="col-md-4"> <div class="rating-mark"> <strong class="rate-title">Загальна:</strong> <div class="rating general"> <span class="active"></span><span class=""></span><span class=""></span><span class=""></span><span class=""></span> </div> 5.0 </div> <div class="rating-mark">Всього відгуків: 1</div> </div> </div> </div> <div class="block-head">Оцінки та відгуки</div> <div class="comment-wrapper"> <div id="comment-pjax-container-w0" data-pjax-container="" data-pjax-timeout="20000"> <div class="comments"> <ol id="w1" class="nu-comments-list"> <li class="comment " id="comment-38913"> <div class="comment-content" data-comment-content-id="38913"> <div class="comment-author-avatar"> <img src="uploads/avatars/423195.jpg" alt="Проценко Ольга Дмитрівна"> </div> <div class="comment-details"> <div class="row"> <div class="col-md-6"> <div class="comment-author-name"> <span><a href="/profile/423195">Проценко Ольга Дмитрівна</a></span> <a class="comment-date" href="#comment-38913">25.04.2019 в 08:07</a> </div> <div class="comment-body"> дякую! </div> </div> <div class="col-md-6"> <div class="rating-view"> <div class="rating-mark"> <strong class="rate-title">Загальна:</strong> <div class="rating general"> <span class="active"></span><span class=""></span><span class=""></span><span class=""></span><span class=""></span> </div> 5.0 </div> <div class="rating-mark"> <span class="rate-title">Структурованість</span> <div class="rating"> <span class="active"></span><span class=""></span><span class=""></span><span class=""></span><span class=""></span> </div> 5.0 </div> <div class="rating-mark"> <span class="rate-title">Оригінальність викладу</span> <div class="rating"> <span class="active"></span><span class=""></span><span class=""></span><span class=""></span><span class=""></span> </div> 5.0 </div> <div class="rating-mark"> <span class="rate-title">Відповідність темі</span> <div class="rating"> <span class="active"></span><span class=""></span><span class=""></span><span class=""></span><span class=""></span> </div> 5.0 </div> </div> </div> </div> </div> </div> </li> </ol> </div> </div> </div> </div> </div> <div class="col-md-3 col-sm-4 col-xs-12"> <div class="file-info pptx"> <div class="filetype">pptx</div> <div class="hidden-xs visible-sm visible-md visible-lg"> <a class="btn btn-orange btn-block" href="#" data-toggle="modal" data-target="#registration"><i class="fa fa-download" aria-hidden="true"></i> Завантажити</a> <div class="bookmark-file"><a href="#" class="" data-toggle="modal" data-target="#registration"><span>Зберегти на потім</span> <i class="fa fa-bookmark" aria-hidden="true"></i></a></div> </div> <div class="author"> <div class="control-label">Додав(-ла) </div> <a href="/profile/21659">Пашинська Ольга Леонідівна</a> <div class="clearfix"></div> </div> <div class="taxonomy"> <div class="control-label">Пов’язані теми</div> <a href="/biblioteka/informatika">Інформатика</a>, <a href="/biblioteka/informatika/klas-10">10 клас</a>, <a href="/biblioteka/typ-2">Матеріали до уроків</a> </div> <div class="meta"> <div class="control-label">Додано</div> <span><i class="fa fa-calendar" aria-hidden="true"></i> 24 квітня 2019</span> </div> <div class="meta"> <div class="control-label">Переглядів</div> <span><i class="fa fa-eye" aria-hidden="true"></i> 4973</span> </div> <div class="taxonomy"> <div class="control-label">Оцінка розробки</div> <div class="rating-view rating-left"> <div class="rating-mark"> <div class="rating general text-left"> <span class="active"></span><span class=""></span><span class=""></span><span class=""></span><span class=""></span> </div> 5.0 (1 відгук) </div> </div> </div> </div> <a class="show-time-item margbottom" href="/site/go/305"><img src="https://naurok.com.ua/uploads/banner/305/1675094391.png" width="100%" alt="" target="_blank"></a> <div class="promo-cert promo-cert-top"> <div class="promo-cert-preview"> <img src="/img/mart-cert-lg.png" /> </div> <div class="promo-cert-name">Безкоштовний сертифікат<br />про публікацію авторської розробки</div> <div style="font-size:12px;">Щоб отримати, додайте розробку</div> <br /> <a class="btn btn-primary btn-block" href="/biblioteka/upload"><i class="fa fa-plus" aria-hidden="true"></i> Додати розробку</a> </div> <div class="items related"> <div class="related-head">Рекомендовані матеріали</div> <div class="file-item docx"> <div class="filetype">docx</div> <div class="meta pull-right"> <span><i class="fa fa-eye" aria-hidden="true"></i> 32142</span> <span><i class="fa fa-comment-o" aria-hidden="true"></i> 5</span> </div> <div class="headline"> <a href="/programni-zasobi-obrobki-dokumentiv-ta-informaci-vidi-sistem-obrobki-tekstiv-komunikaciyni-tehnologi-109539.html">Програмні засоби обробки документів та інформації. Види систем обробки текстів. Комунікаційні технології.</a> </div> </div> <div class="file-item zip"> <div class="filetype">zip</div> <div class="meta pull-right"> <span><i class="fa fa-eye" aria-hidden="true"></i> 1592</span> <span><i class="fa fa-comment-o" aria-hidden="true"></i> 5</span> </div> <div class="headline"> <a href="/programni-zasobi-obrobki-dokumentiv-ta-informaci-vidi-sistem-obrobki-tekstiv-komunikaciyni-tehnologi-109543.html">Програмні засоби обробки документів та інформації. Види систем обробки текстів. Комунікаційні технології.</a> </div> </div> <div class="file-item docx"> <div class="filetype">docx</div> <div class="meta pull-right"> <span><i class="fa fa-eye" aria-hidden="true"></i> 8135</span> <span><i class="fa fa-comment-o" aria-hidden="true"></i> 5</span> </div> <div class="headline"> <a href="/praktichna-robota-3-stvorennya-ta-peresilannya-dokumentiv-109548.html">Практична робота 3 «Створення та пересилання документів».</a> </div> </div> <div class="file-item pptx"> <div class="filetype">pptx</div> <div class="meta pull-right"> <span><i class="fa fa-eye" aria-hidden="true"></i> 3299</span> <span><i class="fa fa-comment-o" aria-hidden="true"></i> 4.9</span> </div> <div class="headline"> <a href="/praktichna-robota-3-stvorennya-ta-peresilannya-dokumentiv-109550.html">Практична робота 3 «Створення та пересилання документів».</a> </div> </div> </div> <div class="items related"> <div class="related-head">Схожі матеріали</div> <div class="file-item zip"> <div class="filetype">zip</div> <div class="meta pull-right"> <span><i class="fa fa-eye" aria-hidden="true"></i> 4318</span> <span><i class="fa fa-comment-o" aria-hidden="true"></i> 5</span> </div> <div class="headline"> <a href="/nastroyuvannya-parametriv-storinok-stvorennya-kolontituliv-druk-dokumenta-praktichna-robota-4-avtomatichne-stvorennya-zmistu-dokumenta-nastroyuvannya-parametriv-storinok-stvorennya-kolontituliv-537.html">Практична робота з інформатики для 10 класу на тему: «Автоматичне створення змісту документа. Настроювання параметрів сторінок. Створення колонтитулів»</a> </div> </div> <div class="file-item docx"> <div class="filetype">docx</div> <div class="meta pull-right"> <span><i class="fa fa-eye" aria-hidden="true"></i> 3876</span> <span><i class="fa fa-comment-o" aria-hidden="true"></i> 5</span> </div> <div class="headline"> <a href="/metodichna-rozrobka-pozaklasnogo-zahodu-z-informatiki-bezpechniy-internet-705.html"> Методична розробка позакласного заходу з інформатики “Безпечний Інтернет” </a> </div> </div> <div class="file-item ppt"> <div class="filetype">ppt</div> <div class="meta pull-right"> <span><i class="fa fa-eye" aria-hidden="true"></i> 4957</span> <span><i class="fa fa-comment-o" aria-hidden="true"></i> 5</span> </div> <div class="headline"> <a href="/metodika-vikonannya-laboratornih-robit-z-informatiki-dlya-uchniv-pershogo-kursu-ptnz-riven-standartu-1014.html">Методика виконаннялабораторних робіт з інформатики для учнів першого курсу ПТНЗ (рівень стандарту)</a> </div> </div> <div class="file-item zip"> <div class="filetype">zip</div> <div class="meta pull-right"> <span><i class="fa fa-eye" aria-hidden="true"></i> 5878</span> <span><i class="fa fa-comment-o" aria-hidden="true"></i> 5</span> </div> <div class="headline"> <a href="/urok-stvorennya-avtomatizovanogo-saytu-v-google-ta-prezentaciya-do-uroku-stvorennya-avtomatizovanogo-saytu-v-google-2658.html">Урок «Створення автоматизованого сайту в Google» та Презентація до уроку «Створення автоматизованого сайту в Google»</a> </div> </div> <div class="file-item pdf"> <div class="filetype">pdf</div> <div class="meta pull-right"> <span><i class="fa fa-eye" aria-hidden="true"></i> 9161</span> <span><i class="fa fa-comment-o" aria-hidden="true"></i> 5</span> </div> <div class="headline"> <a href="/elektronniy-laboratorniy-praktikum-na-temu-videomontazh-4422.html">Електронний лабораторний практикум на тему «Відеомонтаж»</a> </div> </div> </div> <div class="file-share hidden-xs"> <div class="share-head">Поділитись матеріалом</div> <a href="javascript:void(0)" onclick="Share.facebook('https://naurok.com.ua/prezentaciya-stvorennya-dinamichnih-elementiv-na-veb-storinkah-forma-108845.html', 'Презентація "Створення динамічних елементів на веб-сторінках. Форма"'); Share.log('doc',108845,'facebook');" class="sth-btn btn-block sth-upper sth-btn-facebook"><span class="network-name">facebook</span> <span class="share-count hide">0</span></a> <a href="javascript:void(0)" onclick="Share.viber('https://naurok.com.ua/prezentaciya-stvorennya-dinamichnih-elementiv-na-veb-storinkah-forma-108845.html', 'Презентація "Створення динамічних елементів на веб-сторінках. Форма"'); Share.log('doc',108845,'viber');" class="sth-btn btn-block sth-upper sth-btn-viber"><span class="network-name">viber</span> <span class="share-count hide">0</span></a> <a href="javascript:void(0)" onclick="Share.telegram('https://naurok.com.ua/prezentaciya-stvorennya-dinamichnih-elementiv-na-veb-storinkah-forma-108845.html', 'Презентація "Створення динамічних елементів на веб-сторінках. Форма"'); Share.log('doc',108845,'telegram');" class="sth-btn btn-block sth-upper sth-btn-telegram"><span class="network-name">telegram</span> <span class="share-count hide">0</span></a> <a href="javascript:void(0)" onclick="Share.twitter('https://naurok.com.ua/prezentaciya-stvorennya-dinamichnih-elementiv-na-veb-storinkah-forma-108845.html', 'Презентація "Створення динамічних елементів на веб-сторінках. Форма"'); Share.log('doc',108845,'twitter');" class="sth-btn btn-block sth-upper sth-btn-twitter"><span class="network-name">Twitter</span> <span class="share-count hide">0</span></a> <a href="javascript:void(0)" onclick="Share.google('https://naurok.com.ua/prezentaciya-stvorennya-dinamichnih-elementiv-na-veb-storinkah-forma-108845.html'); Share.log('doc',108845,'google');" class="sth-btn btn-block sth-upper sth-btn-google-plus"><span class="network-name">Google+</span> <span class="share-count hide">0</span></a> </div> </div> </div> </div> </div> </div> <div class="fixed-bottom-overlay visible-upto-l socialbar clearfix" style="visibility: visible;"> <div class="new-variation-3 new-variation-3-library"> <div class="library-panel"> <div class="row"> <div class="col-xs-6"> <a class="btn btn-orange btn-block btn-download-panel" href="/registration?file_id=108845"><i class="fa fa-download" aria-hidden="true"></i> Завантажити</a> </div> <div class="col-xs-6"> <div class="bookmark-file"><a href="/registration?file_id=108845" class="" onClick="libsBookmark.save(108845);"><span>Зберегти на потім</span> <i class="fa fa-bookmark" aria-hidden="true"></i></a></div> </div> </div> </div> </div> </div> <style> .library .document-content-block { -webkit-touch-callout: initial !important; -webkit-user-select: initial !important; -khtml-user-select: initial !important; -moz-user-select: initial !important; -ms-user-select: initial !important; user-select: initial !important; } </style> </div><!-- /.container --> <style> .field-recaptcha{ display: none; } .grecaptcha-badge { visibility: hidden; } </style> <footer class="site-footer"> <div class="site-footer__document-check"> <div class="container-fluid"> <form id="w5" action="/proof" method="POST"> <input type="hidden" name="_csrf" value="VgqRfpOjNdtKWTPhe9Go6Cw96xmuqVFO9ACzcZ3LJg0yTPwM1psArDkAcYkdkp2RHn-DKvaZY3ufaIMl-oFcQg=="> <div class="row"> <div class="col-xs-12 text-center"> <span class="site-footer__title"> Перевірка виданих документів </span> </div> <div class="col-xs-12 text-center"> <small class="site-footer__title site-footer__title--small"> Вкажіть номер документа (використовуйте кириличну розкладку) </small> </div> <div class="col-xs-12"> <div class="site-footer__form"> <div class="site-footer__input-wrapper"> <input type="text" name="number" value="" placeholder="ВXXX-XXXX" > </div> <div class="site-footer__button-wrapper"> <button type="submit">ПЕРЕВІРИТИ</button> </div> </div> </div> </div> </form> </div> </div> <div class="site-footer__main"> <div class="container-fluid"> <div class="row site-footer__main-row"> <div class="col-xs-6 col-md-3"> <ul class="site-footer__list"> <li> <span class="site-footer__title"> Підвищення кваліфікації </span> </li> <li><a class="site-footer__item" href="/upgrade">Підвищення кваліфікації</a></li> <li><a class="site-footer__item" href="/webinar">Вебінари</a></li> <li><a class="site-footer__item" href="/conference">Конференції</a></li> <li><a class="site-footer__item" href="/courses">Курси</a></li> </ul> </div> <div class="col-xs-6 col-md-3"> <ul class="site-footer__list"> <li> <span class="site-footer__title"> Розділи </span> </li> <li><a class="site-footer__item" href="/journal">Журнал</a></li> <li><a class="site-footer__item" href="/biblioteka">Бібліотека розробок</a></li> <li><a class="site-footer__item" href="/test">Тести</a></li> <li><a class="site-footer__item" href="/labs">Лабораторні роботи</a></li> <li><a class="site-footer__item" href="/project">Проєкти</a></li> <li><a class="site-footer__item" href="/konkurs">Конкурси</a></li> <li><a class="site-footer__item" href="/olimpiada">Олімпіади</a></li> <li><a class="site-footer__item" href="/assistant">Штучний інтелект для вчителів</a></li> <li><a class="site-footer__item" href="https://naurok.ua/course/english">Курси англійської мови</a> </ul> </div> <div class="col-xs-6 col-md-3 site-footer__social"> <ul class="site-footer__list"> <li> <span class="site-footer__title"> Про нас </span> </li> <li><a class="site-footer__item" href="/page/about">Про «На Урок»</a></li> <li><a class="site-footer__item" href="/school/request">Співпраця закладів освіти</a></li> </ul> <a href="/page/contact-us" class="button button--primary"> Зворотний зв'язок </a> <div class="site-footer__social-group"> <a target="_blank" href="https://www.youtube.com/channel/UCMCYaKTwZ1Olw1fuzLvgA_Q" class="site-footer__social-item site-footer__social-item--youtube"> <img src="/img/footer/youtube-ico.svg" alt=""> </a> <a target="_blank" href="https://www.facebook.com/naurok.com.ua/" class="site-footer__social-item site-footer__social-item--facebook"> <img src="/img/footer/facebook-ico.svg" alt=""> </a> <a target="_blank" href="https://t.me/naurok" class="site-footer__social-item site-footer__social-item--telegram"> <img src="/img/footer/telegram-ico.svg" alt=""> </a> </div> </div> <div class="col-xs-6 col-md-3"> <ul class="site-footer__list"> <li> <span class="site-footer__title"> Інше </span> </li> <li><a class="site-footer__item" href="https://naurok.ua">Вхід для учнів (naurok.ua)</a></li> <li><a class="site-footer__item" href="/calendar">Матеріали до свят</a></li> <li><a class="site-footer__item" href="/five">Конкурс «Фантастична п’ятірка»</a></li> </ul> </div> </div> <div class="row site-footer__copyright"> <div class="site-footer__copyright-info"> <div class="row"> <div class="col-xs-12 col-lg-6"> <small class="site-footer__title site-footer__title--small"> © 2017-2024, ТОВ «На Урок» </small> </div> <div class="col-xs-12 col-lg-6 text-xl-right"> <a href="/page/terms-of-use" class="site-footer__title--small">Угода користувача</a> | <a href="/page/terms" class="site-footer__title--small">Умови користування</a> | <a href="/page/privacy-policy" class="site-footer__title--small">Політика конфіденційності</a> </div> </div> </div> </div> </div> </div> </footer> <div class="modal fade" id="registration" tabindex="-1" role="dialog" aria-labelledby="registration"> <div class="modal-dialog modal-registration" role="document"> <div class="modal-content"> <div class="modal-body"> <div class="account-page account-registration" style="margin-top:10px"> <div class="row"> <div class="col-md-12 col-sm-12"> <div class="h1-block text-center" style=" margin: 0 0 10px; font-weight: 700; font-size: 30px; line-height: 1; color: #bdbdbd;">Реєстрація на сайті «На Урок»</div> <div class="sth-form sth-form-white"> <div class="auth-clients"> <a class="facebook auth-link-facebook" href="/account/auth?authclient=facebook" title="Facebook"> <i class="fa fa-facebook-square" aria-hidden="true"></i> Зареєструватись за допомогою Facebook </a> </div> <div class="auth-clients"> <a class="google auth-link-google" href="/account/auth?authclient=google" title="Facebook"> <i class="fa fa-google-plus-square" aria-hidden="true"></i> Зареєструватись за допомогою Google </a> </div> <div class="auth-or">або</div> <form id="w6" action="/registration" method="post"> <input type="hidden" name="_csrf" value="VgqRfpOjNdtKWTPhe9Go6Cw96xmuqVFO9ACzcZ3LJg0yTPwM1psArDkAcYkdkp2RHn-DKvaZY3ufaIMl-oFcQg=="> <div class="form-group field-lastname required"> <label class="control-label" for="lastname">Прізвище</label> <input type="text" id="lastname" class="form-control input-lg" name="lastName" maxlength="255" placeholder="Вкажіть прізвище" aria-required="true"> <p class="help-block help-block-error"></p> </div> <div class="form-group field-firstname required"> <label class="control-label" for="firstname">Ім'я</label> <input type="text" id="firstname" class="form-control input-lg" name="firstName" maxlength="255" placeholder="Вкажіть ім'я" aria-required="true"> <p class="help-block help-block-error"></p> </div> <div class="form-group field-email required"> <label class="control-label" for="email">Email</label> <input type="text" id="email" class="form-control input-lg" name="email" placeholder="Вкажіть ваш email" aria-required="true"> <p class="help-block help-block-error"></p> </div> <div class="form-group field-password required"> <label class="control-label" for="password">Пароль</label> <input type="password" id="password" class="form-control input-lg" name="password" placeholder="Придумайте пароль" aria-required="true"> <p class="help-block help-block-error"></p> </div> <div class="form-group field-recaptcha"> <label class="control-label" for="recaptcha"></label> <input type="hidden" id="recaptcha" class="form-control" name="reCaptcha"> <p class="help-block help-block-error"></p> </div> <p style="margin-top:20px; text-align:center;">Реєструючись, ви погоджуєтеся з <a target="_blank" href="/page/terms-of-use">угодою користувача</a> та <a target="_blank" href="/page/privacy-policy">політикою конфіденційності</a>.</p> <button type="submit" class="sth-btn-shaped sth-btn-shaped-lime btn-block"> Зареєструватись</button> </form> <div class="text-center" style="margin-top:20px;"> Вже зареєстровані? <a class="sth-underline-reverse" href="/login">Спробуйте увійти</a> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="FacebookAlert" tabindex="-1" role="dialog" aria-labelledby="FacebookAlert"> <div class="modal-dialog" role="document"> <div class="modal-content modal-facebook"> <div class="modal-body"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <i class="fa fa-thumbs-o-up" aria-hidden="true"></i> <div class="modal-message-title">Давай дружити!</div> <div class="modal-message">Оновлення «На Урок» — в кожну стрічку Facebook</div> <div class="modal-facebook-widget"> <div class="fb-page" data-href="https://www.facebook.com/naurok.com.ua" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/naurok.com.ua" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/naurok.com.ua">«На Урок». Освітній інтернет-проект</a></blockquote></div> </div> <div class="modal-close-link"> <a href="javascript:void(0)" data-dismiss="modal"> Дякую, Я вже давно з вами</a> </div> </div> </div> </div> </div> <div class="modal fade" id="SubscribeAlert" tabindex="-1" role="dialog" aria-labelledby="SubscribeAlert"> <div class="modal-dialog" role="document"> <div class="modal-content modal-email"> <div class="modal-body"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <i class="fa fa-paper-plane" aria-hidden="true"></i> <div class="modal-message-title">Розсилка «На Урок»</div> <div class="modal-message">Ми надсилатимемо наші цікаві та дуже корисні статті щоп’ятниці</div> <div class="form-inline"> <div class="form-group"> <label class="sr-only" for="emailForm">Ваш e-mail</label> <input type="email" class="form-control email-subscribe" id="emailForm" placeholder="Ваш e-mail"> </div> <button type="submit" class="btn btn-primary btn-subscribe">Підписатись</button> <div class="alert alert-success success-form hide">Дякуємо! Ми будемо тримати Вас в курсі!</div> </div> </div> </div> </div> </div> <script src="https://www.gstatic.com/firebasejs/5.11.0/firebase.js"></script> <script> // Initialize Firebase var config = { apiKey: "AIzaSyDqZNEmjh0EBu1hQqQR22QswP2ZFoOAnTE", authDomain: "naurok-com-ua.firebaseapp.com", databaseURL: "https://naurok-com-ua.firebaseio.com", projectId: "naurok-com-ua", storageBucket: "naurok-com-ua.appspot.com", messagingSenderId: "756484883010" }; firebase.initializeApp(config); </script> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Organization", "name": "«На Урок»", "url": "https://naurok.com.ua", "logo": "https://naurok.com.ua/img/logo_new3.png", "sameAs": [ "https://www.facebook.com/naurok.com.ua", "https://www.facebook.com/groups/naurok.com.ua/", "https://plus.google.com/116882310924056429434", "https://www.youtube.com/channel/UCMCYaKTwZ1Olw1fuzLvgA_Q" ] } </script> <script src="//www.google.com/recaptcha/api.js?render=6Lfj5vQUAAAAAOjsdAMk32BeA8J-E7c86_GWFvco"></script> <script src="/js/app_core.js?4.1"></script> <script src="/assets/cb30fc59caa0617bdb70be372b05a914/jquery.js"></script> <script src="/assets/af03f6b16f606305d9cf827034cc8968/yii.js"></script> <script src="/js/app_set.js?9"></script> <script src="/js/script.full.js?v1.2.5"></script> <script src="/assets/f0db75bd7fb3b61fd5c2b967f1a77e3e/js/bootstrap.js"></script> <script src="/assets/af03f6b16f606305d9cf827034cc8968/yii.activeForm.js"></script> <script>jQuery(function ($) { jQuery('.webinar-link').click(function(){ window.location.href=$(this).attr('data-url'); }); jQuery('#w5').yiiActiveForm([], []); "use strict"; grecaptcha.ready(function() { grecaptcha.execute("6Lfj5vQUAAAAAOjsdAMk32BeA8J-E7c86_GWFvco", {action: "reg"}).then(function(token) { jQuery("#" + "recaptcha").val(token); const jsCallback = ""; if (jsCallback) { eval("(" + jsCallback + ")(token)"); } }); }); jQuery('#w6').yiiActiveForm([], []); $('.btn-subscribe').click(function(){ if($('.email-subscribe').val() != ''){ Cookies.set('modal_subscribe', 'subscribed'); $.post('/api/subscriber',{email:$('.email-subscribe').val(),_csrf:'VgqRfpOjNdtKWTPhe9Go6Cw96xmuqVFO9ACzcZ3LJg0yTPwM1psArDkAcYkdkp2RHn-DKvaZY3ufaIMl-oFcQg=='},function(data){ console.log(data); $('.modal-email .alert').text('Дякуємо! Ми будемо тримати Вас в курсі!').removeClass('hide alert-warning').addClass('alert-success'); }).fail(function(data) { $('.modal-email .alert').text(data.responseJSON[0].message).removeClass('hide alert-success').addClass('alert-warning'); }); } }) });</script> </body> </html>