Web-lomakkeiden luominen (Ohje)

Luoda verkkosivustojen web-lomakkeita (käytännön opas)

Kieli: Saksa

Luoda web-lomakkeita verkkosivuille (käytännön opas)

Kuinka voit luoda verkkolomakkeita verkkosivustoillesi - vaihe vaiheelta selitetty! Olet sitten kysymässä nimiä, sähköpostiosoitteita, salasanoja, valintaruutuja, päivämääriä, listoja tai pudotusvalikkoja: Opettele tämän käytännön oppaan avulla, kuinka pääset ensimmäisestä HTML-lomakkeesta täysin toimivaan verkkolomakkeeseen.

Luoda verkkolomakkeita - perusteista toiminnallisiin lomakkeisiin
Luodaan ja luetaan kentät sähköpostin, salasanan ja muiden syöttämiseen oikein
Valintaruudut, radiopainikkeet, avattavat valikot, moniriviset tekstikentät ja muut luoda
Kattava, kuuden tunnin käytännön opastus kehittäjältä Stephan Haewßiltä
Projektin tiedostot sisällön jäljittämiseksi
Optimaalinen verkkokehittäjille, web-suunnittelijoille ja frontend-kehittäjille

Yksinkertaisesta nimi- ja sähköpostikyselystä monimutkaisempaan yhteydenottolomakkeeseen, jossa on tiedostojen lataustoiminto: Täällä opit luomaan kattavasti verkkolomakkeita verkkosivustoillesi!

Zugriff auf alle Inhalte

In der Mitgliedschaft ab * € monatlich

oder

Inhalt in den Warenkorb

Sofort-Download nach Kauf: einmalig * €

tiedot

Sisältö: 6 h Videokoulutus
Lisenssi: yksityinen ja kaupallinen Käyttöoikeudet
Bonus: sisältää työvälineet

Luokat

Verkkosuunnittelu, CMS ja kehitys

Rakkaudella luonut:

Stephan Haewß

Luodaan verkkolomakkeita - Johdanto

Ilmaiseksi

Luoda verkkolomakkeita: 1.1 | Johdanto ja yleiskatsaus

Täällä saat tietää, mistä kurssissa on kyse ja mitä voit odottaa.

Luoda verkkolomakkeita: 1.2 | HTML-lomakkeet - miksi ja miten käyttää?

Luoda verkkolomakkeita: 1.2 | HTML-lomakkeet - miksi ja miten käytetään?

Miksi ylipäätään pitäisi käyttää HTML-lomakkeita ja miten se yleensä tapahtuu?

Luoda verkkolomakkeita: 1.3 | Luoda ensimmäinen projekti

Tässä luodaan projekti, johon ensimmäinen lomake integroidaan.

Luoda verkkolomakkeita: 1.4 | Ensimmäinen HTML-lomake

Luot ensimmäisen yksinkertaisen lomakkeesi ja opit perusrakenteen tuntemusta.

Lomakkeet

Luo verkkolomakkeita: 2.1 | Miksi käyttää lomakkeita tai lomakkeen tagia?

Luoda verkkolomakkeita: 2.1 | Miksi käyttää lomakkeita tai lomake-elementtiä?

Valaisemme monipuoliset käyttömahdollisuudet HTML-lomakkeille web-sovelluksissa.

Lataa projektitiedosto

Luoda verkkolomakkeita: 2.2 | Lomaketiedot luetta JavaScriptillä

Luoda verkkolomakkeita: 2.2 | Lue lomaketiedot JavaScriptilla

Olet oppimassa, miten luet ja käsittelet käyttäjien syöttämiä tietoja JavaScriptillä.

Luoda verkkolomakkeita: 2.3 | Lomakkeen kaunistaminen ja lisää syöttötyyppejä

Luoda verkkolomakkeita: 2.3 | Lomakekauneuden ja muiden syöttölajien parantaminen

Menen käsittelemään lomakkeiden suunnitteluvaihtoehtoja ja esittelemään sinulle erilaisia syöttökenttiä.

Syöttövalidointi ja tapahtumankäsittely lomakkeille

Luodaan verkkolomakkeita: 3.1 | Ensimmäinen sähköpostin validointi

Luoda verkkolomake: 3.1 | Ensimmäinen validointi sähköpostiosoitteella

Toteutat yksinkertaisen sähköpostin validoinnin varmistaaksesi, että annetut tiedot vastaavat sähköpostimuotoa.

Luodaan web-lomakkeita: 3.2 | Syötekentän tyyppi number ja ominaisuudet

