Veebivormide loomine (Õpetus)

Veebisaitide jaoks vormide loomine (praktiline õpetus)

Keel: eesti keel

Loo veebisaitidele vormide loomine (praktiline juhend)

Kuidas luua veebivorme oma veebisaitidele - sammhaaval selgitatud! Kas soovid küsida nimesid, e-posti aadresse, paroole, märkeruutusid, kuupäevi, loendeid või rippmenüüsid: õpi selles praktilises juhendis, kuidas jõuda esimesest HTML-vormist täielikult funktsionaalse veebivormini.

Veebilomakute loomine - alustades põhitõdedest kuni funktsionaalsete vormideni
Sisestusväljad e-posti, parooli ja muu jaoks korrektselt looma ja lugema
Märkeruudud, raadionupud, rippmenüüd, mitmerealised tekstiväljad ja muud luua
Arendaja Stephan Haewßi põhjalik, kuue tunni pikkune praktiline õpetus
Projektifailid, et jälgida näidatud sisu
Optimaalne veebiarendajatele, veebidisaineritele ja esilõpuarendajatele

Lihtsatest nime ja e-posti küsimustest kuni keerukama kontaktvormini koos üleslaadimisfunktsiooniga: siin saad põhjalikult õppida, kuidas luua oma veebisaitidele veebivorme!

Zugriff auf alle Inhalte

In der Mitgliedschaft ab * € monatlich

oder

Inhalt in den Warenkorb

Sofort-Download nach Kauf: einmalig * €

üksikasjad

Sisu: 6 h Videoõpe
Litsents: eraõiguslik ja äriline Kasutusõigused
Boonus: kaasa arvatud töövahendid

Kategooriad

Veebidisain, CMS ja arendus

Armastusega loodud:

Stephan Haewß

Veebivormide loomine - sissejuhatus

Veebiankeetide loomine: 1.1 | Sissejuhatus ja ülevaade

Tasuta

Veebivormide loomine: 1.1 | Sissejuhatus ja ülevaade

Siin saad teada, milles kursus seisneb ja mida oodata on.

Veebivormide loomine: 1.2 | HTML-vormid – miks ja kuidas kasutada?

Miks üldse peaks kasutama HTML-vorme ja kuidas see üldse toimib?

Veebivormide loomine: 1.3 | Esimese projekti loomine

Siin luuakse projekt, kuhu integreeritakse esimene vorm.

Veebivormide loomine: 1.4 | Esimene HTML-vorm

Sa lood oma esimese lihtsa vormi ja õpid tundma põhistruktuuri.

Vormid

Veebivormide loomine: 2.1 | Miks kasutada vorme või vormimärgendit?

Valgustame HTML-vormide mitmekülgseid kasutusvõimalusi veebirakendustes.

Laadi projektifail alla

Veebivormide loomine: 2.2 | Vormiandmete lugemine JavaScriptiga

Veebilomakute loomine: 2.2 | Vormiandmete lugemine JavaScript abil

Sa õpid, kuidas JavaScripti abil kasutajate sisestatud andmeid lugeda ja töödelda.

Veebivormide loomine: 2.3 | Vormi kaunistamine ja muud sisestustüübid

Veebivormide loomine: 2.3 | Vormi iluravi ja muud sisestustüübid

Ma räägin vormide kujundusvõimalustest ja näitan erinevaid sisestusvälju.

Vormide sisestuse valideerimine ja sündmuste käsitlemine

Veebivormide loomine: 3.1 | Esimene valideerimine e-posti sisestusega

Veebiankeetide loomine: 3.1 | Esimene valideerimine e-posti sisestamisel

Sa rakendad lihtsat e-posti valideerimist, et tagada, et sisestatud andmed vastavad e-posti vormingule.

Veebivormide loomine: 3.2 | Sisenditüüp number ja atribuudid

Me tegeleme numbriliste sisendite ja nendega seotud attribuutidega, mis piiravad võimalikke väärtusi.

