Izveidot tīmekļa formas (Pamācība)

Izveidojiet tīmekļa formas vietnēm (prakses pamācība)

Valoda: vācu

Izveidot tīmekļa formas tīmekļa vietnēm (prakses pamācība)

Kā radīt tīmekļa formas savām tīmekļa vietnēm - soli pa solim skaidrots! Vai tu vēlies pieprasīt vārdus, e-pasta adreses, paroles, izvērsta rūtiņa lodziņus, datumus, sarakstus vai nolaižamo izvēlni: Iemācies šajā praktiskajā vadlīnijā, kā no pirmā HTML formas nonākt līdz pilnībā funkcionējošai tīmekļa formai.

Izveidojiet tīmekļa formas – no pamatprincipiem līdz funkcionālām formām
Korekti izveidot un nolasīt laukus e-pasta, paroles un tā tālāk ievadei
Izveidot pārslēguma rūtiņas, radio pogas, nolaižamos izvēlnes, daudzrindu teksta ievades laukus un citas funkcijas
Plašs, sešu stundu garš prakses pamācību materiāls no izstrādātāja Stefana Haevša
Ar projektu failiem, lai pārbaudītu parādīto saturu
Ideāli piemērots tīmekļa izstrādātājiem, tīmekļa dizaineriem un frontrēžu izstrādātājiem

No vienkāršas vārda un e-pasta pieprasīšanas līdz sarežģītākam kontaktpersonas veidlapam ar augšupielādes funkciju: šeit tu mācies plaši izveidot tīmekļa formas savam tīmekļa vietnēm!

Zugriff auf alle Inhalte

In der Mitgliedschaft ab * € monatlich

oder

Inhalt in den Warenkorb

Sofort-Download nach Kauf: einmalig * €

Sīkāka informācija

Saturs: 6 h Video mācību kurss
Licence: privāta un komerciāla Lietošanas tiesības
Bonus: ietverot darba materiālus

Kategorijas

Tīmekļa dizains, CMS un attīstība

Ar mīlestību izveidots no:

Stephan Haewß

Izveidot tīmekļa veidlapas – Ievads

Bezmaksas

Izveidojiet tīmekļa formas: 1.1 | Ievads un pārskats

Še tu uzzināsi, par ko ir šis kurss un ko vari sagaidīt.

Teksta vadlīnija

Izveidojiet tīmekļa formas: 1.2 | HTML formas - kāpēc un kā izmantot?

Izveidot tīmekļa formas: 1.2 | HTML formas - kāpēc un kā izmantot?

Kāpēc vispār jāizmanto HTML formu paraugi un kā tas vispār notiek?

Teksta vadlīnija

Izveidot tiešsaistes veidlapas: 1.3 | Izveidot pirmo projektu

Izveidot tīmekļa formas: 1.3 | Izveidot pirmo projektu

Še tiks izveidots projekts, kurā tiks integrēts pirmais veidlapa.

Teksta vadlīnija

Izveidojiet tīmekļa formas: 1.4 | Pirmā HTML forma

Izveidot tīmekļa veidlapas: 1.4 | Pirmā HTML veidlapa

Tu veido savu pirmo vienkāršo veidlapu un saprot pamata struktūru.

Teksta vadlīnija

Veidlapas

Veidot tīmekļa formas: 2.1 | Kāpēc izmantot formas vai Form-Tag?

Izveidojiet tīmekļa veidnes: 2.1 | Kāpēc izmantot veidnes vai formu tagus?

Mēs aplūkojam HTML formu daudzveidīgās izmantošanas iespējas tīmekļa lietojumprogrammās.

Teksta vadlīnija Lejupielādēt projektu failu

Izveidojiet tīmekļa formas: 2.2 | Formulāra dati nolasīšanai ar JavaScript

Izveidot tīmekļa formas: 2.2 | formas dati izlasīt ar JavaScript

Tu mācies, kā ar JavaScript nolasīt un apstrādāt lietotāju ievadītos datus.

Teksta vadlīnija

Tīmekļa veidlapu izveide: 2.3 | Veidlapas estētika un papildu ievades veidi

Izveidojiet tīmekļa formas: 2.3 | Formas uzlabošana un papildu ievades veidi

Esiet apskatītas formu veidošanas iespējas, un es jums piedāvāšu dažādus ievades laukus.

Teksta vadlīnija

Ievades validācija un notikumu apstrāde formām

Izveidojiet tīmekļa formas: 3.1 | Pirmā validācija ar e-pasta ievadi

Tu implementē vienkāršu e-pasta validāciju, lai pārliecinātos, ka ievadītie dati atbilst e-pasta formātam.

Teksta vadlīnija

Izveidojiet tīmekļa formas: 3.2 | Ievades tips numurs un atribūti