Luoda verkkolomakkeita: 3.2 | Syöttötyyppi numero ja ominaisuudet

Me käsittelemme numeerisia syötteitä ja niihin liittyviä arvonrajoitusattribuutteja.

Luoda verkkolomakkeita: 3.3 | reagoida muutoksiin syöttöelementissä

Luoda verkkolomakkeita: 3.3 | Reagoida muutoksiin input-elementissä

Opit, miten JS: ssä voit käsitellä tapahtumia, jotka tapahtuvat syöttökentän sisällön muuttuessa.

Luoda verkkolomakkeita: 3.4 | Reagoida muutoksiin käyttäen addEventListeneria

Luoda verkkolomakkeita: 3.4 | Reagoida muutoksiin addEventListenerilla

Syvennämme tapahtumankäsittelyä ja käytämme joustavampia reaktioita addEventListener-metodin avulla.

Luoda verkkolomakkeita: 3.5 | Yleiskatsaus: input-elementti

Kattava yhteenveto eri input-tyypeistä ja niiden ominaisuuksista.

Luoda verkkolomakkeita: 3.6 | Attribuutit: readonly, disabled, placeholder, minlength, maxlength

Selvitämme tärkeimmät attribuutit, jotka ohjaavat syöttökenttien käyttäytymistä.

Luoda verkkolomakkeita: 3.7 | Attribuutit: kuvio ja pakollinen

Luoda verkkolomakkeita: 3.7 | Attribuutit: pattern ja required

Opet oppimaan, miten suoritat monimutkaisia validointeja säännöllisillä lausekkeilla ja required-ominaisuudella.

Luoda verkkolomakkeita: 3.8 | Oikeinkirjoitustarkistuksen attribuutti

Luoda verkkolomakkeita: 3.8 | spellcheck-attribuutti

Näytämme sinulle, miten voit aktivoida tai deaktivoida oikeinkirjoitustarkistuksen lomakkeissasi.

Luodaan verkkolomakkeita: 3.9 | Syötetyyppi salasana

Luoda verkkolomakkeita: 3.9 | Tulo-tyyppi salasana

Saat tietää, miten luot salasanakenttiä.

Valintaruudut

Luoda verkkolomakkeita: 4.1 | Checkbox – perusteet

Luoda verkkolomakkeita: 4.1 | Valintaruutu - perusteet

Aloitamme valintaruutujen perusteista ja niiden käyttömahdollisuuksista.

Luoda verkkosivulomakkeita: 4.2 | Valintaruutu käyttäen JS (JavaScript)

Luodaan verkkolomakkeita: 4.2 | Ruutunappi JS:ssä

Olet oppinut, miten luet ja asetat valintaruutujen tilan JavaScriptillä.

Luoda verkkolomakkeita: 4.3 | Lisää valintaruutuun tyyli

Luoda verkkolomakkeita: 4.3 | Valintaruudun tyyli

Näytän erilaisia tapoja muokata valintaruutujen ulkonäköä.

Lomakkeen syöttötyypit ja laajennetut kentät

Luoda verkkolomakkeita: 5.1 | Radiobuttonit

Luoda verkkolomakkeita: 5.1 | Radiopainikkeet

Selitän radiopainikkeiden toiminnan ja miten käytät niitä lomakkeissasi.

Luoda verkkolomakkeita: 5.2 | Tiedoston lähetys

Opet kohtaan, kuinka annat käyttäjille luvan ladata tiedostoja.

Luoda verkkolomakkeita: 5.3 | Tiedostot syöttö JS

Luoda verkkolomakkeita: 5.3 | Tiedoston valinta JS:llä

Otatte syvemmin osaa tiedoston lataamiseen ja opit, miten voit muokata valittua tiedostoa JavaScriptillä.

Luoda verkkolomakkeet: 5.4 | Piilotetut syöttökentät

Luoda verkkolomakkeita: 5.4 | Piilotetut syöttökentät

Menen piilovarjotekenttien käytön syytä lisätietojen lähettämistä varten.

Luoda verkkolomakkeita: 5.5 | Numeroiden syöttäminen

Luoda verkkolomakkeita: 5.5 | numerotietojen syöttö

Koostamme erilaiset mahdollisuudet numeroiden syöttämiseen yhteen.

Luoda verkkolomakkeita: 5.6 | Range Slider

Luoda verkkolomakkeita: 5.6 | Välysäädin

Opet t infraasi, miten voit antaa käyttäjän valita tietyn arvoalueen ja toteuttaa liukusäätimen.

