Kurti tinklapio formas (Pamoka)

Kurti interneto svetainių formos (praktinis vadovas)

Kalba: vokiečių

Kurti interneto svetainėms skirtus interneto formų kūrimo instrukcijų vadovus

Kaip sukurti tinklalapio formos internetines svetaines – paaiškinta žingsnis po žingsnio! Ar norite klausti vardų, el. paštų, slaptažodžių, triukšmų, datos, sąrašų ar iškrentančių meniu: Šiame praktiniame vadove išmokite, kaip pereiti nuo pirmosios HTML formos iki visiškai veikiančios internetinės formos.

Kurti internetinius formularius – nuo pagrindų iki funkcionalių formų
Laukų el. paštui, slaptažodžiui ir kt. teisingai sukurti ir nuskaityti
Žymimieji laukeliai, radijo mygtukai, išskleidžiamieji sąrašai, daugialiniai teksto laukai ir kt. kurti
Išsamus, šešių valandų praktinis vadovas iš kūrėjo Stephano Haewß'o
Su projekto failais, kad būtų galima atkartoti parodytus turinio elementus
Idealus variantas tinklalapių kūrėjams, dizaineriams ir front-end programuotojams

Nuo paprasto vardo ir el. pašto užklausos iki sudėtingesnės kontaktinės formos su įkėlimo funkcija: čia išsamiai mokysiesi kurti tinklalapių formus!

Zugriff auf alle Inhalte

In der Mitgliedschaft ab * € monatlich

oder

Inhalt in den Warenkorb

Sofort-Download nach Kauf: einmalig * €

informacija

Turinys: 6 h Vaizdo mokymas
Licencija: privati ir komercinė Naudotojų teisės
Papildomai: Įskaitant darbo medžiagas

Kategorijos

Tinklalapių kūrimas, CMS ir kūrimas

Sukurta su meile:

Stephan Haewß

Kurti interneto formularius – įvadas

Nemokamai

Kurti internetinius formularius: 1.1 | Įvadas ir apžvalga

Čia sužinosite, apie ką yra kursas ir ką galite tikėtis.

Į teksto vadovėlį

Kurti interneto formularius: 1.2 | HTML formos - kodėl ir kaip naudoti?

Kurti internetinius formularius: 1.2 | HTML formos - kodėl ir kaip naudoti?

Kodėl iš viso reikia naudoti HTML formularus ir kaip tai apskritai daroma?

Į teksto vadovėlį

Kurti interneto formos: 1.3 | Sukurti pirmąjį projektą

Kurti internetinius formus: 1.3 | Sukurti pirmą projektą

Čia bus sukurtas projektas, į kurį bus integruota pirmoji forma.

Į teksto vadovėlį

Kurti interneto formus: 1.4 | Pirmas HTML forma

Kurti internetinius formularius: 1.4 | Pirmasis HTML formularius

Tu sukuri savo pirmąją paprastą formą ir išmoksti pažinti pagrindinę struktūrą.

Į teksto vadovėlį

Formuliuojami

Kurti interneto formus: 2.1 | Kodėl naudoti formos arba formos žymėjimą?

Kurti internetinius formularius: 2.1 | Kodėl naudoti formularius arba formų žymą?

Mes apšviesime HTML formų įvairias naudojimo galimybes interneto svetainėse.

Atsisiųskite projekto failą

Kurti internetinius formus: 2.2 | Formos duomenys išskaitomi naudojant JavaScript

Kurti internetinius formularus: 2.2 | Formos duomenis nuskaityti naudojant JavaScript

Mokysiesi, kaip gauti ir apdoroti vartotojų įvestus duomenis naudojant JavaScript.

Kurti internetinius formularius: 2.3 | Formos gražinimas ir nauji įvesties tipai

Kurti internetinius formularius: 2.3 | Formos puošimas ir papildomi įvedimo tipai

Aš aptarsiu formų kūrimo galimybes ir pristatysiu tau įvairius įvesties laukus.

Įvesties validacija ir įvykių apdorojimas formoms

Kurti interneto formus: 3.1 | Pirmoji patikrinimas su el. pašto įvestimi

Kurti internetinius formularius: 3.1 | Pirmasis patikrinimas naudojant el. pašto įvestį

Tu įgyvendini paprastą elektroninio pašto patikrinimą, kad būtų užtikrinta, jog įvesti duomenys atitiktų elektroninio pašto formatą.

