Web űrlapok létrehozása (Útmutató)

Webes űrlapok létrehozása weboldalakhoz (Gyakorlati útmutató)

Nyelv: Német

Webes űrlapok létrehozása webhelyek számára (gyakorlati útmutató)

Hogyan lehet létrehozni webes űrlapokat webhelyeidhez - lépésről lépésre elmagyarázva! Legyen szó név, e-mail cím, jelszó, jelölőnégyzet, dátum, lista vagy lenyíló menü bevitelekéről: Tanuld meg ebben a gyakorlati útmutatóban, hogyan jutsz el az első HTML űrlaptól a teljesen működőképes web űrlapig.

Web-formok létrehozása - az alapoktól a funkcionális formákig
E-mail, jelszó és egyéb adatok megfelelő mezőinak létrehozása és kiolvasása
Jelölőnégyzetek, választógombok, legördülő menük, többsoros szövegbevitel és még több létrehozása
Stephan Haewß fejlesztőtől hatórás gyakorlati bemutató
Projektfájlok a mutatott tartalmak követéséhez
Optimális webfejlesztők, webtervezők és frontend-fejlesztők számára

Az egyszerű név- és e-mail-felkérésből a bonyolultabb, feltöltési funkcióval rendelkező kapcsolatfelvételi űrlapig: itt megtanulhatod, hogyan hozz létre weboldalaidhoz teljes körűen űrlapokat!

Zugriff auf alle Inhalte

In der Mitgliedschaft ab * € monatlich

oder

Inhalt in den Warenkorb

Sofort-Download nach Kauf: einmalig * €

részletek

Tartalom: 6 h Video-tanfolyam
Licenc: magán és kereskedelmi Jogi felhasználás
Bónusz: beleértve a munkaeszközöket

Kategóriák

Webdesign, CMS & fejlesztés

Szerelemmel készítette::

Stephan Haewß

Űrlapok létrehozása - Bevezetés

Webes űrlapok létrehozása: 1.1 | Bevezetés és áttekintés

Ingyenes

Web űrlapok létrehozása: 1.1 | Bevezetés és áttekintés

Itt megtudhatod, hogy miről szól a kurzus, és mire számíthatsz.

Web-formok létrehozása: 1.2 | HTML formok - miért és hogyan használjuk?

Webes űrlapok létrehozása: 1.2 | HTML űrlapok - miért és hogyan használjuk?

Miért is kellene használni az HTML űrlapokat és hogyan működik ez általában?

Webes űrlapok létrehozása: 1.3 | Első projekt létrehozása

Itt lesz létrehozva a projekt, amelyben az első űrlap integrálódik.

Webes űrlapok létrehozása: 1.4 | Az első HTML űrlap

Web-formok létrehozása: 1.4 | Az első HTML űrlap

Első egyszerű űrlapodat hozod létre, és megismered az alapvető struktúrát.

Űrlapok

Web űrlapok létrehozása: 2.1 | Miért használjuk az űrlapokat vagy az űrlap címkéit?

Megvilágítjuk az HTML űrlapok sokféle felhasználási lehetőségét webalkalmazásokban.

Letöltése a projektfájlnak

Web űrlapok létrehozása: 2.2 | Űrlapadatok kiolvasása JavaScript segítségével

Webes űrlapok létrehozása: 2.2 | Űrlapadatok kiolvasása JavaScript segítségével

Megtanulod, hogyan olvasod és feldolgozod a felhasználók által bevitt adatokat JavaScript segítségével.

Webes űrlap létrehozása: 2.3 | Űrlap formázása és további beviteli típusok

Webes űrlapok létrehozása: 2.3 | Űrlap szépítés és további beviteli típusok

Ismerkedjünk meg az űrlapok tervezési lehetőségeivel, és mutatok neked különböző beviteli mezőket.

Űrlapokhoz való bevitel-ellenőrzés és eseménykezelés

Web űrlapok létrehozása: 3.1 | Az első ellenőrzés e-mail bevitellel

Web-formulárok létrehozása: 3.1 | Az első ellenőrzés az e-mail bevitelnél

Egy egyszerű e-mail ellenőrzést valósítasz meg annak érdekében, hogy megbizonyosodj arról, hogy a megadott adatok megfelelnek az e-mail formátumnak.

Webes űrlapok létrehozása: 3.2 | Input típus number és attribútumok

