Vytvárať webové formuláre (Návod)

Vytvárať webové formuláre pre webové stránky (praktický tutoriál)

Jazyk: Nemčina

Vytváranie webových formulárov pre webové stránky (praktický tutoriál)

Ako vytvoriť webové formuláre pre svoje webové stránky - krok za krokom vysvetlené! Či chcete zbierať mená, e-mailové adresy, heslá, zaškrtávacie polia, dátumy, zoznamy alebo rozbaľovacie ponuky: naučte sa v tomto praktickom návode, ako sa dostať od prvého HTML formuláru k plne funkčnému webovému formuláru.

Vytvárať webové formuláre - od základov po funkčné formuláre
Vytvorte a prečítajte správne polia na zadanie e-mailu, hesla a ďalšieho
Vytvorenie zaškrtávacích políčok, radiotlačidiel, rozbačovacích ponúk, viacriadkových textových vstupov a ďalších
Podrobný praktický tutoriál od vývojára Stefana Haewßa trvajúci šesť hodín
S projektovými súbormi na nasledovanie zobrazených obsahov
Ideálne pre webových vývojárov, webdizajnérov a front-end vývojárov

Od jednoduchého získavania mena a e-mailovej adresy až po komplexnejší kontaktný formulár s možnosťou nahrávania: Tu sa naučíš podrobne, ako vytvárať webové formuláre pre svoje webové stránky!

Zugriff auf alle Inhalte

In der Mitgliedschaft ab * € monatlich

oder

Inhalt in den Warenkorb

Sofort-Download nach Kauf: einmalig * €

Podrobnosti

Obsah: 6 h Video-tréning
Licencia: súkromná a komerčná Práva na používanie
Bonus: vrátane pracovných materiálov

Kategórie

Webdesign, CMS a vývoj

Vytvorené s láskou od:

Stephan Haewß

Vytvoriť webové formuláre - Úvod

Vytvorenie webových formulárov: 1.1 | Úvod a prehľad

Zadarmo

Vytváranie webových formulárov: 1.1 | Úvod a prehľad

Tu sa dozvieš, o čom kurz je a čo môžeš očakávať.

Vytvorte webové formuláre: 1.2 | HTML formuláre - prečo a ako ich používať?

Vytváranie webových formulárov: 1.2 | HTML formuláre - prečo a ako ich používať?

Prečo by sme vôbec mali používať HTML formuláre a ako všeobecne postupovať?

Vytvorenie webového formulára: 1.3 | Vytvorte prvý projekt

Vytvorte webové formuláre: 1.3 | Vytvorte prvý projekt

Tu sa vytvára projekt, do ktorého sa integruje prvý formulár.

Vytváranie webových formulárov: 1.4 | Prvý HTML formulár

Vytvoríš svoj prvý jednoduchý formulár a naučíš sa základnú štruktúru.

Formuláre

Vytváranie webových formulárov: 2.1 | Prečo používať formuláre alebo tagy formulára?

Osvežujeme rôzne možnosti použitia HTML formulárov vo webových aplikáciách.

Stiahnite si projektový súbor

Vytvorte webové formuláre: 2.2 | Čítanie údajov formulára s JavaScriptom

Vytvorenie webových formulárov: 2.2 | Čítanie údajov z formulára pomocou JavaScriptu

Učíš sa, ako čítať a spracovávať údaje zadané používateľmi pomocou JavaScriptu.

Vytvoriť webové formuláre: 2.3 | Vylepšenie formulára a ďalšie typy vstupov

Vytváranie webových formulárov: 2.3 | Vylepšenie formulára a ďalšie typy vstupov

Zameriavam sa na možnosti formátovania formulárov a predstavujem ti rôzne vstupné polia.

Overovanie vstupu a spracovanie udalostí pre formuláre

Vytvárať webové formuláre: 3.1 | Prvá validácia s E-mailovým vstupom

Vytvorenie webových formulárov: 3.1 | Prvá validácia s e-mailovým vstupom

Implementuješ jednoduchú validáciu e-mailu, aby si sa uistil(a), že zadané údaje zodpovedajú formátu e-mailu.

Vytváranie webových formulárov: 3.2 | Typ vstupu number a atribúty

