Utmaning: Skapa Formulär med Inputs och Etiketter

Mål

Förbättra webbplatsens användarupplevelse genom att skapa ett interaktivt formulär som kräver inmatningar för namn, e-post och lösenord, komplett med tillhörande etiketter.

Uppgift

Inkorporera ett användarvänligt formulär på din webbplats för att förbättra användarengagemang och interaktion. Din uppgift är att:

För namninputen: skapa en textinput som samlar in användarnas namn. Använd rätt attribut för att säkerställa en smidig upplevelse.
1. Definiera den lämpliga type för textinputen;
2. Sätt placeholder till John;
3. Se till att inputen är fokuserad som standard.
För e-postinputen: etablera en e-postinput som samlar in användarnas e-postadresser. Säkerställ datanoggrannhet genom att använda lämpliga attribut.
1. Definiera den korrekta type för e-postinputen;
2. Sätt placeholder till example@gmail.com;
3. Markera fältet som obligatoriskt.
För lösenordsinputen: skapa en säker lösenordsinput som håller användardata säkra. Använd lämpliga attribut för att förbättra dataskyddet.
1. Definiera den korrekta type för lösenordsinputen;
2. Gör fältet obligatoriskt.

index.html

index.css

autofocus: fokuserar automatiskt på inmatningsfältet när sidan laddas.
required: markerar inmatningsfältet som obligatoriskt, vilket förhindrar formulärinlämning om det lämnas tomt.
placeholder: ger en ledtråd eller exempeltext för inmatningsfältet.
for och id: associerar en etikett med ett inmatningsfält för förbättrad tillgänglighet.
type: specificerar typen av data som förväntas i inmatningsfältet (t.ex. text, email, lösenord).

index.html

index.css

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 5. Kapitel 6

Fråga AI

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Kursinnehåll

Ultimate HTML

1. Förstå Webbutveckling

Välkommen till HTML och Webbutveckling Vad Är Internet?Hur Fungerar Internet?Förstå Hur Webbplatser Fungerar Frontend- och Backendutveckling Förklarat

2. HTML-Taggar och Attribut

3. HTML-Dokumentstruktur

4. Arbeta med Media och Tabeller

5. HTML-Formulär och Användarinmatning

Utmaning: Skapa Formulär med Inputs och Etiketter

Mål

Förbättra webbplatsens användarupplevelse genom att skapa ett interaktivt formulär som kräver inmatningar för namn, e-post och lösenord, komplett med tillhörande etiketter.

Uppgift

Inkorporera ett användarvänligt formulär på din webbplats för att förbättra användarengagemang och interaktion. Din uppgift är att:

För namninputen: skapa en textinput som samlar in användarnas namn. Använd rätt attribut för att säkerställa en smidig upplevelse.
1. Definiera den lämpliga type för textinputen;
2. Sätt placeholder till John;
3. Se till att inputen är fokuserad som standard.
För e-postinputen: etablera en e-postinput som samlar in användarnas e-postadresser. Säkerställ datanoggrannhet genom att använda lämpliga attribut.
1. Definiera den korrekta type för e-postinputen;
2. Sätt placeholder till example@gmail.com;
3. Markera fältet som obligatoriskt.
För lösenordsinputen: skapa en säker lösenordsinput som håller användardata säkra. Använd lämpliga attribut för att förbättra dataskyddet.
1. Definiera den korrekta type för lösenordsinputen;
2. Gör fältet obligatoriskt.

index.html

index.css

autofocus: fokuserar automatiskt på inmatningsfältet när sidan laddas.
required: markerar inmatningsfältet som obligatoriskt, vilket förhindrar formulärinlämning om det lämnas tomt.
placeholder: ger en ledtråd eller exempeltext för inmatningsfältet.
for och id: associerar en etikett med ett inmatningsfält för förbättrad tillgänglighet.
type: specificerar typen av data som förväntas i inmatningsfältet (t.ex. text, email, lösenord).

index.html

index.css

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 5. Kapitel 6