Kurti internetinius formus: 3.2 | Įvesties tipas numeris ir atributai

Kurti internetinius formularius: 3.2 | Įvesties tipas numeris ir atributai

Mes užsiimame skaitiniais įvedimais ir atitinkamais atributais, apribojančiais galimus vertes.

Kurti internetinius formus: 3.3 | Reaguoti į pakeitimus įvesties elemente

Kurti internetinius formularius: 3.3 | Reaguoti į pakeitimus įvesties elemente

Tu mokaisi, kaip JS gali sugauti įvykius, kurie įvyksta keičiant įvesties lauko turinį.

Kurti interneto formas: 3.4 | Reaguoti į pakeitimus naudojant addEventListener

Kurti internetinius formularius: 3.4 | Reaguoti į pakeitimus naudojant addEventListener

Glębiame įvykio apdorojimo temą ir naudojame addEventListener dėl lankstesnių reakcijų.

Kurti interneto formos: 3.5 | Apžvalga: Įvedimo elementas

Kurti interneto formularus: 3.5 | Apžvalga: input elemento

Išsamus įvairių input-tipų ir jų savybių suvestinė.

Kurti internetinius formularius: 3.6 | Atributai: readonly, disabled, placeholder, minlength, maxlength

Mes apibrėžiame pagrindinius atributus, kad valdytume įvesties laukų elgesį.

Kurti internetinius formos: 3.7 | Atributai: šablonas ir privalomas

Kurti internetinius formularius: 3.7 | Atributai: šablonas ir reikalaujama

Tu mokaisi, kaip atlikti sudėtingas validacijas su reguliariaisiais išsireiškimais ir required-atributu.

Kurti internetinius formularius: 3.8 | "spellcheck" atributas

Parodysime, kaip galite įjungti arba išjungti rašybų tikrinimą savo formose.

Kurti interneto formų: 3.9 | Įvesties tipas slaptažodis

Kurti internetinius formularius: 3.9 | Įvesties tipas slaptažodis

Tu sužinosi, kaip sukurti slaptažodžio laukus.

Žymimosios langeliai

Kurti interneto formus: 4.1 | Žymimasis laukelis - Pagrindai

Kurti internetinius formularius: 4.1 | Žymimasis langelis – pagrindai

Pradėsime nuo žymimųjų langelių pagrindų ir jų taikymo galimybių.

Kurti internetinius formus: 4.2 | Įjungimo mygtukas naudojant JS

Kurti interneto formus: 4.2 | Žymimasis laukelis naudojant JS

Tu mokaisi, kaip skaityti ir nustatyti žymimojo langelio būseną naudojant JavaScript.

Kurti internetinius formus: 4.3 | Žymimasis langelis (checkbox) stilizuoti

Kurti internetinius formos: 4.3 | Pažymėjimo langelio stilius

Rodysiu įvairius būdus, kaip pritaikyti žymimųjų langelių išvaizdą.

Formos įvedimo tipai ir išplėstiniai laukai

Kurti interneto formus: 5.1 | Radijo mygtukai

Kurti internetinius formularius: 5.1 | Radijo mygtukai

Aš paaiškinsiu, kaip veikia radijo mygtukai, ir kaip juos naudoti savo formose.

Kurti interneto formus: 5.2 | Failų įkėlimas

Kurti internetinius formularius: 5.2 | Failo įkėlimas

Tu mokaisi, kaip leisti vartotojams įkelti failus.

Kurti interneto formus: 5.3 | Failo įkėlimas su JS

Kurti internetinius formularius: 5.3 | Failo įkėlimas su JS

Plačiau suprinsi failų įkėlimo principus ir išmoksi, kaip pasirinktą failą galima redaguoti naudojant JavaScript.

Kurti internetinius formus: 5.4 | Paslėpti įvedimo laukai

Kurti internetinius formularius: 5.4 | Paslėpti įvedimo laukeliai

Aš aptarsiu paslėptų įvesties laukų naudojimą papildomai informacijai pateikti.

Kurti tinklalapio formas: 5.5 | Skaičių įvedimas

Kurti internetinius formularius: 5.5 | Skaičių įvedimas

Mes sujungiame skaičių įvedimo galimybes.

Kurti interneto formus: 5.6 | Intervalo slankiklis

Kurti internetinius formularius: 5.6 | Intervalo slankiklis