Web űrlapok létrehozása: 3.2 | Input típus szám és attribútumok

Foglalkozunk numerikus bemenetekkel és az ezekhez tartozó attribútumokkal a lehetséges értékek korlátozására.

Webes űrlapok létrehozása: 3.3 | Reagálás az input elem változásaira

Web űrlapok létrehozása: 3.3 | Reagálni az input elem változásaira

Tanulod, hogyan kezelheted a JS eseményeket, amelyek akkor jelentkeznek, amikor egy beviteli mező tartalma megváltozik.

Web űrlapok létrehozása: 3.4 | Reagálás változásokra az addEventListener segítségével

Web űrlapok létrehozása: 3.4 | Reagálás az eseményekre az addEventListener segítségével

Mélyebben foglalkozunk az eseménykezelés témájával, és alkalmazzuk a addEventListener-t rugalmasabb reakciókra.

Űrlapok létrehozása: 3.5 | Áttekintés: Az input elem

A különböző input-típusok és tulajdonságaik részletes összefoglalása.

Webes űrlapok létrehozása: 3.6 | Tulajdonságok: readonly, disabled, placeholder, minlength, maxlength

A legfontosabb attribútumok tisztázása az input mezők viselkedésének irányításához.

Web űrlapok létrehozása: 3.7 | Attribute: minta és kötelező

Webes űrlapok létrehozása: 3.7 | Tulajdonságok: minta és kötelező

Tanulni fogsz, hogy hogyan végezhetsz el bonyolult ellenőrzéseket reguláris kifejezésekkel és a kötelező-Attribútummal.

Web-formok létrehozása: 3.8 | A spellcheck attribútum

Webes űrlapok létrehozása: 3.8 | A spellcheck attribútum

Mutatjuk neked, hogyan tudod be- vagy kikapcsolni az érintő mezők helyesírás-ellenőrzését.

Web-formok létrehozása: 3.9 | Input-típus jelszó

Web űrlapok létrehozása: 3.9 | Beviteli típus jelszó

Megtudod, hogyan hozz létre jelszó mezőket.

Jelölőnégyzetek

Web űrlapok létrehozása: 4.1 | Checkbox - Alapok

Webes űrlapok létrehozása: 4.1 | Jelölőnégyzet - Alapok

Kezdjük a jelölőnégyzetek alapjaival és felhasználási lehetőségeikkel.

Web űrlapok létrehozása: 4.2 | Checkbox használata JS-ben

Meg fogod tanulni, hogyan lehet JavaScript segítségével ellenőrizni és beállítani a jelölőnégyzetek állapotát.

Web-formok létrehozása: 4.3 | Checkbox stílusítása

Űrlapok létrehozása: 4.3 | Jelölőnégyzet stílusa

Mutatom a különböző lehetőségeket a jelölőnégyzetek megjelenésének testreszabásához.

Űrlap beviteltípusok és kiterjesztett mezők

Web-formok létrehozása: 5.1 | Radiogombok

Űrlapok létrehozása: 5.1 | Választógombok

Megmagyarázom a választógombok működését, és hogyan használhatod őket az űrlapjaidban.

Webes űrlapok létrehozása: 5.2 | Fájl feltöltés

Web űrlapok létrehozása: 5.2 | Fájl feltöltés

Tanulod, hogyan engedélyezed a felhasználóknak a fájlok feltöltését.

Webes űrlapok létrehozása: 5.3 | Fájlbevitel JS-sel

Webes űrlapok létrehozása: 5.3 | Fájl bemenet JS-sel

Mélyíted a fájlfeltöltés ismereteidet, és megtanulsz JavaScript segítségével módosítani a kiválasztott fájlt.

Web-formok létrehozása: 5.4 | Rejtett beviteli mezők

Webes űrlapok létrehozása: 5.4 | Rejtett beviteli mezők

Érintem a rejtett beviteli mezők használatát az extra információk továbbításához.

Webes űrlapok létrehozása: 5.5 | Számbevitel

Web-formok létrehozása: 5.5 | Számbevitel

Összefoglaljuk a különböző lehetőségeket a számok megadására.

Űrlapok létrehozása: 5.6 | Tartomány csúszka

Tanulni fogsz, hogyan lehet tartomány-csúszkákkal választani egy adott értéktartományt és hogyan lehet egy csúszkát implementálni.