Vytváranie webových formulárov: 3.2 | Input typ number a atribúty

Zaoberáme sa numerickými vstupmi a príslušnými atribútmi na obmedzenie možných hodnôt.

Vytvorte webové formuláre: 3.3 | Reagovať na zmeny v elemente input

Vytvorte webové formuláre: 3.3 | Reagovať na zmeny v prvku vstupu

Učíš sa, ako zachytávať udalosti v JS, ktoré sa vyskytujú pri zmene obsahu vstupného poľa.

Vytváranie webových formulárov: 3.4 | Reagovať na zmeny pomocou addEventListener

Vytvorte webové formuláre: 3.4 | Reagovať na zmeny pomocou addEventListener

Zahĺbujeme sa do spracovania udalostí a používame addEventListener pre flexibilnejšie reakcie.

Vytváranie webových formulárov: 3.5 | Prehľad: Element vstupu

Vytváranie webových formulárov: 3.5 | Prehľad: Prvok vstupu

Podrobný prehľad rôznych typov vstupných polí a ich vlastností.

Vytvárať webové formuláre: 3.6 | Atribúty: readonly, disabled, placeholder, minlength, maxlength

Vysvetlíme si hlavné atribúty na riadenie správania vstupných polí.

Vytvorte webové formuláre: 3.7 | Atribúty: vzor a požadované

Vytvárať webové formuláre: 3.7 | Atribúty: vzor a povinné

Učíš sa, ako vykonávať komplexné overovania s regulárnymi výrazmi a atribútom required-.

Vytváranie webových formulárov: 3.8 | Atribút spellcheck

Vytvorte webové formuláre: 3.8 | Prvok spellcheck

Ukážeme vám, ako môžete aktivovať alebo deaktivovať kontrolu pravopisu vo svojich formulároch.

Vytváranie webových formulárov: 3.9 | Typ Input - heslo

Vytvorte webové formuláre: 3.9 | Typ vstupu password

Dozviete sa, ako vytvoriť polia na heslo.

Zaškrtávacie políčka

Vytvárať webové formuláre: 4.1 | Checkbox – Základy

Vytváranie webových formulárov: 4.1 | Checkbox – Základy

Začíname s základmi zaškrtávacích políčok a ich možnosťami použitia.

Vytvárať webové formuláre: 4.2 | Používanie zaškrtávacieho políčka v JS

Vytváranie webových formulárov: 4.2 | Použitie zaškrtávacieho políčka v JS

Učíš sa, ako čítať a nastavovať stav checkboxov pomocou JavaScriptu.

Vytváranie webových formulárov: 4.3 | Úprava štýlu zaškrtávacieho políčka

Vytváranie webových formulárov: 4.3 | Štýlovanie zaškrtávacieho políčka

Ukážem rôzne spôsoby, ako prispôsobiť vzhľad zaškrtávacích políčok.

Typy vstupných polí a rozšírené polia

Vytváranie webových foriem: 5.1 | Radiobuttony

Vytvorte webové formuláre: 5.1 | Radiotlačidlá

Objasňujem fungovanie prepínačových tlačidiel a ako ich používať vo svojich formulároch.

Vytvorte webové formuláre: 5.2 | Nahrať súbor

Učíš sa, ako umožniť používateľom nahrávať súbory.

Vytvorte webové formuláre: 5.3 | Vstup súboru s JS

Vytváranie webových formulárov: 5.3 | File Input s JS

Hlbšíte svoje znalosti o nahrávaní súborov a naučíte sa, ako môžete upravovať vybraný súbor pomocou JavaScriptu.

Vytváranie web formulárov: 5.4 | Skryté vstupné polia

Vytvorenie webových formulárov: Skryté vstupné polia

Prehováram o použití skrytých vstupných polí na odosielanie ďalších informácií.

Vytváranie webových formulárov: 5.5 | Zadávanie čísel

Zhrnieme rôzne možnosti zadávania čísiel.

Vytváranie webových formulárov: 5.6 | Rozsahový posuvník

Vytvárať webové formuláre: 5.6 | Rozsahový posuvník

