tässä artikkelissa opetellaan reagoivan kirjautumislomakkeen tekemistä HTML: ssä ja CSS: ssä. Näemme myös, miten lisätä yksinkertainen salasanan validointi javascript.
mille tahansa verkkosivustolle rekisteröitymislomake on välttämätön. Asiakkailla on helppo tapa oppia lisää organisaatiostasi, jos sinulla on rekisteröitymislomake sivustossasi. Vielä tärkeämpää, annat yrityksesi päästä oikeanlaisia tilaajia ja heidän tietonsa (heidän luvallaan, tietenkin).
tämän rekisteröitymislomakemallin koodi on yksinkertainen ja helppo ymmärtää. Avuksemme, olemme sisällyttäneet muotoilu ja javascript koodi sisällä tärkein HTML-tiedosto. olemme käyttäneet HTML-lomaketta antaaksemme rekisteröitymislomakkeen perusrakenteen. Olemme yrittäneet luoda neumorfista muotoilua tälle muodolle.
salasanan vahvistamiseen olemme käyttäneet regex-kuviosovitusta JavaScriptin avulla. Lue lisää siitä käy-Säännölliset lausekkeet. Tässä nimenomaisessa mallissa olemme asettaneet salasanakuvion siten, että sen pitäisi olla aakkosnumeerinen 8-15 merkin kanssa. Jos käyttäjän syöttämä salasana ei noudata kaavaa, salasanan syöttökentän raja muuttuu punaiseksi ja jos se täsmää, se muuttuu vihreäksi. Samanlainen on Vahvista salasana myös. Lisäksi lomakkeella tarkistetaan, vastaako confirm password input-kenttään syötetty salasana aiemmin syötettyä salasanaa vai ei.
Seuraavassa on rekisteröitymislomakkeen HTML lähdekoodi. Suosittelemme katsomaan videon upotettu alla yhdessä koodin.
CODE:
voit ladata rekisteröitymislomakkeen HTML-koodin tästä linkistä.
luetaan myös:
- Kuinka tehdä reagoiva läpinäkyvä kirjautumissivu HTML: ssä ja CSS: ssä ?
- miten tehdä reagoiva ota meihin yhteyttä sivun malli HTML ja CSS?
- miten tehdään PERUSKIRJAUTUMISLOMAKE ja rekisteröintilomake HTML: n ja CSS: n avulla?
- miten tehdä responsiivinen 404-sivu, jota ei löydy HTML: stä ja CSS: stä?