Izveidojiet tīmekļa veidlapas: 3.2 | Ievades tips number un atribūti

Mēs nodarbojamies ar skaitliskiem ievades datiem un ar tiem saistītajām atribūtām, lai ierobežotu iespējamos vērtību diapazonus.

Teksta vadlīnija

Izveidojiet tīmekļa veidlapas: 3.3 | Reaģējiet uz ievades elementa izmaiņām

Izveidot tīmekļa formas: 3.3 | Reaģēt uz izmaiņām ievades elementā

Tu mācies, kā noķert JS notikumus, kas notiek, mainot ievades lauka saturu.

Teksta vadlīnija

Izveidojiet tīmekļa formas: 3.4 | Reaģējiet uz izmaiņām, izmantojot addEventListener

Izveidot tīmekļa formas: 3.4 | Reaģēt uz izmaiņām ar addEventListener

Mēs dziļāk izpētīsim notikumu apstrādes tēmu un izmantosim addEventListener, lai reaģētu elastīgāk.

Teksta vadlīnija

Veidot tīmekļa veidnes: 3.5 | Pārskats: Ievades elements

Izveidojiet tīmekļa formas: 3.5 | Pārskats: Ievades elements

Pilnīgs pārskats par dažādajiem input- veidiem un to īpašībām.

Teksta vadlīnija

Izveidojiet tīmekļa formas: 3.6 | Atribūti: readonly, disabled, placeholder, minlength, maxlength

Mēs noskaidrojam galvenās atribūtas, lai kontrolētu ievades laukiem uzvedību.

Teksta vadlīnija

Izveidot tīmekļa veidlapas: 3.7 | Atribūti: šablons un obligāti

Izveidot tīmekļa veidlapas: 3.7 | Atribūti: modelis un obligāts

Tu mācies, kā ar regulārajiem izteikumiem un required-atribūtu veikt sarežģītas validācijas.

Teksta vadlīnija

Izveidojiet tīmekļa formas: 3.8 | Atzīmētāja pārbaude atribūts

Veidot tīmekļa formas: 3.8 | Valodas pārbaudes atribūts

Mēs parādīsim tev, kā ieslēgt vai izslēgt pareizrakstības pārbaudi tavos veidlapās.

Teksta vadlīnija

Izveidojiet tīmekļa veidlapas: 3.9 | Ievades tips parole

Veidot tīmekļa formas: 3.9 | Ievades tips parole

Tu uzzini, kā izveidot paroles laukus.

Teksta vadlīnija

Izvēles rūtiņas

Izveidojiet tīmekļa veidlapas: 4.1 | Izvēles rūtiņa – Pamati

Izveidot tīmekļa formu: 4.1 | Atzīmēšanas rūtiņa – pamati

Mēs sākam ar rūtiņu pamatiem un to pielietojumu iespējām.

Teksta vadlīnija

Izveidot tīmekļa veidnes: 4.2 | Atzīmēšanas rūtiņa izmantošana JS (Javascript)

Izveidojiet tīmekļa formas: 4.2 | Atzīmēšanas rūtiņu izmantošana JS

Tu mācies, kā ar JavaScript nolasīt un iestatīt izvēles rūtiņu stāvokli.

Teksta vadlīnija

Izveidot tīmekļa veidlapas: 4.3 | Ielīmējiet izvēles rūtiņu

Izveidojiet tīmekļa veidnes: 4.3 | Atzīmju rūtiņu stils

Es parādīšu dažādas iespējas, kā pielāgot izvēles rūtiņu izskatu.

Teksta vadlīnija

Formu ievades veidi un paplašinātie lauki

Izveidojiet tīmekļa formas: 5.1 | Radiopogas

Es izskaidrotu, kā darbojas radio pogas un kā tās izmanto savos veidlapās.

Teksta vadlīnija

Izveidojiet tīmekļa formu: 5.2 | Failu augšupielāde

Izveidojiet tīmekļa formas: 5.2 | Faila augšupielāde

Tu apgūsi, kā ļaut lietotājiem augšupielādēt failus.

Teksta vadlīnija

Izveidot tīmekļa formas: 5.3 | Faila ievade ar JS

Izveidot tiešsaistes formas: 5.3 | Faila ievade ar JS

Tu padziļini savas zināšanas par faila augšupielādi un iemācies, kā ar JavaScript vari apstrādāt atlasīto failu.

Teksta vadlīnija

Izveidojiet tīmekļa veidlapas: 5.4 | Slēptie ievades lauki

Izveidojiet tīmekļa formas: 5.4 | Paslēptie ievades lauki

Esmu gatavs izmantot slēptos ievades laukus, lai nosūtītu papildu informāciju.

Teksta vadlīnija

Izveidot tīmekļa formas: 5.5 | Skaitļu ievades