Webes űrlapok létrehozása: 5.7 | Dátum- és időbevitel

Webformok létrehozása: 5.7 | Dátum- és időbevitel

Megmutatom neked, hogyan valósíthatod meg a dátum- és időbevitelt az űrlapjaidban.

Webes űrlapok létrehozása: 5.8 | E-mail és URL

Kiemelt figyelmet fordítunk az e-mail címek és URL-címek speciális beviteli mezőire.

Web űrlapok létrehozása: 5.9 | Szín

Megtanulod, hogyan lehet színeket kiválasztani egy színválasztó mezőből.

Web űrlapok létrehozása: 5.10 | A search és tel típusok

Web űrlapok létrehozása: 5.10 | A search és a tel típusok

Bemutatom neked a keresési kulcsok és telefonszámok beviteli mezőit.

Webes űrlapok létrehozása: 5.11 | Többsoros szövegbevitel a textarea segítségével

Web űrlapok létrehozása: 5.11 | Többsoros szövegbevitel textarea segítségével

Megtudod, hogyan valósítod meg a többsoros szövegbevitelt a textarea elem segítségével.

Webes űrlapok létrehozása: 5.12 | Listák a "select" segítségével

Webes űrlapok létrehozása: 5.12 | Listák a választás segítségével

Meg fogom magyarázni, hogyan hozhatsz létre választható listákat a select elem segítségével.

Kibővített űrlapstruktúra és validáció JavaScript és keretrendszerek segítségével

Űrlapok létrehozása: 6.1 | Opciók csoportosítása

Tanulni fogsz, hogyan csoportosíthatod az opciókat egy legördülő listában.

Web-form-ok létrehozása: 6.2 | Javaslólisták a datalist segítségével

Űrlapok létrehozása: 6.2 | Javaslatok listája a "datalist" segítségével

Megmutatom neked, hogyan készíthetsz javaslatlistákat bevitele mezőkhöz.

Webes űrlapok létrehozása: 6.3 | Az autocomplete attribútum

Tanuld meg, hogyan aktiválhatod a beviteli mező automatikus kiegészítését.

Űrlapok létrehozása: 6.4 | Űrlaprészek Fieldsetekkel

Webes űrlapok létrehozása: 6.4 | Űrlap szekciók fieldsettel

Meg fogom magyarázni, hogyan strukturálhatod az űrlapjaidat fieldset-elemekkel.

Webes űrlapok létrehozása: 6.5 | JavaScript validálás

Webes űrlapok készítése: 6.5 | JavaScript validálás

Egy átfogó bevezetés a kliensoldali űrlapellenőrzésbe JavaScript segítségével.

Web űrlapok létrehozása: 6.6 | Szerveroldali kezelés Node.JS és Express segítségével

Megmutatom, hogyan fogadhatod az űrlap adatokat a kiszolgálón Node.js és Express segítségével .

Letöltése a projektfájlnak

Web-formok létrehozása: 6.7 | Űrlap adatok GET-kezelővel való fogadása

Űrlapok létrehozása: 6.7 | Űrlapadatok fogadása GET-kezelő segítségével

Megtanulod, hogyan fogod fel az űrlapadatokat a GET módszerrel.

Web űrlapok létrehozása: 6.8 | Űrlapadatok fogadása POST-kezelővel

Webes űrlapok létrehozása: 6.8 | Űrlapadatok POST-kezelővel való fogadása

Meg fogom magyarázni, hogyan fogadhatod a űrlapadatokat a POST-módszerrel.

Web űrlapok létrehozása: 6.9 | Űrlapok és űrlapelemek létrehozása React-ban - Projekt létrehozása

Web-formok létrehozása: 6.9 | űrlapok és űrlapelemek Reactben - projekt létrehozása

Elkezdjük a React projekt létrehozását és az űrlapok integrálását.

Letöltése a projektfájlnak

Web űrlapok létrehozása: 6.10 | Bemeneti elemek React-ben

Webes űrlap létrehozása: 6.10 | Beviteli elemek React-ban

Tanulni fogsz, hogyan használod a különböző input elemeket React-ben.

Webes űrlapok létrehozása: 6.11 | Select és Textarea elemek React-ben

Foglalkozunk a select- és textarea- elemekkel React-ban.

Web űrlapok létrehozása: 6.12 | Űrlapok Alpine.js-szel