Luoda verkkolomakkeita: 5.7 | Päiväys- ja aikasyöttö

Näytän sinulle, kuinka toteutat päiväys- ja aikasyöttöjä lomakkeissasi.

Luoda verkkolomakkeita: 5.8 | Sähköposti ja URL

Keskitämme huomiomme erityisiin syöttökenttiin sähköpostiosoitteille ja URL-osoitteille.

Luoda verkkolomakkeita: 5.9 | Väri

Opet käyttämään värivalitsinta valitaksesi värejä.

Luoda verkkolomakkeita: 5.10 | Tyypit search ja tel

Esittelen sinulle hakusanojen ja puhelinnumeroiden syöttökentät.

Luoda verkkolomakkeita: 5.11 | Usean rivin tekstisyötteet textarea

Luoda verkkolomakkeita: 5.11 | Usean rivin tekstisyöttö textarea-elementillä

Saat tietää, miten toteutat monirivisen tekstinsyötön textarea-elementillä.

Luoda verkkolomakkeita: 5.12 | Luettelot valintaruuduilla

Luoda verkkolomakkeita: 5.12 | Listat valitse-muodossa

Selitän, miten luot valittavia luetteloita select-elementillä.

Laajennettu lomakestruktura ja validointi JavaScriptillä ja kehyksillä

Luotaamislomakkeiden luominen: 6.1 | Vaihtoehtojen ryhmittely

Luoda verkkolomakkeita: 6.1 | Vaihtoehtojen ryhmittely

Opit, miten voit ryhmitellä vaihtoehdot valintaluettelossa.

Luoda verkkolomakkeita: 6.2 | Ehdotuslistat datalistalla

Luoda verkkolomakkeita: 6.2 | Ehdotusluettelot datalistalla

Näytän sinulle, kuinka luot ehdotuslistoja syötekenttiä varten.

Luoda verkkolomakkeita: 6.3 | Automaattinen täydennys attribuutti

Luoda verkkolomakkeita: 6.3 | autocompleten atribuutti

Opit, kuinka aktivoit automaattisen syöttöehdotuksen.

Luoda verkkolomakkeita: 6.4 | Lomakkeen osiot kenttäryhminä

Luoda verkkolomakkeita: 6.4 | Lomakkeen osiot kenttäryhmien avulla

Selitän, miten järjestät lomakkeesi kenttäryhmä-elementtien avulla.

Luoda verkkolomakkeita: 6.5 | Validointi JavaScriptin avulla

Luoda verkkolomakkeita: 6.5 | Validointi JavaScriptillä

Kattava johdatus asiakaspuolella tapahtuvaan lomakkeen validointiin JavaScriptillä.

Luoda verkkolomakkeita: 6.6 | Palvelimella tapahtuva käsittely Node.JS:llä ja Expressillä

Luoda verkkolomakkeita: 6.6 | Palvelinpohjainen käsittely Node.JS:llä ja Expressillä

Näytän, miten vastaanotat lomaketietoja palvelimella Node.js:llä ja Expressillä .

Lataa projektitiedosto

Luoda verkkolomakkeita: 6.7 | Vastaanota lomakkeen tiedot GET-käsittelijällä

Luodaan verkkolomakkeita: 6.7 | Vastaanota lomaketiedot GET-käsittelijällä

Opit, miten vastaanotat lomaketietoja GET-menetelmällä.

Luoda verkkolomakkeita: 6.8 | Vastaanota lomaketiedot POST-käsittelijässä

Luoda verkkolomakkeita: 6.8 | Vastaanota lomakedata POST-käsittelijällä

Selitän, miten vastaanotat lomaketietoja POST-menetelmällä.

Luoda verkkolomakkeita: 6.9 | Lomakkeet ja lomakeosat Reactissa – projektin luominen

Luoda verkkolomakkeita: 6.9 | Lomakkeet ja lomakeelementit Reactissa – Projektin luominen

Aloitamme React-projektin luomisen ja lomakkeiden integroimisen.

Lataa projektitiedosto

Luoda verkkolomakkeita: 6.10 | Syöte-elementit Reactissa

Luodaan verkkolomakkeita: 6.10 | Input-elementit Reactissa

Opit käyttämään erilaisia syöttöelementtejä Reactissa.

Luodaan web-lomakkeita: 6.11 | Select- ja Textarea-elementit Reactissa

Luoda verkkolomakkeita: 6.11 | Valinta- ja tekstilaatikkoelementit Reactissa

Tutustumme Reactissa select- ja textarea- elementteihin.

Luoda verkkolomakkeita: 6.12 | Lomakkeet Alpine.js:llä