Mēs apkopojam dažādas iespējas skaitļu ievadei.

Teksta vadlīnija

Izveidot tīmekļa formas: 5.6 | diapazona slīdnis

Izveidojiet tīmekļa formas: 5.6 | Diapazona slīdnis

Tu mācies, kā ar amplitūdas slīdnis vari atlasīt konkrētu vērtību diapazonu un implementēt slīdnji.

Teksta vadlīnija

Izveidojiet tīmekļa formas: 5.7 | Datuma un laika ievade

Es tev parādīšu, kā ievietot datumu un laiku savos veidlapās.

Teksta vadlīnija

Izveidojiet tīmekļa formas: 5.8 | E-pasts un URL

Mēs koncentrējamies uz īpašajiem ievades laukiem e-pasta adresēm un URL.

Teksta vadlīnija

Izveidojiet tīmekļa formas: 5.9 | Krāsa

Tu mācies, kā izvēlēties krāsas, izmantojot krāsu izvēles lauku.

Teksta vadlīnija

Izveidojiet tīmekļa formas: 5.10 | Tipi search un tel

Izveidot tīmekļa formas: 5.10 | Tipi search un tel

Aš jums pristatysiu paieškos laukus ir telefono numerių laukus.

Teksta vadlīnija

Izveidojiet tīmekļa veidlapas: 5.11 | Ievades teksti vairākās rindās ar textarea

Izveidojiet tīmekļa veidlapas: 5.11 | Vairākrindu teksta ievade ar textarea

Tu uzzināsi, kā textarea- elementu izmanto, lai ievadītu vairākās rindas tekstu.

Teksta vadlīnija

Veidot tīmekļa formas: 5.12 | Saraksti ar izvēlni

Izveidojiet tīmekļa formas: 5.12 | Saraksti ar izvēles lauku

Es izskaidrošu, kā izveidot atlasīšanas sarakstus ar select-elementu.

Teksta vadlīnija

Paplašinātais veidlapas izveides struktūra un validācija ar JavaScript un pamatstruktūrām

Izveidot tīmekļa formas: 6.1 | Opciju grupēšana

Jūs mācāties, kā grupēt opcijas izvēles rādītājā.

Teksta vadlīnija

Izveidot tīmekļa formas: 6.2 | Ieteikumu saraksti ar datalist

Izveidot tiešsaistes veidlapas: 6.2 | Ieteikumu saraksti ar datalist

Es tev parādīšu, kā izveidot ieteikumu sarakstus ievades laukiem.

Teksta vadlīnija

Izveidojiet tīmekļa veidlapas: 6.3 | autocomplete atribūts

Izveidot tīmekļa formas: 6.3 | autocomplete atribūts

Tu mācies, kā aktivizēt automātisko ievades aizpildīšanu.

Teksta vadlīnija

Izveidojiet tīmekļa formas: 6.4 | Formas sadaļas ar lauku komplektiem

Izveidot tīmekļa veidlapas: 6.4 | Veidlapas sadaļas ar lauku grupu

Es skaidrošu, kā strukturēt savus formas ar fieldset- elementiem.

Teksta vadlīnija

Veidot tīmekļa formas: 6.5 | Validācija ar JavaScript

Iesīkstīga ieviešana klienta pusē notiekošā veidlapas validācijā ar JavaScript.

Teksta vadlīnija

Izveidot tīmekļa formas: 6.6 | Servera puses apstrāde ar Node.JS un Express

Izveidojiet tīmekļa formas: 6.6 | Servera puses apstrāde ar Node.JS un Express

Es parādīšu, kā tu saņem formārio datu, kas nosūtīti uz serveri, izmantojot Node.js un Express .

Teksta vadlīnija Lejupielādēt projektu failu

Izveidot tīmekļa formas: 6.7 | Saņemt formas datus ar GET apstrādātāju

Izveidot tīmekļa formas: 6.7 | Saņemt formu datus ar GET apstrādātāju

Tu mācies, kā saņemt formas datus, izmantojot GET metodi.

Teksta vadlīnija

Izveidot tīmekļa formas: 6.8 | Saņemt formas datus ar POST apstrādātāju

Izveidojiet tīmekļa formas: 6.8 | Saņemt formas datus ar POST apstrādātāju

Es skaidrošu, kā tu saņem Formas datus, izmantojot POST metodi.

Teksta vadlīnija

Izveidojiet tīmekļa formas: 6.9 | Formas un formas elementi React - izveidot projektu

Izveidojiet tīmekļa formu: 6.9 | Formas un formas elementi React - izveidot projektu

Mēs sākam ar React projekta izveidi un formas integrāciju.

Teksta vadlīnija Lejupielādēt projektu failu

Izveidojiet tīmekļa formas: 6.10 | Ievades elementi Reactā

