Formularze w HTML5 презентация

CZY ZMIANA BYŁA POTRZEBNA?
Do tej pory, chcąc stworzyć formularz, musieliśmy się posługiwać jedynie 6 typami pól:
– pole to służy do wprowadzania krótkiego, zawierającego się w jednej linii, tekstu;
,
– pola wielokrotnego oraz jednokrotnego wyboru;
– pole służące do wybierania plików z dysku;
,
– pole z listą opcji jednokrotnego lub wielokrotnego wyboru;
– pole służące do wprowadzania długiego tekstu, który może zawierać wiele linijek;<br><input type="hidden"> – ukryte pole służące do przekazywania różnego rodzaju danych tekstowych.<br></div><h3 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/190365/slide-1.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="CZY ZMIANA BYŁA POTRZEBNA? Do tej pory, chcąc stworzyć formularz, musieliśmy się posługiwać" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/190365/slide-1.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/190365/slide-1.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/190365/slide-1.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/190365/slide-1.jpg 1440w" class="slides-image"></h3><!--]--><!--[--><div class="section"><div></div></div><!--]--></div></div><div class="slides-wrapper"><div id="slide3" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 3</span></div><!----><h3 class="slides-content text-center font-bold"><div><p>SPRAWDZANIE POPRAWNOŚCI DANYCH W HTML5<br>Do tej pory nie mieliśmy praktycznie żadnych narzędzi dostępnych w języku HTML,</div></h3><div class="slides-content">których mogliśmy użyć, aby sprawdzić poprawność wprowadzonych w formularzu danych. Jedyny atrybut, jakim mogliśmy się posłużyć, to atrybut maxlength, który służy do ograniczania długości tekstu wprowadzonego w pole tekstowe.<br>Najbardziej przydatnym nowym narzędziem w walce o dobrze wypełniony formularz jest z pewnością atrybut require. Dzięki niemu możemy wymóc na użytkowniku wypełnienie lub zaznaczenie pola – innymi słowy – dzięki niemu możemy uczynić pole obowiązkowym. Tworząc więc pole <inputtype="email" required> upewniamy się, że użytkownik poda nam adres e-mail.<br></div><h3 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/190365/slide-2.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="SPRAWDZANIE POPRAWNOŚCI DANYCH W HTML5 Do tej pory nie mieliśmy praktycznie żadnych narzędzi" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/190365/slide-2.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/190365/slide-2.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/190365/slide-2.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/190365/slide-2.jpg 1440w" class="slides-image"></h3><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide4" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 4</span></div><!----><h3 class="slides-content text-center font-bold"><div><p>ATRYBUTY ZWIĄZANE Z FORMULARZAMI<br><p>Poza atrybutami sprawdzającymi poprawność danych, formularze zyskały kilka innych atrybutów.</div></h3><div class="slides-content">Najszerzej używanym w tym momencie jest atrybut placeholder, który pozwala na wprowadzenie tekstu tymczasowego do pól formularza. Jest on usuwany, gdy tylko użytkownik wypełni pole. Atrybut ten jest często błędnie wykorzystywany jako zamiennik znacznika label. Służy on do prezentowania przykładowego wypełnienia pola, a nie do jego opisywania.<br>Innym przydatnym atrybutem jest autofocus, po użyciu którego, wybrane pole jest ustawiane jako aktywne zaraz po załadowaniu strony. Funkcja ta może idealnie sprawdzić się na stronie wyszukiwarki, przykład: <input type="search"autofocus>.<br></div><h3 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/190365/slide-3.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="ATRYBUTY ZWIĄZANE Z FORMULARZAMI Poza atrybutami sprawdzającymi poprawność danych, formularze zyskały kilka innych" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/190365/slide-3.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/190365/slide-3.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/190365/slide-3.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/190365/slide-3.jpg 1440w" class="slides-image"></h3><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide5" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 5</span></div><!----><h3 class="slides-content text-center font-bold"><div><p>ATRYBUTY ZWIĄZANE Z FORMULARZAMI<br><p>Dzięki innemu nowemu atrybutowi o nazwie autocomplete możemy wyłączyć funkcję autouzupełniania dla danego</div></h3><div class="slides-content">pola. Autouzupełnianie jest szczególnie kłopotliwe, jeśli przypadkiem może ujawnić informacje wprowadzone do pola przez innych użytkowników. Przykładem pola, które nie powinno mieć podpowiedzi wcześniej wprowadzonych wartości jest pole na hasła jednorazowe. Przykład pola z wyłączonym autouzupełnianiem: <inputtype="text" autocomplete="off">.<br></div><h3 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/190365/slide-4.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="ATRYBUTY ZWIĄZANE Z FORMULARZAMI Dzięki innemu nowemu atrybutowi o nazwie autocomplete możemy wyłączyć" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/190365/slide-4.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/190365/slide-4.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/190365/slide-4.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/190365/slide-4.jpg 1440w" class="slides-image"></h3><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide6" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 6</span></div><!----><h3 class="slides-content text-center font-bold"><div><p>NOWE TYPY PÓL FORMULARZA<br><input type="datetime">, <input type="datetime-local"> – służy do podawania daty i godziny – w pierwszym wariancie w strefie czasowej</div></h3><div class="slides-content">UTC, a w drugim – w lokalnej strefie czasowej. Pola te nie są na razie obsługiwane przez żadną przeglądarkę.<br><input type="week">, <input type="month"> – pola służące do wyboru kolejno tygodnia w danym roku oraz miesiąca w roku. Pola wspierane jedynie przez przeglądarki na silniku Webkit.<br><input type="tel"> – pole służące do wprowadzania numeru telefonu. <br><input type="search"> – pole to, podobnie jak powyższe, wyróżnia się jedynie zachowaniem po kliknięciu w nie. A w zasadzie ma się wyróżniać, bo jak do tej pory, żadna z przeglądarek nie korzysta z niego w sposób szczególny.<br><input type="color"> – pole służące do wybierania koloru. <br><input type="range"> – pole, które służy do wybierania liczby z podanego zakresu.<br></div><h3 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/190365/slide-5.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="NOWE TYPY PÓL FORMULARZA , – służy do podawania daty i godziny –" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/190365/slide-5.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/190365/slide-5.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/190365/slide-5.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/190365/slide-5.jpg 1440w" class="slides-image"></h3><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide7" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 7</span></div><!----><h3 class="slides-content text-center font-bold"><div><p>NOWE TYPY PÓL FORMULARZA<br><p><input type="email"> – pole, które z całą pewnością znajdzie zastosowanie na każdej stronie –</div></h3><div class="slides-content">służy do wprowadzania adresu e-mail. Przeglądarka przy wprowadzaniu maila sprawdzi, czy wygląda on na poprawny (musi zawierać znak @, nie może kończyć, ani zaczynać się kropką itp.).<br><input type="url"> – dzięki niemu, możemy wymusić na użytkowniku podanie poprawnego adresu URL. Adres ten, będzie musiał zaczynać się protokołem (czyli na przykład http://, https://, czy ftp://).<br><input type="number"> – wymusza na użytkowniku wprowadzenie liczby. Dozwolony zakres liczb można określić za pomocą atrybutów max i min<br><input type="time"> – jak nietrudno się domyślić, służy do podawania godziny. Również w pełni jedynie przez przeglądarki na silniku Webkit.<br></div><h3 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/190365/slide-6.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="NOWE TYPY PÓL FORMULARZA – pole, które z całą pewnością znajdzie zastosowanie na" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/190365/slide-6.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/190365/slide-6.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/190365/slide-6.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/190365/slide-6.jpg 1440w" class="slides-image"></h3><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide8" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 8</span></div><!----><h3 class="slides-content text-center font-bold"><div><p>PODPOWIADANIE WARTOŚCI DO WPROWADZENIA<br><p>Nowy element datalist daje nam możliwość stworzenia podpowiedzi do wypełnianego pola. Dzięki temu możemy</div></h3><div class="slides-content">łatwo zasugerować użytkownikowi jedną z najczęściej wybieranych opcji, czy też ułatwić mu wypełnianie skomplikowanych danych.<br>Aby przypisać podpowiedzi do wybranego pola, podajemy identyfikator nadany elementowi datalist w atrybucie list pola.<br></div><h3 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/190365/slide-7.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="PODPOWIADANIE WARTOŚCI DO WPROWADZENIA Nowy element datalist daje nam możliwość stworzenia podpowiedzi do" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/190365/slide-7.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/190365/slide-7.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/190365/slide-7.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/190365/slide-7.jpg 1440w" class="slides-image"></h3><!--]--><!----></div></div><div class="slides-wrapper"><!----></div><!--]--></div><div class="section"><div></div></div><form id="download" action="/api/" method="post" class="download"><!----><div class="download-description"> Имя файла: Formularze-w-HTML5.pptx <br> Количество просмотров: 59 <br> Количество скачиваний: 0</div><button class="download-btn" type="submit">Скачать</button><!----></form><div class="navigation"><div class="navigation-item"><div>- Предыдущая</div><a href="/informatika/primenenie-elektronnoy-prezentatsii-na-uroke-istorii" class="navigation-link">Применение электронной презентации на уроке истории искусств</a></div><div class="navigation-item"><div>Следующая -</div><a href="/istoriya/tserkovnyy-raskol-3" class="navigation-link">Церковный раскол</a></div></div></div></div><div class="item-layoutRelated"><div class="section"><div></div></div></div></div><div class="item-layout"><div class="related"><h2 class="related-header">Похожие презентации</h2><div class="related-wrapper"><!--[--><div class="related-item"><a href="/informatika/hranenie-i-obrabotka-informatsii-v-bazah-2" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/391461/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/391461/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/391461/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/391461/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/391461/slide-0.jpg 1440w" class="slides-image related-itemImage"> Хранение и обработка информации в базах данных</a></div><div class="related-item"><a href="/informatika/kommutatsiya-kanalov-kommutatsiya-paketov-postoyannaya-i" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/253608/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/253608/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/253608/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/253608/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/253608/slide-0.jpg 1440w" class="slides-image related-itemImage"> Коммутация каналов, коммутация пакетов. Постоянная и динамическая коммутация сети</a></div><div class="related-item"><a href="/informatika/dlya-chego-nuzhny-smi" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/177978/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/177978/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/177978/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/177978/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/177978/slide-0.jpg 1440w" class="slides-image related-itemImage"> Для чего нужны СМИ</a></div><div class="related-item"><a href="/informatika/literaturnyy-proekt-po-teme-zagadki-s" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/562776/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/562776/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/562776/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/562776/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/562776/slide-0.jpg 1440w" class="slides-image related-itemImage"> Литературный проект по теме Загадки с использованием ИКТ.</a></div><div class="related-item"><a href="/informatika/osnovy-kompyuternogo-modelirovaniya" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/174806/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/174806/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/174806/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/174806/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/174806/slide-0.jpg 1440w" class="slides-image related-itemImage"> Основы компьютерного моделирования</a></div><div class="related-item"><a href="/informatika/sozdanie-multfilma-v-programme-powerpoint-6" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/590015/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/590015/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/590015/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/590015/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/590015/slide-0.jpg 1440w" class="slides-image related-itemImage"> Создание мультфильма в программе PowerPoint</a></div><div class="related-item"><a href="/informatika/proekt-razrabotka-sayta-wwwvzelekecom" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/263750/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/263750/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/263750/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/263750/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/263750/slide-0.jpg 1440w" class="slides-image related-itemImage"> Проект Разработка сайта www.VZELEKE.com</a></div><div class="related-item"><a href="/informatika/sostav-i-struktura-funktsionalnye-i-obespechivayushchie" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/367382/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/367382/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/367382/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/367382/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/367382/slide-0.jpg 1440w" class="slides-image related-itemImage"> Состав и структура, функциональные и обеспечивающие подсистемы, жизненный цикл КИС</a></div><div class="related-item"><a href="/informatika/gayd-po-nastroyke-i-ispolzovaniyu-ssh" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/586966/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/586966/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/586966/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/586966/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/586966/slide-0.jpg 1440w" class="slides-image related-itemImage"> Гайд по настройке и использованию SSH - Secure Shell, сетевой протокол</a></div><div class="related-item"><a href="/informatika/naznachenie-i-ustroystvo-kompyutera-kompyuternaya-pamyat" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/501933/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/501933/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/501933/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/501933/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/501933/slide-0.jpg 1440w" class="slides-image related-itemImage"> Назначение и устройство компьютера. Компьютерная память.</a></div><div class="related-item"><a href="/informatika/zhurnal-n118-gazeta-gimnazii-n2-g" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/328793/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/328793/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/328793/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/328793/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/328793/slide-0.jpg 1440w" class="slides-image related-itemImage"> Журнал №118. Газета гимназии №2 г. Железнодорожный. День учителя</a></div><div class="related-item"><a href="/informatika/elektronnaya-kommertsiya-v-internete-1" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/97711/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/97711/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/97711/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/97711/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/97711/slide-0.jpg 1440w" class="slides-image related-itemImage"> Электронная коммерция в интернете</a></div><div class="related-item"><a href="/informatika/vsemirnaya-pautina-8" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/372265/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/372265/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/372265/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/372265/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/372265/slide-0.jpg 1440w" class="slides-image related-itemImage"> Всемирная паутина</a></div><div class="related-item"><a href="/informatika/horoshaya-prezentatsiya-zalog-udachnogo-vystupleniya" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/430860/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/430860/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/430860/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/430860/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/430860/slide-0.jpg 1440w" class="slides-image related-itemImage"> Хорошая презентация - залог удачного выступления</a></div><div class="related-item"><a href="/informatika/proekt-vdrone-navgatsya-kvadrokopterv-v-mezhah" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/370787/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/370787/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/370787/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/370787/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/370787/slide-0.jpg 1440w" class="slides-image related-itemImage"> Проект “VDrone. Навігація квадрокоптерів в межах певного середовища</a></div><div class="related-item"><a href="/informatika/proverochnaya-rabota-po-informatike-n2-3" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/547314/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/547314/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/547314/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/547314/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/547314/slide-0.jpg 1440w" class="slides-image related-itemImage"> Проверочная работа по информатике №2 (3 класс)</a></div><div class="related-item"><a href="/informatika/ierarhicheskie-klassifikatsii" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/217517/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/217517/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/217517/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/217517/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/217517/slide-0.jpg 1440w" class="slides-image related-itemImage"> Иерархические классификации</a></div><div class="related-item"><a href="/informatika/tipy-dannyh-3" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/279157/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/279157/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/279157/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/279157/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/279157/slide-0.jpg 1440w" class="slides-image related-itemImage"> Типы данных</a></div><div class="related-item"><a href="/informatika/kompyuter-kak-univesalnoe-ustroystvo-dlya-raboty-3" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/592034/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/592034/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/592034/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/592034/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/592034/slide-0.jpg 1440w" class="slides-image related-itemImage"> Компьютер как унивесальное устройство для работы с информацией. Персональный компьютер</a></div><div class="related-item"><a href="/informatika/adresatsiya-ipv6" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/432055/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/432055/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/432055/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/432055/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/432055/slide-0.jpg 1440w" class="slides-image related-itemImage"> Адресация IPv6</a></div><div class="related-item"><a href="/informatika/informatsionnye-resursy-i-servisy-interneta-5" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/225988/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/225988/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/225988/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/225988/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/225988/slide-0.jpg 1440w" class="slides-image related-itemImage"> Информационные ресурсы и сервисы интернета</a></div><div class="related-item"><a href="/informatika/razrabotka-meropriyatiya-po-informatike-sistemy-upravleniya" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/487084/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/487084/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/487084/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/487084/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/487084/slide-0.jpg 1440w" class="slides-image related-itemImage"> Разработка мероприятия по информатике Системы управления базами данных</a></div><div class="related-item"><a href="/informatika/funktsionalnoe-programmirovanie-2" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/276075/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/276075/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/276075/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/276075/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/276075/slide-0.jpg 1440w" class="slides-image related-itemImage"> Функциональное программирование</a></div><div class="related-item"><a href="/informatika/rabota-so-vremenem-pulsein-millis-micros" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/305475/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/305475/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/305475/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/305475/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/305475/slide-0.jpg 1440w" class="slides-image related-itemImage"> Работа со временем pulsein(), millis(), micros(), delay(), delaymicroseconds()</a></div><div class="related-item"><a href="/informatika/1-ispolzovanie-sredstv-ms-office-dlya" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/376427/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/376427/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/376427/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/376427/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/376427/slide-0.jpg 1440w" class="slides-image related-itemImage"> 1. Использование средств MS Office для создания электронного учебника. Средства MS Word</a></div><div class="related-item"><a href="/informatika/znakomstvo-s-oracle-modeli-dannyh-relyatsionnaya" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/8627/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/8627/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/8627/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/8627/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/8627/slide-0.jpg 1440w" class="slides-image related-itemImage"> Знакомство с Oracle. Модели данных. Реляционная алгебра (лекция 2)</a></div><div class="related-item"><a href="/informatika/bezopasnost-detey-v-seti-internet-web" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/236725/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/236725/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/236725/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/236725/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/236725/slide-0.jpg 1440w" class="slides-image related-itemImage"> Безопасность детей в сети Интернет. Web-путешествие по сайтам безопасного Интернета</a></div><div class="related-item"><a href="/informatika/rol--mstse-navchalnih-distsipln-v" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/420246/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/420246/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/420246/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/420246/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/420246/slide-0.jpg 1440w" class="slides-image related-itemImage"> Роль і місце навчальних дисциплін в Управлінні інформаційною безпекою</a></div><!--]--></div></div></div></div><!--]--><!--]--><!--]--></div></div></main><footer class="footer"><div class="layout"><!----><div class="footer-contacts"><svg class="footer-contactsIcon" viewBox="0 0 27 26" xmlns="http://www.w3.org/2000/svg"><use xlink:href="/images/icons.svg#contacts"></use></svg> Обратная связь</div><!----><div class="footer-contactsEmail"> Email: <span class="footer-contactsShow">Нажмите что бы посмотреть</span></div></div></footer></div><!--]--></div><script>window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q){return {data:{meta:{result:{meta:{h1:m,main_text:a,main_title:n,main_description:o,main_keywords:p,main_image:a},app:{logo_image:q,logo_image_width:r,logo_image_height:s,logo_text:a,image_width_full:t,image_width_min:u,recaptcha_key:v,yandex_search:w,ya_context:e,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:x,footer_before:a,footer:a,dark_theme:e,strategy:{image_alt_words:h,item_slide_header:y,item_images:z,item_images_tag:i,item_words_h3:d,item_words_tag:i,item_words_1:h,routing:A,item_slide_skipping:B,item_download_timeout:C,item_slider_width:D,item_show_pdf:d,item_show_contents:d,item_show_filename:d},colors:{header_text:k,header_bg:j,accent:j}},social:E}},categories:{result:[{id:F,ordering:b,name:"Без категории",pseudoname:"uncategorized"},{id:144,ordering:b,name:"Бизнес",pseudoname:"biznes"},{id:146,ordering:b,name:"Образование",pseudoname:"obrazovanie"},{id:149,ordering:b,name:"Финансы",pseudoname:"finansy"},{id:150,ordering:b,name:"Государство",pseudoname:"gosudarstvo"},{id:152,ordering:b,name:"Спорт",pseudoname:"sport"},{id:154,ordering:b,name:"Армия",pseudoname:"armiya"},{id:156,ordering:b,name:"Культурология",pseudoname:"kulturologiya"},{id:157,ordering:b,name:"Еда и кулинария",pseudoname:"eda-i-kulinariya"},{id:158,ordering:b,name:"Лингвистика",pseudoname:"lingvistika"},{id:163,ordering:b,name:"Черчение",pseudoname:"cherchenie"},{id:164,ordering:b,name:"Физкультура",pseudoname:"fizkultura"},{id:165,ordering:b,name:"ИЗО",pseudoname:"izo"},{id:166,ordering:b,name:"Психология",pseudoname:"psihologiya"},{id:116,ordering:F,name:"Английский язык",pseudoname:"angliyskiy-yazyk"},{id:108,ordering:2,name:"Астрономия",pseudoname:"astronomiya"},{id:104,ordering:3,name:"Алгебра",pseudoname:"algebra"},{id:106,ordering:4,name:"Биология",pseudoname:"biologiya"},{id:142,ordering:5,name:"География",pseudoname:"geografiya"},{id:141,ordering:6,name:"Геометрия",pseudoname:"geometria"},{id:123,ordering:7,name:"Детские презентации",pseudoname:"detskie-prezentatsii"},{id:107,ordering:8,name:G,pseudoname:"informatika"},{id:109,ordering:H,name:"История",pseudoname:"istoriya"},{id:139,ordering:10,name:"Литература",pseudoname:"literatura"},{id:119,ordering:11,name:"Маркетинг",pseudoname:"marketing"},{id:114,ordering:12,name:"Математика",pseudoname:"matematika"},{id:138,ordering:h,name:"Медицина",pseudoname:"medetsina"},{id:118,ordering:14,name:"Менеджмент",pseudoname:"menedzhment"},{id:137,ordering:15,name:"Музыка",pseudoname:"muzyka"},{id:136,ordering:16,name:"МХК",pseudoname:"mhk"},{id:130,ordering:17,name:"Немецкий язык",pseudoname:"nemetskiy-yazyk"},{id:105,ordering:18,name:"ОБЖ",pseudoname:"obzh"},{id:133,ordering:19,name:"Обществознание ",pseudoname:"obshchestvoznanie"},{id:132,ordering:20,name:"Окружающий мир ",pseudoname:"okruzhayushchiy-mir"},{id:131,ordering:21,name:"Педагогика ",pseudoname:"pedagogika"},{id:129,ordering:22,name:"Русский язык",pseudoname:"russkiy-yazyk"},{id:128,ordering:24,name:"Технология",pseudoname:"tehnologiya"},{id:127,ordering:25,name:"Физика",pseudoname:"fizika"},{id:126,ordering:26,name:"Философия",pseudoname:"filosofiya"},{id:125,ordering:27,name:"Химия",pseudoname:"himiya"},{id:124,ordering:29,name:"Экология",pseudoname:"ekologiya"},{id:121,ordering:30,name:"Экономика",pseudoname:"ekonomika"},{id:120,ordering:31,name:"Юриспруденция",pseudoname:"yurisprudentsiya"}]},item:{result:{id:190365,name:l,category:G,count:H,jpg:"jpg\u002F190365",hits:59,download:b,h1:"Formularze w HTML5 презентация",meta:{h1:l,title:l,description:"Formularze w HTML5 презентация на тему, доклад, Информатика",keywords:"Formularze w HTML5, презентация, доклад, проект, скачать, на тему, PowerPoint, урок, класс, школа, Информатика",download_link:a},text:"Вы можете изучить и скачать доклад-презентацию на тему Презентация на тему Formularze w HTML5 из раздела Информатика. Презентация на заданную тему содержит 9 слайдов. Для просмотра воспользуйтесь проигрывателем, если материал оказался полезным для Вас - поделитесь им с друзьями с помощью социальных кнопок и добавьте наш сайт презентаций в закладки!",seo_text:"\u003Cp\u003ECZY ZMIANA BYŁA POTRZEBNA?\u003Cbr\u003E\u003Cp\u003EDo tej pory, chcąc stworzyć formularz, musieliśmy się posługiwać jedynie 6 typami pól:\u003Cbr\u003E\u003Cinput type=\"text\"\u003E – pole to służy do wprowadzania krótkiego, zawierającego się w jednej linii, tekstu;\u003Cbr\u003E\u003Cinput type=\"checkbox",file:"Formularze-w-HTML5.pptx",texts:["\u003Cp\u003EFORMULARZE W HTML5\u003Cbr\u003E\u003Cp\u003EBARTŁOMIEJ LITWINIEC\u003Cbr\u003E","\u003Cp\u003ECZY ZMIANA BYŁA POTRZEBNA?\u003Cbr\u003E\u003Cp\u003EDo tej pory, chcąc stworzyć formularz, musieliśmy się posługiwać jedynie 6 typami pól:\u003Cbr\u003E\u003Cinput type=\"text\"\u003E – pole to służy do wprowadzania krótkiego, zawierającego się w jednej linii, tekstu;\u003Cbr\u003E\u003Cinput type=\"checkbox\"\u003E, \u003Cinput type=\"radio\"\u003E – pola wielokrotnego oraz jednokrotnego wyboru;\u003Cbr\u003E\u003Cinput type=\"file\"\u003E – pole służące do wybierania plików z dysku;\u003Cbr\u003E\u003Cselect\u003E, \u003Cselect multiple\u003E – pole z listą opcji jednokrotnego lub wielokrotnego wyboru;\u003Cbr\u003E\u003Ctextarea\u003E – pole służące do wprowadzania długiego tekstu, który może zawierać wiele linijek;\u003Cbr\u003E\u003Cinput type=\"hidden\"\u003E – ukryte pole służące do przekazywania różnego rodzaju danych tekstowych.\u003Cbr\u003E","\u003Cp\u003ESPRAWDZANIE POPRAWNOŚCI DANYCH W HTML5\u003Cbr\u003EDo tej pory nie mieliśmy praktycznie żadnych narzędzi dostępnych w języku HTML, których mogliśmy użyć, aby sprawdzić poprawność wprowadzonych w formularzu danych. Jedyny atrybut, jakim mogliśmy się posłużyć, to atrybut maxlength, który służy do ograniczania długości tekstu wprowadzonego w pole tekstowe.\u003Cbr\u003ENajbardziej przydatnym nowym narzędziem w walce o dobrze wypełniony formularz jest z pewnością atrybut require. Dzięki niemu możemy wymóc na użytkowniku wypełnienie lub zaznaczenie pola – innymi słowy – dzięki niemu możemy uczynić pole obowiązkowym. Tworząc więc pole \u003Cinputtype=\"email\" required\u003E upewniamy się, że użytkownik poda nam adres e-mail.\u003Cbr\u003E","\u003Cp\u003EATRYBUTY ZWIĄZANE Z FORMULARZAMI\u003Cbr\u003E\u003Cp\u003EPoza atrybutami sprawdzającymi poprawność danych, formularze zyskały kilka innych atrybutów. Najszerzej używanym w tym momencie jest atrybut placeholder, który pozwala na wprowadzenie tekstu tymczasowego do pól formularza. Jest on usuwany, gdy tylko użytkownik wypełni pole. Atrybut ten jest często błędnie wykorzystywany jako zamiennik znacznika label. Służy on do prezentowania przykładowego wypełnienia pola, a nie do jego opisywania.\u003Cbr\u003EInnym przydatnym atrybutem jest autofocus, po użyciu którego, wybrane pole jest ustawiane jako aktywne zaraz po załadowaniu strony. Funkcja ta może idealnie sprawdzić się na stronie wyszukiwarki, przykład: \u003Cinput type=\"search\"autofocus\u003E.\u003Cbr\u003E","\u003Cp\u003EATRYBUTY ZWIĄZANE Z FORMULARZAMI\u003Cbr\u003E\u003Cp\u003EDzięki innemu nowemu atrybutowi o nazwie autocomplete możemy wyłączyć funkcję autouzupełniania dla danego pola. Autouzupełnianie jest szczególnie kłopotliwe, jeśli przypadkiem może ujawnić informacje wprowadzone do pola przez innych użytkowników. Przykładem pola, które nie powinno mieć podpowiedzi wcześniej wprowadzonych wartości jest pole na hasła jednorazowe. Przykład pola z wyłączonym autouzupełnianiem: \u003Cinputtype=\"text\" autocomplete=\"off\"\u003E.\u003Cbr\u003E","\u003Cp\u003ENOWE TYPY PÓL FORMULARZA\u003Cbr\u003E\u003Cinput type=\"datetime\"\u003E, \u003Cinput type=\"datetime-local\"\u003E – służy do podawania daty i godziny – w pierwszym wariancie w strefie czasowej UTC, a w drugim – w lokalnej strefie czasowej. Pola te nie są na razie obsługiwane przez żadną przeglądarkę.\u003Cbr\u003E\u003Cinput type=\"week\"\u003E, \u003Cinput type=\"month\"\u003E – pola służące do wyboru kolejno tygodnia w danym roku oraz miesiąca w roku. Pola wspierane jedynie przez przeglądarki na silniku Webkit.\u003Cbr\u003E\u003Cinput type=\"tel\"\u003E – pole służące do wprowadzania numeru telefonu. \u003Cbr\u003E\u003Cinput type=\"search\"\u003E – pole to, podobnie jak powyższe, wyróżnia się jedynie zachowaniem po kliknięciu w nie. A w zasadzie ma się wyróżniać, bo jak do tej pory, żadna z przeglądarek nie korzysta z niego w sposób szczególny.\u003Cbr\u003E\u003Cinput type=\"color\"\u003E – pole służące do wybierania koloru. \u003Cbr\u003E\u003Cinput type=\"range\"\u003E – pole, które służy do wybierania liczby z podanego zakresu.\u003Cbr\u003E","\u003Cp\u003ENOWE TYPY PÓL FORMULARZA\u003Cbr\u003E\u003Cp\u003E\u003Cinput type=\"email\"\u003E – pole, które z całą pewnością znajdzie zastosowanie na każdej stronie – służy do wprowadzania adresu e-mail. Przeglądarka przy wprowadzaniu maila sprawdzi, czy wygląda on na poprawny (musi zawierać znak @, nie może kończyć, ani zaczynać się kropką itp.).\u003Cbr\u003E\u003Cinput type=\"url\"\u003E – dzięki niemu, możemy wymusić na użytkowniku podanie poprawnego adresu URL. Adres ten, będzie musiał zaczynać się protokołem (czyli na przykład http:\u002F\u002F, https:\u002F\u002F, czy ftp:\u002F\u002F).\u003Cbr\u003E\u003Cinput type=\"number\"\u003E – wymusza na użytkowniku wprowadzenie liczby. Dozwolony zakres liczb można określić za pomocą atrybutów max i min\u003Cbr\u003E\u003Cinput type=\"time\"\u003E – jak nietrudno się domyślić, służy do podawania godziny. Również w pełni jedynie przez przeglądarki na silniku Webkit.\u003Cbr\u003E","\u003Cp\u003EPODPOWIADANIE WARTOŚCI DO WPROWADZENIA\u003Cbr\u003E\u003Cp\u003ENowy element datalist daje nam możliwość stworzenia podpowiedzi do wypełnianego pola. Dzięki temu możemy łatwo zasugerować użytkownikowi jedną z najczęściej wybieranych opcji, czy też ułatwić mu wypełnianie skomplikowanych danych.\u003Cbr\u003EAby przypisać podpowiedzi do wybranego pola, podajemy identyfikator nadany elementowi datalist w atrybucie list pola.\u003Cbr\u003E","\u003Cp\u003EPODSUMOWANIE\u003Cbr\u003E\u003Cp\u003EDeweloperzy otrzymali nowe, potężne narzędzia do umieszczania formularzy na stronach internetowych. Jednak pomimo tego, że większość przeglądarek internetowych już je obsługuje, ciągle nie są szeroko wykorzystywane. Mam nadzieję, że udało mi się przybliżyć Wam nowe funkcje związane z formularzami internetowymi. Powinniśmy powoli odchodzić od używania JavaScript tam, gdzie to możliwe.\u003Cbr\u003E"],href:"\u002Finformatika\u002Fformularze-w-html5",href_category:"\u002Finformatika",date:1633656021,related:[{id:391461,name:"Хранение и обработка информации в базах данных",href:"\u002Finformatika\u002Fhranenie-i-obrabotka-informatsii-v-bazah-2",jpg:"jpg\u002F391461"},{id:253608,name:"Коммутация каналов, коммутация пакетов. Постоянная и динамическая коммутация сети",href:"\u002Finformatika\u002Fkommutatsiya-kanalov-kommutatsiya-paketov-postoyannaya-i",jpg:"jpg\u002F253608"},{id:177978,name:"Для чего нужны СМИ",href:"\u002Finformatika\u002Fdlya-chego-nuzhny-smi",jpg:"jpg\u002F177978"},{id:562776,name:"Литературный проект по теме Загадки с использованием ИКТ.",href:"\u002Finformatika\u002Fliteraturnyy-proekt-po-teme-zagadki-s",jpg:"jpg\u002F562776"},{id:174806,name:"Основы компьютерного моделирования",href:"\u002Finformatika\u002Fosnovy-kompyuternogo-modelirovaniya",jpg:"jpg\u002F174806"},{id:590015,name:"Создание мультфильма в программе PowerPoint",href:"\u002Finformatika\u002Fsozdanie-multfilma-v-programme-powerpoint-6",jpg:"jpg\u002F590015"},{id:263750,name:"Проект Разработка сайта www.VZELEKE.com",href:"\u002Finformatika\u002Fproekt-razrabotka-sayta-wwwvzelekecom",jpg:"jpg\u002F263750"},{id:367382,name:"Состав и структура, функциональные и обеспечивающие подсистемы, жизненный цикл КИС",href:"\u002Finformatika\u002Fsostav-i-struktura-funktsionalnye-i-obespechivayushchie",jpg:"jpg\u002F367382"},{id:586966,name:"Гайд по настройке и использованию SSH - Secure Shell, сетевой протокол",href:"\u002Finformatika\u002Fgayd-po-nastroyke-i-ispolzovaniyu-ssh",jpg:"jpg\u002F586966"},{id:501933,name:"Назначение и устройство компьютера. Компьютерная память.",href:"\u002Finformatika\u002Fnaznachenie-i-ustroystvo-kompyutera-kompyuternaya-pamyat",jpg:"jpg\u002F501933"},{id:328793,name:"Журнал №118. Газета гимназии №2 г. Железнодорожный. День учителя",href:"\u002Finformatika\u002Fzhurnal-n118-gazeta-gimnazii-n2-g",jpg:"jpg\u002F328793"},{id:97711,name:"Электронная коммерция в интернете",href:"\u002Finformatika\u002Felektronnaya-kommertsiya-v-internete-1",jpg:"jpg\u002F97711"},{id:372265,name:"Всемирная паутина",href:"\u002Finformatika\u002Fvsemirnaya-pautina-8",jpg:"jpg\u002F372265"},{id:430860,name:"Хорошая презентация - залог удачного выступления",href:"\u002Finformatika\u002Fhoroshaya-prezentatsiya-zalog-udachnogo-vystupleniya",jpg:"jpg\u002F430860"},{id:370787,name:"Проект “VDrone. Навігація квадрокоптерів в межах певного середовища",href:"\u002Finformatika\u002Fproekt-vdrone-navgatsya-kvadrokopterv-v-mezhah",jpg:"jpg\u002F370787"},{id:547314,name:"Проверочная работа по информатике №2 (3 класс)",href:"\u002Finformatika\u002Fproverochnaya-rabota-po-informatike-n2-3",jpg:"jpg\u002F547314"},{id:217517,name:"Иерархические классификации",href:"\u002Finformatika\u002Fierarhicheskie-klassifikatsii",jpg:"jpg\u002F217517"},{id:279157,name:"Типы данных",href:"\u002Finformatika\u002Ftipy-dannyh-3",jpg:"jpg\u002F279157"},{id:592034,name:"Компьютер как унивесальное устройство для работы с информацией. Персональный компьютер",href:"\u002Finformatika\u002Fkompyuter-kak-univesalnoe-ustroystvo-dlya-raboty-3",jpg:"jpg\u002F592034"},{id:432055,name:"Адресация IPv6",href:"\u002Finformatika\u002Fadresatsiya-ipv6",jpg:"jpg\u002F432055"},{id:225988,name:"Информационные ресурсы и сервисы интернета",href:"\u002Finformatika\u002Finformatsionnye-resursy-i-servisy-interneta-5",jpg:"jpg\u002F225988"},{id:487084,name:"Разработка мероприятия по информатике Системы управления базами данных",href:"\u002Finformatika\u002Frazrabotka-meropriyatiya-po-informatike-sistemy-upravleniya",jpg:"jpg\u002F487084"},{id:276075,name:"Функциональное программирование",href:"\u002Finformatika\u002Ffunktsionalnoe-programmirovanie-2",jpg:"jpg\u002F276075"},{id:305475,name:"Работа со временем pulsein(), millis(), micros(), delay(), delaymicroseconds()",href:"\u002Finformatika\u002Frabota-so-vremenem-pulsein-millis-micros",jpg:"jpg\u002F305475"},{id:376427,name:"1. Использование средств MS Office для создания электронного учебника. Средства MS Word",href:"\u002Finformatika\u002F1-ispolzovanie-sredstv-ms-office-dlya",jpg:"jpg\u002F376427"},{id:8627,name:"Знакомство с Oracle. Модели данных. Реляционная алгебра (лекция 2)",href:"\u002Finformatika\u002Fznakomstvo-s-oracle-modeli-dannyh-relyatsionnaya",jpg:"jpg\u002F8627"},{id:236725,name:"Безопасность детей в сети Интернет. Web-путешествие по сайтам безопасного Интернета",href:"\u002Finformatika\u002Fbezopasnost-detey-v-seti-internet-web",jpg:"jpg\u002F236725"},{id:420246,name:"Роль і місце навчальних дисциплін в Управлінні інформаційною безпекою",href:"\u002Finformatika\u002Frol--mstse-navchalnih-distsipln-v",jpg:"jpg\u002F420246"}],navigation:{next:"\u002Fistoriya\u002Ftserkovnyy-raskol-3",next_name:"Церковный раскол",prev:"\u002Finformatika\u002Fprimenenie-elektronnoy-prezentatsii-na-uroke-istorii",prev_name:"Применение электронной презентации на уроке истории искусств"}}}},state:{},_errors:{},serverRendered:d,config:{public:{SITE_NAME:I,SITE_HOST:"mypreza.com",SITE_LANG:J,API_BASE_URL:"https:\u002F\u002Fmypreza.com\u002Fapi\u002F",pwaManifest:{name:I,short_name:a,description:a,lang:J,start_url:"\u002F?standalone=true",display:"standalone",background_color:k,theme_color:"#000000",icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.f2a6e93d.png",type:c,sizes:K,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.f2a6e93d.png",type:c,sizes:K,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.f2a6e93d.png",type:c,sizes:L,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.f2a6e93d.png",type:c,sizes:L,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.f2a6e93d.png",type:c,sizes:M,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.f2a6e93d.png",type:c,sizes:M,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.f2a6e93d.png",type:c,sizes:N,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.f2a6e93d.png",type:c,sizes:N,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.f2a6e93d.png",type:c,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.f2a6e93d.png",type:c,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.f2a6e93d.png",type:c,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.f2a6e93d.png",type:c,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.f2a6e93d.png",type:c,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.f2a6e93d.png",type:c,sizes:Q,purpose:g}]},yandexMetrika:{id:"85004146",metrikaUrl:"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js",accurateTrackBounce:d,childIframe:e,clickmap:e,defer:e,useRuntimeConfig:d,trackHash:e,trackLinks:d,type:b,webvisor:e,triggerEvent:e,consoleLog:d,partytown:e,isDev:e}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:a}},pinia:{app:{meta:{h1:m,main_text:a,main_title:n,main_description:o,main_keywords:p,main_image:a},app:{logo_image:q,logo_image_width:r,logo_image_height:s,logo_text:a,image_width_full:t,image_width_min:u,recaptcha_key:v,yandex_search:w,ya_context:e,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:x,footer_before:a,footer:a,dark_theme:e,strategy:{image_alt_words:h,item_slide_header:y,item_images:z,item_images_tag:i,item_words_h3:d,item_words_tag:i,item_words_1:h,routing:A,item_slide_skipping:B,item_download_timeout:C,item_slider_width:D,item_show_pdf:d,item_show_contents:d,item_show_filename:d},colors:{header_text:k,header_bg:j,accent:j}},social:E,token:a}}}}("",0,"image\u002Fpng",true,false,"any","maskable",13,"h3","#d53032","#ffffff","Formularze w HTML5","Учебные презентации","Презентации в PowerPoint на разные темы","Презентации, проекты, доклады в PowerPoint на разные темы для учебы","Презентация, на тему, урок, класс, PowerPoint, скачати презентацію, фон, шаблон, доклад, проект.","images\u002Fdata\u002Flogo.png",185,40,720,480,"6LeioWIpAAAAAGqMN4KqMVIkekcMW7fBKHjXCd-a","2503267","[e-mail]","div","images","category","both",80,800,"\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fes5-shims\u002F0.0.2\u002Fes5-shims.min.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fshare2\u002Fshare.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cdiv class=\"ya-share2\" data-services=\"collections,gplus,vkontakte,facebook,odnoklassniki,gplus,twitter,moimir\" data-counter=\"\"\u003E\u003C\u002Fdiv\u003E",1,"Информатика",9,"Mypreza","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512"))</script><script type="module" src="/_nuxt/entry.0d6add34.js" crossorigin></script></body>
</html>