Näytän, miten käsittelet lomakkeita JavaScript-kehyksellä Alpine.js.

Lataa projektitiedosto

Luoda verkkolomakkeita: 6.13 | Lomakkeet VueJs:n avulla

Luoda verkkolomakkeita: 6.13 | Lomakkeet VueJs:llä

Selitän, miten integroit lomakkeet Vue.js-sovelluksiin.

Lataa projektitiedosto

Yksityiskohdat sisällöstä

Verkkolomakkeet ja niiden syötekentät – Askel askeleelta selitettynä
Haluat laajentaa tietämystäsi verkkolomakkeiden kehittämisessä? Tässä oppaassa opit luomaan toimivia lomakkeita HTML:n, JavaScriptin sekä palvelinpohjaisten skriptien ja kirjastojen avulla. Olipa kyse sitten yksinkertaisesta nimen ja sähköpostin kyselystä tai monimutkaisesta yhteydenottolomakkeesta – tämän kurssin jälkeen pystyt ohjelmoimaan omia verkkolomakkeita tarvittavilla syötekentillä ja upottamaan ne verkkosivustoillesi.
Yli kuuden tunnin pituinen videokurssi ohjelmistokehittäjältä ja kouluttajalta Stephan Haewß on suunnattu kaikille, jotka haluavat luoda verkkolomakkeita, kehittäjille, jotka käyttävät lomakkeita JS-UI-kehyksissä, sekä verkkosivujen kehittäjille, jotka haluavat kysellä käyttäjän syötteitä ilman paljon JavaScriptiä. Optimaalinen kurssi verkkokehittäjille, verkkosuunnittelijoille, etu- ja taustakehittäjille, aloittelijoille ja edistyneille – ja jo olemassa olevien perustiedon HTML-taitojen avulla helposti ymmärrettäväksi.

HTML-perusteet lomakkeisiin verkkosivuillasi

Jos sinulla ei ole vielä lainkaan tai sinulta on vain vähän taitoja verkkolomakkeiden alalla, aloita tämä opas perusteista. Opit kaiken tärkeän lomakkeen rakenteesta sekä erilaisista elementeistä HTML-lomakkeessa. Opi erilaiset syötekentät kuten valintaruudut, radiopainikkeet, tiedoston lataukset, salasanakentät ja teksti sekä niiden attribuutit ja tarkistusmahdollisuudet. Opi luomaan käyttäjäystävällisiä ja esteettömiä lomakkeita erilaisilla lomake-elementeillä.

Dynaamiset verkkolomakkeet, palvelinpohjainen käsittely & Lomakkeet modernissa JavaScript-kehyksissä

Interaktiota lomakkeen elementtien kanssa voidaan ohjata tarkoituksella JavaScriptillä, jotta luotaisiin dynaaminen ja käyttäjäystävällinen kokemus. Näin syötteet voidaan lukea, muokata ja tarvittaessa validoida automaattisesti. Asiakaspäätteinen validointi voi napata virheelliset tai puutteelliset tiedot suoraan käyttäjältä ennen kuin ne lähetetään palvelimelle. Tämä parantaa tietojen laatua ja vähentää mahdollisia virheiden lähteitä. Toisena tärkeänä näkökohtana on lomakkeiden dynaaminen sopeuttaminen käyttäjien syötteisiin ja interaktioihin. Video-oppaassa käsitellään kaikkia näitä näkökohtia.

Lisäksi tarkastelet Lomaketietojen lähettämistä ja vastaanottamista palvelimelle sekä palvelinpohjaista käsittelyä esimerkinomaisesti Node.js:n ja Expressin kautta. Lisäksi tarkastellaan verkkolomakkeiden käyttöä modernissa JavaScript-kehyksissä, kuten lomakkeiden integrointia React-sovelluksiin ja reaktiivisten lomakkeiden luomista React Hooksien ja komponenttien avulla. Saat tärkeitä vinkkejä lomakkeiden ja lomake-elementtien tyylinnästä sekä tietoturvasta.

Tämän käytännön oppaan avulla opit

Hyödynnä kurssia saadaksesi perusteelliset tiedot HTML-lomakkeiden kehittämisessä. Opi erilaiset syötekentät ja niiden erityispiirteet. Tutustu siihen, miten voit kontrolloida lomakeelementtejä JavaScriptillä ja miten voit käyttää attribuutteja ja tarkistuksia. Tutki myös, miten integroit lomakkeita moderneihin JavaScript-kehyksiin kuten React, VueJs ja AlpineJs.