Tu mācies, kā izmanto dažādas ievades elementus React.

Teksta vadlīnija

Izveidojiet tīmekļa formas: 6.11 | Select un Textarea elementi Reactā

Izveidojiet tīmekļa formu: 6.11 | Select un Textarea elementi Reactā

Mēs apspriežam select- un textarea- elementus Reactā.

Teksta vadlīnija

Izveidot tīmekļa formas: 6.12 | Formas ar Alpine.js

Es parādīšu, kā tu apstrādā formu ar JavaScript ietvari Alpine.js.

Teksta vadlīnija Lejupielādēt projektu failu

Izveidojiet tīmekļa formas: 6.13 | Veidlapas ar VueJs

Izveidojiet tīmekļa formas: 6.13 | Formas ar VueJs

Es skaidrošu, kā iekļaut veidlapas Vue.js lietojumprogrammās.

Teksta vadlīnija Lejupielādēt projektu failu

Detaļas par saturu

Tīmekļa veidlapas un to ievades lauki – soli pa solim skaidrojums
Vai vēlies paplašināt savas zināšanas par tīmekļa veidlapu izstrādi? Šajā pamācību materiālā tu iemācīsies izveidot funkcionālas formas ar HTML, JavaScript, kā arī servera skriptiem un bibliotēkām. Vai nu vienkārša nosaukumu un e-pasta adrešu pieprasīšana vai sarežģīta kontaktforma – pēc šī kursa būsi spējīgs programmēt savas tīmekļa formas ar nepieciešamajiem ievades laukiem un integrēt tās savās vietnēs.
Vairāk nekā sešu stundu garajā video pamācībā no programmatūras izstrādātāja un skolotāja Stefana Haevša tiekas visi, kas vēlas izveidot tīmekļa formas, izstrādātāji, kuri izmanto formas JS-UI infrastruktūrās, un tīmekļa izstrādātāji, kuri vēlas pieprasīt lietotāja ievades datus bez daudz JavaScript. Lieliski piemērots tīmekļa izstrādātājiem, tīmekļa dizaineriem, frontenda izstrādātājiem, iesācējiem un vairāk pieredzējušiem cilvēkiem – un jau ar pamata HTML zināšanām viegli uztverams.

HTML pamatprincipi veidlapām tavās vietnēs

Ja līdz šim tev bija maz vai vispār nebija zināšanu par veidlapām tīmeklī, sāc šo pamācību ar pamatiem. Tu uzzināsi visu svarīgo par veidlapas uzbūvi un par dažādiem HTML veidlapas elementiem. Iemācies dažādas ievades laukus, piemēram, atzīmējumu rūtiņas, radio pogas, failu augšupielādes, paroles laukus un tekstu, kā arī to atribūtus un validācijas iespējas. Iemācies, kā izveidot lietotājam draudzīgas un pieejamās formas ar dažādiem formas elementiem.

Dinamiskas tīmekļa formas, servera puses apstrāde un formas modernajās JavaScript infrastruktūrās

Interakcija ar veidlapas elementiem var būt mērķtiecīga, vadoties pēc JavaScript, lai radītu dinamisku un lietotājam draudzīgu pieredzi. Tādējādi ir iespējams izlasīt, labot un pēc nepieciešamības automātiski validēt ievades. Ar klienta puses validāciju nepareizi vai nepilnīgi dati var tikt bloķēti tieši lietotājam, pirms tie tiek nosūtīti uz serveri. Tas uzlabo datu kvalitāti un samazina iespējamos kļūdu avotus. Vēl viens svarīgs aspekts ir veidlapu dinamiska pielāgošana lietotāja ievadēm un mijiedarbībai. Par visiem šiem aspektiem tiks runāts video pamācībā.

Ātrumā pārraudzīsi veidlapas datu sūtīšanu un saņemšanu no servera un servera puses apstrādi, izmantojot kā piemēru Node.js un Express. Turklāt apskatīsi veidlapu izmantošanu modernajās JavaScript infrastruktūrās, piemēram, veidlapu iekļaušanu React lietojumprogrammās un reaktīvu veidlapu izveidošanu ar React-Hooks un komponentēm. Iegūsti svarīgus padomus par veidlapu un formas elementu izveides stilu, kā arī datu drošību.

Šajā prakses pamācībā tu iemācīsies

Izmanto šo kursu, lai iegūtu plašas zināšanas par HTML veidlapu izstrādi. Iepazīsties ar dažādiem ievades laukiem un to īpatnībām. Uzzini, kā ar JavaScript kontrolēt formas elementus un kā piemērot atribūtus un validācijas. Apskaties arī, kā iekļaut formas modernajās JavaScript infrastruktūrās, piemēram, React, VueJs un AlpineJs.