Űrlapok létrehozása: 6.12 | Űrlapok Alpine.js segítségével

Megmutatom, hogyan kezeled az űrlapokat az Alpine.js JavaScript keretrendszerrel.

Letöltése a projektfájlnak

Webes űrlapok létrehozása: 6.13 | Űrlapok VueJs segítségével

Webes űrlapok létrehozása: 6.13 | Űrlapok VueJs használatával

Meg fogom magyarázni, hogyan integráld a űrlapokat a Vue.js alkalmazásokba.

Letöltése a projektfájlnak

Tartalmi részletek

Web-form-ok és azok beviteli mezői – Lépésről lépésre magyarázva
Szeretnéd kibővíteni a tudásodat a web-form-ok készítésében? Ebben a tutorialban megtanulhatod, hogyan hozz létre funkcionális űrlapokat HTML segítségével, JavaScript segítségével, valamint szerveroldali scriptekkel és könyvtárakkal. Legyen szó egyszerű név és e-mail lekérdezésről, vagy bonyolult kapcsolat űrlapról – ennek a kurzusnak köszönhetően képes leszel saját web-form-okat programozni az szükséges beviteli mezőkkel, és beilleszteni ezeket a webhelyeidre.
A több mint hat órás videótutorial a szoftverfejlesztési és oktató Szakember, Stephan Haewß vezetésével mindenki számára szól, aki web-form-okat szeretne készíteni, fejlesztők számára, akik űrlapokat használnak JS-UI keretrendszereken belül, valamint webfejlesztők számára, akik szeretnének felhasználói adatokat lekérdezni kevés JavaScript használata nélkül. Ideális a webfejlesztők, webdesignerek, front-end fejlesztők, kezdők és haladók számára – és már alapvető HTML ismeretekkel könnyen követhető.

HTML alapok web-form-okhoz a webhelyeidre

Ha eddig nem vagy csak kevés tapasztalatod van a web-form-ok területén, kezdd el ezt a tutorialt az alapokkal. Mindent megtudhatsz az építésről, valamint a különböző elemekről egy HTML űrlapon. Tudd meg különböző beviteli mezőket, mint a checkboxok, radiogombok, fájlfeltöltés, jelszómezők és szöveg, valamint azok attribútumait és ellenőrzési lehetőségeit. Szerezz be tudást arról, hogyan készíts felhasználóbarát és akadálymentes űrlapokat különböző űrlapelemekkel.

Dinamikus web-form-ok, szerveroldali feldolgozás & form-ok modern JavaScript keretrendszerekben

A űrlapelemekkel való interakciót célirányosan JavaScript segítségével lehet irányítani annak érdekében, hogy dinamikus és felhasználóbarát élményt nyújts. Így ki lehet olvasni, szerkeszteni és szükség esetén automatikusan ellenőrizni a bevitelt. A kliensoldali ellenőrzés segítségével a hibás vagy hiányos adatokat közvetlenül a felhasználótól lehet elfogni, mielőtt azokat a szerverre küldenék. Ez javítja az adatminőséget és csökkenti a lehetséges hibák forrását. Egy további fontos szempont a form-ok dinamikus alkalmazkodása a felhasználók beviteléhez és interakcióihoz. Mindezekre a szempontokra kitér a videótutorial.

Emellett foglalkozz a formular adatok küldésével és fogadásával a szerverre, valamint a szerveroldali feldolgozás példájának segítségével Node.js és Express használatával. Továbbá megvizsgálhatod a web-form-ok használatát modern JavaScript keretrendszerekben, pl. a form-ok integrálását React alkalmazásokban és a reaktív form-ok létrehozását React-Hookok és komponensek segítségével. Szerezz be továbbá fontos tippeket a form-ok és form-elemek stílizálásához, valamint az adatbiztonsághoz.

Ezt tanulod meg ebben a gyakorlati tutoriálban

Használd ezt a kurzust az átfogó ismeretek megszerzésére az HTML form-ok fejlesztése terén. Ismerd meg a különböző beviteli mezőket és azok sajátosságait. Tudd meg, hogy hogyan irányíthatók a form-elemek JavaScript segítségével, és hogyan alkalmazhatók az attribútumok és ellenőrzések. Nézd meg továbbá, hogyan lehet form-okat integrálni modern JavaScript keretrendszerekben, mint a React, VueJs és AlpineJs.