Tu mokaisi, kaip leisti pasirinkti tam tikrą vertės diapazoną naudojant rėžių slankiklius ir kaip galėtum įdiegti slankiklį.

Kurti interneto formas: 5.7 | Datų ir laiko įvedimas

Kurti internetinius formularius: 5.7 | Datos ir laiko įvedimas

Aš tau parodysiu, kaip implementuoti datos ir laiko įvedimą į savo formose.

Kurti interneto formus: 5.8 | El. paštas ir URL

Kurti internetinius formularus: 5.8 | El. pašto adresas ir URL

Mes sutelkiame dėmesį į specialius laukus el. paštui ir URL.

Sukurkite interneto formas: 5.9 | Spalva

Kurti internetinius formularius: 5.9 | Spalva

Studijuosi, kaip leisti vartotojams pasirinkti spalvas naudojant spalvų pasirinkimo laukelį.

Kurti interneto formas: 5.10 | Tipai search ir tel

Kurti internetinius formularius: 5.10 | Tipai search ir tel

Aš pristatau tau paieškos žodžių ir telefono numerio įvedimo laukelius.

Kurti interneto formas: 5.11 | Daugiailgių tekstų įvedimas naudojant textarea

Kurti internetinius formularius:5.11 | Daugių eilučių teksto įvedimas naudojant textarea

Tu sužinosi, kaip įgyvendinti daugiaraidį teksto įvedimą naudojant textarea elementą.

Kurti interneto formos: 5.12 | Sąrašai su pasirinkimais

Kurti internetinius formularius: 5.12 | Sąrašai su pasirinkimais

Aš paaiškinsiu, kaip sukurti pasirinktinį sąrašą naudojant select- elementą.

Išplėstinė formos struktūra ir patikrinimas naudojant „JavaScript“ ir karkasus

Kurti interneto formos: 6.1 | Parinkčių grupavimas

Kurti internetinius formularius: 6.1 | Pasirinkimo grupavimas

Studijuosite, kaip grupuoti parinktis pasirinkimų sąraše.

Kurti interneto formas: 6.2 | Pasiūlymų sąrašai naudojant datalist

Kurti internetinius formularus: 6.2 | Pasiūlymų sąrašai su datalist

Aš parodysiu tau, kaip sukurti pasiūlymų sąrašus įvedimo laukams.

Kurti interneto formos: 6.3 | Autoužpildymo atributas

Kurti internetinius formularius: 6.3 | Autoužpildymo atributas

Tu mokaisi, kaip įjungti automatinį įvedimų užbaigimą.

Kurti interneto formos: 6.4 | Formos skyriai su laukų rinkiniais

Kurti internetinius formularius: 6.4 | Formos skyriai su laukų rinkiniais

Aš paaiškinsiu, kaip struktūrizuoti savo formą naudojant fieldset- elementus.

Kurti interneto formus: 6.5 | Patikrinimas su JavaScript

Kurti internetinius formularius: 6.5 | Patikrinimas naudojant JavaScript

Išsamus įvadas į klientinę formos validaciją su JavaScript.

Kurti interneto formus: 6.6 | Serverio pusės apdorojimas su Node.JS ir Express

Kurti internetinius formularius: 6.6 | Serverio pusės apdorojimas su „Node.JS“ ir „Express“

Aš parodysiu, kaip priimti siunčiamus formos duomenis serveryje su Node.js ir Express .

Atsisiųskite projekto failą

Kurti internetinius formus: 6.7 | Gaukite formos duomenis naudojant GET tvarkyklę

Kurti internetinius formularius: 6.7 | Gaukite formos duomenis naudojant GET tvarkyklę

Tu mokaisi, kaip gauti formos duomenis naudojant GET metodą.

Sukūrimas internetinių formų: 6.8 | Siųsti formos duomenis naudojant POST tvarkyklę

Kurti internetinius formularius: 6.8 | Gauti formos duomenis naudojant POST tvarkyklę

Aš paaiškinsiu, kaip gauti formos duomenis naudojant POST metodą.

Kurti interneto formos: 6.9 | Formos ir formos elementai „React“ – kurti projektą

Kurti internetinius formularius: 6.9 | Formos ir formos elementai „React“ – kurti projektą

Pradėsime kurti „React“ projektą ir integruoti formų.

Atsisiųskite projekto failą

Kurti internetinius formularius: 6.10 | Įvesties elementai „React“ platformoje