Veebivormide loomine: 3.3 | Reageerige sisendi elemendi muudatustele

Veebivormide loomine: 3.3 | Reageerimine sisendi elemendi muudatustele

Sa õpid, kuidas JS-s käsitleda sündmusi, mis tekivad sisestusvälja sisu muutmisel.

Veebivormide loomine: 3.4 | Reageerimine muudatustele addEventListeneriga

Veebivormide loomine: 3.4 | Reageerige muudatustele addEventListeneriga

Me süveneme sündmuste käsitlemise teemasse ja kasutame paindlikumate reaktsioonide jaoks addEventListener.

Veebivormide loomine: 3.5 | Ülevaade: Sisendi-element

Veebivormide loomine: 3.5 | Ülevaade: Sisend-element

Üksikasjalik kokkuvõte erinevate sisend-tüüpide ja nende omaduste kohta.

Veebivormide loomine: 3.6 | Atribuudid: ainultlugemine, keelatud, kohatäitja, minimaalne pikkus, maksimaalne pikkus

Me selgitame peamised atribuudid, et juhtida sisestusväljade käitumist.

Veebil vormide loomine: 3.7 | Omadused: mustr ja nõutud

Veebivormide loomine: 3.7 | Attribuudid: pattern ja required

Sa õpid, kuidas teostada keerulisi valideerimisi regulaaravaldiste ja required-atribuudi abil.

Veebivormide loomine: 3.8 | spellcheck atribuut

Näitame sulle, kuidas saad oma vormidel õigekirjakontrolli sisse või välja lülitada.

Veebivormide loomine: 3.9 | Sisendi tüüp parool

Saad teada, kuidas luua paroolivälju.

Märkeruudud

Veebivormide loomine: 4.1 | Märkeruut - põhimõisted

Veebivormide loomine: 4.1 | Valikruut - Põhitõed

Alustame märkeruutude põhialustest ja nende kasutusvõimalustest.

Veebivormide loomine: 4.2 | Kontrollkastide kasutamine JS-is

Veebivormide loomine: 4.2 | Kontrollkast kasutamine JS-s

Sa õpid, kuidas JavaScripti abil lugeda ja seadistada märkeruutude olekut.

Veebivormide loomine: 4.3 | Märkeruudu stiilimuutmine

Veebivormide loomine: 4.3 | Kontrollruudu stiil

Näitan erinevaid võimalusi märkeruutude välimuse kohandamiseks.

Vormi sisestamise tüübid ja täiustatud väljad

Veebivormide loomine: 5.1 | Valikunupud

Selgitan raadionuppude tööpõhimõtet ja kuidas neid oma vormides kasutada.

Veebivormide loomine: 5.2 | Faili üleslaadimine

Sa õpid, kuidas lubada kasutajatel failide üleslaadimine.

Veebivormide loomine: 5.3 | Faili sisestamine JavaScriptiga

Veebivormide loomine: 5.3 | Faili sisend JavaScriptiga

Sa süvendad oma teadmisi failide üleslaadimise kohta ja õpid, kuidas saad valitud faili JavaScripti abil töödelda.

Veebivormide loomine: 5.4 | Peidetud sisendväljad

Veebivormide loomine: 5.4 | Varjatud sisestusväljad

Ma arutan peidetud sisendiväljade kasutamist täiendava teabe edastamiseks.

Veebvormide loomine: 5.5 | Arvulised sisendid

Veebivormide loomine: 5.5 | Arvulised sisendid

Me koondame erinevad võimalused numbrite sisestamiseks.

Veebivormide loomine: 5.6 | Vahemiku liugur

Sa õpid, kuidas lubada määratud väärtuste vahemikuga Range-Sliderite abil ning kuidas rakendada liugurit.

Veebivormide loomine: 5.7 | Kuupäeva ja kellaaja sisestus

Veebivormide loomine: 5.7 | Kuupäeva ja kellaajasiltide sisestus