Učíš sa, ako umožniť výber konkrétneho rozsahu hodnôt pomocou posuvníkov rozsahu a ako môžeš implementovať posuvník.

Vytváranie webových formulárov: 5.7 | Zadanie dátumu a času

Vytváranie webových formulárov: 5.7 | Vstup údajov dátumu a času

Ukážem ti, ako implementovať dátumové a časové vstupy do svojich formulárov.

Vytváranie webových formulárov: 5.8 | E-mail a URL

Zameriavame sa na špeciálne vstupné polia pre e-mailové adresy a URL adresy.

Vytváranie webových formulárov: 5.9 | Farba

Učíš sa, ako umožniť výber farieb cez panel na výber farieb.

Vytvorenie webových formulárov: 5.10 | Typy search a tel

Vytvárať webové formuláre: 5.10 | Typy search a tel

Predstavujem ti vstupné polia pre hľadané výrazy a telefónne čísla.

Vytvorte webové formuláre: 5.11 | Viacriadkové textové vstupy pomocou textarea

Vytváranie webových formulárov: 5.11 | Viacrozmerné vstupy textu s textarea

Dozvieš sa, ako vytvoriť viacriadkové textové vstupy pomocou prvku textarea.

Vytváranie webových formulárov: 5.12 | Zoznamy s výberom

Vytvorte webové formuláre: 5.12 | Zoznamy s výberom

Vyjadrujem, ako vytvoriť z rozbaľovacích zoznamov s prvkom select.

Rozšírená štruktúra formulára a overovanie s pomocou JavaScriptu a frameworkov

Vytváranie webových formulárov: 6.1 | Skupinovanie možností

Vytváranie web formulárov: 6.1 | Zoskupovanie možností

Učíš sa, ako môžeš zoskupovať možnosti v rozbaľovacom zozname.

Vytvorte webové formuláre: 6.2 | Návrhové zoznamy s datalistom

Vytváranie webových formulárov: 6.2 | Návrhové zoznamy s prvkom datalist

Ukážem ti, ako vytvoriť zoznam návrhov pre vstupné polia.

Vytvorenie webových formulárov: 6.3 | Atribút automatického vyplňovania

Vytváranie webových formulárov: 6.3 | Atribút autocomplete

Učíš sa, ako aktivovať automatické dokončovanie vstupov.

Vytvoriť webové formuláre: 6.4 | Sekcie formulárov s Fieldsetmi

Vytvorenie webových formulárov: 6,4 | Časti formulára s fieldsetmi

Vyjadrujem, ako štruktúrovať svoje formuláre s prvky fieldset.

Vytváranie webových formulárov: 6.5 | Overenie pomocou JavaScriptu

Vytváranie webových formulárov: 6.5 | Validácia cez JavaScript

Úplné zavedenie do validácie formulárov na strane klienta s JavaScriptom.

Vytvorenie webových formulárov: 6.6 | Serverová manipulácia s Node.JS a Express

Vytvorenie webových formulárov: 6.6 | Serverová spracovanie s Node.JS a Express

Ukážem ti, ako prijímať odoslané formulárove dáta na serveri s Node.js a Express .

Stiahnite si projektový súbor

Vytvorte webové formuláre: 6.7 | Prijímanie údajov formulára pomocou GET handlera

Vytváranie webových formulárov: 6.7 | Príjem dát formulárom s GET handlerom

Učíš sa, ako prijímať formulárne údaje pomocou metódy GET.

Vytvorenie webových formulárov: 6.8 | Prijímanie formulárskych údajov s POST spracovateľom

Vytváranie webových formulárov: 6.8 | Prijímanie formálnych údajov pomocou POST spracovateľa

Objasním, ako prijímať formulárové údaje pomocou metódy POST.

Vytvorenie webových formulárov: 6.9 | Vytvorenie formulárov a prvkov formulárov v Reacte - Vytvorenie projektu

Vytváranie webových formulárov: 6.9 | Vytvorte projekt formulárov a formulárových prvkov v Reacte

Začíname vytváraním projektu React a integrovaním formulárov.

Stiahnite si projektový súbor

Vytváranie webových formulárov: 6.10 | Vstupné prvky v React-e