Kurti internetinius formularius: 6.10 | Įvesties elementai „React“'e

Tu mokaisi, kaip naudoti skirtingus įvesties elementus „React“.

Kurti interneto formos: 6.11 | „Select“ ir „Textarea“ elementai „React“'e

Kurti internetinius formularius: 6.11 | Pasirinkimo ir teksto laukai „React“ bibliotekoje

Mes dirbame su select- ir textarea- elementais „React“.

Kurti interneto formas: 6.12 | Formos su Alpine.js

Kurti internetinius formularius: 6.12 | Formulariai su Alpine.js

Aš parodysiu, kaip tvarkyti formų laukus su JavaScript karkasu Alpine.js.

Atsisiųskite projekto failą

Kurti internetinius formularius: 6.13 | Formos su VueJs

Aš paaiškinsiu, kaip integruoti formas į Vue.js programėlę.

Atsisiųskite projekto failą

Turinys

Svetainių formos ir jų įvesties laukai – paaiškinama žingsnis po žingsnio
Norite praplėsti savo žinias kuriant svetainių formas? Šiame vadove išmoksite kurti veikiančias formas su HTML, JavaScript, serverio pusės skriptais ir bibliotekomis. Ar tai būtų paprasčiausias vardo ir el. pašto klausimas ar sudėtinga kontaktų forma - šio kurso pabaigoje galėsite programuoti savo svetainių formas su reikalingais įvesties laukais ir integruoti į savo svetaines.
Šešių valandų video vadovas nuo programuotojo ir mokytojo Stefano Haewß yra skirtas visiems, kurie kuria svetainių formas, kūrėjams, naudojantiems formas JS-UI karkasuose, ir svetainių kūrėjams, norintiems užduoti vartotojų įvestis be daug JavaScript. Idealu svetainių kūrėjams, dizaineriams, priekinės puses kūrėjams, pradedantiesiems ir pažengusiems žmonėms - ir jau turintiems pagrindinius HTML žinias lengvai suprantama.

HTML pagrindai formoms jūsų svetainėse

Jeigu iki šiol neturite jokių ar turite tik keletą žinių apie svetainių formas, pradėkite vadovą su pagrindais. Sužinokite viską svarbiausią apie struktūrą ir skirtingus HTML formos elementus. Išmokite įvairius įvesties laukus, tokius kaip žymimo langeliai, pasirinkimo mygtukai, failų įkėlimai, slaptažodžių laukai ir tekstas bei jų atributus ir galimybes validacijai. Išmokite kurti vartotojams draugiškas ir nepriekaištingai pasiekiamas formas su įvairiomis formos elementų.

Dinaminės svetainių formos, serverio pusės apdorojimas ir formos šiuolaikiniuose JavaScript karkasuose

Interakcija su formos elementais gali būti tiksliai valdoma naudojant JavaScript, siekiant sukurti dinamišką ir vartotojišką patirtį. Taip galima ištraukti, redaguoti ir automatiškai tikrinti įvestis. Naudojant kliento pusės validaciją, neteisingi ar nepilni duomenys gali būti tiesiogiai suvaldyti prieš siuntimą į serverį. Tai pagerina duomenų kokybę ir sumažina galimus klaidų šaltinius. Kitas svarbus aspektas yra formų dinaminis pritaikymas įvestims ir sąveikoms su vartotojais. Visi šie aspektai aptariami šiame vaizdo vadove.

Be to, jūs išnagrinėsite formos duomenų siuntimą ir gavimą į serverį bei serverio pusės apdorojimą, pasitelkiant pavyzdį iš Node.js ir Express. Be to, išnagrinėsite svetainių formų naudojimą šiuolaikiniuose JavaScript karkasuose, pavyzdžiui, formų integravimą į React aplikacijas ir reaktyvių formų kūrimą su React Hooks ir komponentais. Sužinokite svarbių patarimų dėl formų ir formos elementų stiliaus bei duomenų saugumo.

Ką išmoksi šiame praktiniame vadove

Panaudokite kursą, kad įsisavintumėte išsamias žinias kuriant HTML formas. Išmokite skirtingus įvesties laukus ir jų ypatybes. Sužinokite, kaip valdyti formos elementus su JavaScript ir kaip taikyti atributus ir validacijas. Taip pat pažiūrėkite, kaip integruoti formas į šiuolaikinius JavaScript karkasus, tokius kaip React, VueJs ir AlpineJs.