Näitan sulle, kuidas sa kuupäeva ja kellaaja sisestusi oma vormides kasutad.

Veebivormide loomine: 5.8 | E-post ja URL

Me keskendume erilistele sisestusväljadele e-posti aadressidele ja URL-idele.

Veebivormide loomine: 5.9 | Värv

Saad teada, kuidas lubada värve värvivaliku väljal valida.

Veebivormide loomine: 5.10 | Tüübid search ja tel

Veebivormide loomine: 5.10 | Otsingu- ja telefoni tüübid

Ma tutvustan teile otsinguterminite ja telefoninumbrite sisestusvälju.

Veebivormide loomine: 5.11 | Mitmerealised tekstisisendid textarea abil

Veebivormide loomine: 5.11 | Mitmeriviline tekstisisend koos tekstiväljaga<textarea>

Sa õpid, kuidas saavutada mitmerealine tekstisisestus textarea-elemendiga.

Veebivormide loomine: 5.12 | Loendid valikuga

Selgitan, kuidas luua valitavast loendist select-elemendi abil.

Laiendatud vormistruktuur ja valideerimine JavaScripti ja raamistike abil

Veebivormide loomine: 6.1 | Valikute grupeerimine

Sa õpid, kuidas saad rühmitada valikuid rippmenüüs.

Veebivormide loomine: 6.2 | Ettepanekute loendid koos andmetega

Veebivormide loomine: 6.2 | Ettepanekute loendid koos datalistiga

Näitan sulle, kuidas luua sisestusväljade jaoks soovituste loendeid.

Veebivormide loomine: 6.3 | Automaatse täienduse atribuut

Veebivormide loomine: 6.3 | Automaattäitmisatribuut

Sa õppid, kuidas lubada automaatne sisestuse täitmine.

Veebivormide loomine: 6.4 | Vormi sektsioonid fieldsetidega

Veebil vormide loomine: 6.4 | Vormi sektsioonid Fieldsetidega

Selgitan, kuidas struktureerida oma vormid fieldset-elementidega.

Veebivormide loomine: 6.5 | Javascripti abil valideerimine

Veebivormide loomine: 6.5 | Valideerimine JavaScripti abil

Põhjalik sissejuhatus klientpoolsesse vormide valideerimisse JavaScripti abil.

Veebivormide loomine: 6.6 | Serveripoolne töötlus Node.JS-i ja Expressiga

Veebivormide loomine: 6.6 | Serveripoolne töötlemine Node.JS-i ja Expressiga

Näitan, kuidas saad serveris Node.js-i ja Expressiga saadetud vormiandmeid vastu võtta.

Laadi projektifail alla

Veebivormide loomine: 6.7 | Vormi andmete vastuvõtmine GET-käsitlejaga

Veebialaste loomine: 6.7 | Vormi andmete vastuvõtmine GET-käsitlejaga

Sa õpid, kuidas saad kätte vormiandmed GET-meetodiga.

Veebivormide loomine: 6.8 | Vormiandmete vastuvõtmine POST-käsitlejaga

Veebivormide loomine: 6.8 | POST-käsitlejaga vastu võetud vormi andmed

Selgitasin, kuidas saad POST-meetodil vormiandmeid vastu võtta.

Veebi vormide loomine: 6.9 | Vormid ja vormielemendid Reactis - projekti loomine

Alustame Reacti projekti loomisega ja vormide integreerimisega.

Laadi projektifail alla

Veebivormide loomine: 6.10 | Sisestuselemendid Reactis

Veebivormide loomine: 6.10 | Sisendelemendid Reactis

Sa õpid, kuidas kasutada erinevaid sisendelemente Reactis.

Veebivormide loomine: 6.11 | Select- ja Textarea elemendid Reactis

Veebivormide loomine: 6.11 | Select- ja Tekstiala elemendid Reactis