Učíš sa, ako používať rôzne vstupné prvky v Reacte.

Vytváranie webových formulárov: 6.11 | Elementy Select a Textarea v React

Vytváranie webových formulárov: 6.11 | Prvky Select a Textarea v React

Zaoberáme sa prvky select- a textarea- v Reacte.

Vytváranie webových formulárov: 6.12 | Formuláre s Alpine.js

Ukážem, ako spracovávať formuláre s JavaScriptovým rámcovým systémom Alpine.js.

Stiahnite si projektový súbor

Vytváranie webových formulárov: 6.13 | Formuláre s VueJs

Objasním, ako integrovať formuláre do aplikácií Vue.js.

Stiahnite si projektový súbor

Podrobnosti obsahu

Web formuláre a ich vstupné polia – krok za krokom vysvetlené
Chceš rozšíriť svoje znalosti pri vytváraní webových formulárov? V tomto tutoriáli sa naučíš vytvárať funkčné formuláre s pomocou HTML, JavaScriptu, ako aj serverových skriptov a knižníc. Či už ide o jednoduché získavanie mena a e-mailu alebo komplexný kontaktný formulár – po absolvovaní tohto kurzu budeš schopný.programovať vlastné webové formuláre s požadovanými vstupnými poliami a integrovať ich do tvojich webových stránok.
Viachodinový video tutoriál od softvérového vývojára a tutora Stefana Haewßa je určený pre všetkých, ktorí chcú vytvoriť webové formuláre, pre vývojárov, ktorí používajú formuláre v JS-UI frameworkoch, a pre webových vývojárov, ktorí chcú získať používateľské vstupy bez veľa JavaScriptu. Ideálne pre webových vývojárov, web dizajnérov, vývojárov frontendu, pre začiatočníkov a pokročilých – a pre tých, ktorí majú už základné znalosti HTML ľahko pochopiteľné.

Základy HTML pre formuláre na tvojich webových stránkach

Ak doteraz nemáš žiadne, alebo len málo znalostí v oblasti webových formulárov, začni tento tutoriál so základmi. Zistíš všetko podstatné o štruktúre a o rôznych elementoch formuláru v HTML. Nauč sa rôzne vstupné polia ako checkboxy, radio tlačidlá, nahrávanie súborov, heslové polia a text a ich atribúty a možnosti overovania. Získaj schopnosť vytvárať používateľsky prívetivé a prístupné formuláre s rôznymi prvky formulára.

Dynamické webové formuláre, serverové spracovanie & formuláre v moderných JavaScriptových frameworkoch

Interakciu s prvkami formulára je možné riadiť gezielt s pomocou JavaScriptu, aby sa dosiahla dynamická a používateľsky prívetivá skúsenosť. Takto je možné čítať, upravovať a automaticky overovať vstupy. S klientovským overovaním je možné chybné alebo neúplné údaje priamo zachytiť u používateľa, predtým než sa pošlú na server. Tým sa zlepšuje kvalita údajov a znižujú sa možné zdroje chýb. Ďalším dôležitým aspektom je dynamické prispôsobovanie formulárov vstupom a interakciám používateľov. V tomto videovom tutoriáli je na všetky tieto aspekty podrobne prihliadané.

Okrem toho sa zaoberáš posielaním a prijímaním údajov formulára na server a s následným serverovým spracovaním na príklade Node.js a Express. Okrem toho sa pozrieš na použitie webových formulárov v moderných JavaScriptových frameworkoch, ako napríklad integrácia formulárov do aplikácií React a vytváranie reaktívnych formulárov s React-Hooks a komponentami. Získaj dôležité tipy na štýlovanie formulárov a prvkov formulárov a zabezpečenie údajov.

Čo sa naučíš v tomto praktickom tutoriáli

Využi tento kurz na získanie komplexných znalostí pri vytváraní HTML formulárov. Zistíš, aké rôzne vstupné polia existujú a aké majú špecifickosti. Dozvieš sa, ako ovládaš elementy formulára s JavaScriptom a ako používaš atribúty a overenia. Pozri sa tiež, ako integruješ formuláre do moderných JavaScriptových frameworkov ako React, VueJs a AlpineJs.