i den här artikeln kommer vi att lära oss hur man gör ett responsivt registreringsformulär i HTML och CSS. Vi kommer också att se hur du lägger till enkel lösenordsvalidering med javascript.
för alla typer av webbplatser är ett registreringsformulär viktigt. Kunderna har ett enkelt sätt att lära sig mer om din organisation om du har ett registreringsformulär på din webbplats. Ännu viktigare är att du tillåter ditt företag att få tillgång till rätt typ av abonnenter och deras data (med deras tillstånd, förstås).
koden för denna registreringsformulärmall är enkel och lätt att förstå. För vår bekvämlighet har vi inkluderat styling och javascript-kod i huvud HTML-filen. vi har använt HTML-formulär för att ge en grundläggande struktur till registreringsformuläret. Vi har försökt skapa en neumorfisk design för denna form.
för lösenordsvalideringen har vi använt regex-mönstermatchning med javascript. För att läsa mer om det besök-reguljära uttryck. För den här designen har vi ställt in lösenordsmönstret så att det ska vara alfanumeriskt med 8-15 tecken. Om lösenordet som matas in av användaren inte följer mönstret ändras gränsen för lösenordsinmatningsfältet till rött och om det matchar blir det grönt. Liknande är för Bekräfta lösenord också. Dessutom kontrollerar formuläret om lösenordet som anges i fältet Bekräfta lösenord matchar det tidigare angivna lösenordet eller inte.
Följande är källkoden för registreringsformuläret HTML. Vi rekommenderar att du tittar på videon inbäddad nedan tillsammans med koden.
kod:
du kan ladda ner registreringsformuläret HTML-kod från den här länken.
Läs också:
- hur man gör en responsiv Transparent inloggningssida i HTML och CSS ?
- hur man gör en responsiv kontakta oss sidmall med HTML och CSS?
- hur man gör en grundläggande inloggningsformulär och registreringsformulär med hjälp av HTML och CSS?
- Hur gör man responsiv 404-sida som inte hittades i HTML och CSS?