Tegeleme Reactis vali- ja tekstiala- elementidega.

Veebivormide loomine: 6.12 | Vormid Alpine.js'iga

Näitan, kuidas JavaScripti raamistiku Alpine.js abil vorme käsitletakse.

Laadi projektifail alla

Veebivormide loomine: 6.13 | Vormid VueJs abil

Veebiankeetide loomine: 6.13 | Vormid koos VueJs-iga

Selgitan, kuidas sa vorme Vue.js rakendustesse integreerid.

Laadi projektifail alla

Sisu üksikasjad

Veebivormid ja nende sisendväljad – samm-sammult selgitatud
Soovid oma teadmisi veebivormide loomisel laiendada? Selles õpetuses õpid looma funktsionaalseid vorme HTML-i, JavaScripti, serveripoolsete skriptide ja raamatukogudega. Olgu see siis lihtne nime ja e-posti päring või keeruline kontaktivorm – pärast seda kursust suudad ise programmeerida vajalike sisendväljadega veebivorme ja need oma veebisaitidesse integreerida.
Üle kuue tunni kestev videoõpetus tarkvaraarendaja ja juhendaja Stephan Haewßilt on suunatud kõigile, kes soovivad luua veebivorme, arendajatele, kes kasutavad vorme JS-UI-raamistikes, ning veebiarendajatele, kes soovivad kasutaja sisendeid küsida ilma suurema JavaScriptita. Optimaalne veebiarendajatele, veebidisaineritele, esmakasutajatele ja edasijõudnutele – ning juba põhilisi HTML-teadmisi omades kergesti jälgitav.

HTML-i alused vormidele oma veebisaitidel

Kui sul seni puuduvad või on vähem teadmisi veebivormide vallas, alusta seda õpetust põhitõdedega. Saad teada kõik olulise vormi struktuuri, samuti erinevate HTML-vormi elementide kohta. Õpi tundma erinevaid sisendvälju nagu märkeruudud, raadionupud, faili üleslaadimised, parooliväljad ja tekst ning nende atribuute ja valideerimisvõimalusi. Omanda oskus luua kasutajasõbralikke ja ligipääsetavaid vorme erinevate vormielementidega.

Dünaamilised veebivormid, serveripoolne töötlemine ja vormid modernsetes Javascripti raamistikes

Vormielementidega suhtlemine saab sihipäraselt juhtida JavaScripti abil, luues dünaamilise ja kasutajasõbraliku kogemuse. Sisestusi saab välja lugeda, muuta ja vajadusel automaatselt valideerida. Kliendipoolne valideerimine võimaldab vigased või puudulikud andmed otse kasutajalt püüda enne nende serverisse saatmist. See parandab andmekvaliteeti ja vähendab võimalikke veaallikaid. Veel üks oluline aspekt on vormide dünaamiline kohandamine kasutajate sisestuste ja interaktsioonidega. Kõigile nendele aspektidele keskendutakse selles videoõpetuses.

Lisaks tegeled sa vormiandmete saatmise ja vastuvõtmisega serverile ning serveripoolse töötlemisega näiteks Node.jsi ja Expressi põhjal. Lisaks vaatad veebivormide kasutamist modernsetes Javascripti raamistikes, näiteks vormide integreerimist Reacti rakendustesse ning reaktiivsete vormide loomist Reacti "hooks" ja komponentide abil. Hangi olulisi juhiseid ka vormide ja vormielementide kujundamise ning andmete turvalisuse kohta.

Selle praktilise õpetuse käigus õpid järgmist

Kasuta kursust, et omandada põhjalikud teadmised HTML-vormide loomisel. Õpi tundma erinevaid sisendvälju ja nende eripärasid. Saad teada, kuidas kontrollida vormielemente JavaScriptiga ning rakendada atribuute ja valideerimisi. Samuti vaata, kuidas saad integreerida vorme modernsetesse Javascripti raamistikesse nagu React, VueJs ja AlpineJs.