Udfordring: Opret Formular med Inputfelter og Etiketter

Mål

Forbedr hjemmesidens brugeroplevelse ved at skabe en interaktiv formular, der kræver input for navn, email og adgangskode, komplet med tilhørende etiketter.

Opgave

Indarbejd en brugervenlig formular på din hjemmeside, der forbedrer brugerengagement og interaktion. Din opgave er at:

For navneinput: oprette et tekstinput, der indsamler brugernes navne. Brug de korrekte attributter for at sikre en problemfri oplevelse.
1. Definér den passende type for tekstinput;
2. Sæt placeholder til John;
3. Sørg for, at input er fokuseret som standard.
For emailinput: oprette et emailinput, der indsamler brugernes emailadresser. Sikr datanøjagtighed ved at bruge de passende attributter.
1. Definér den korrekte type for emailinput;
2. Sæt placeholder til example@gmail.com;
3. Marker feltet som påkrævet.
For adgangskodeinput: oprette et sikkert adgangskodeinput, der beskytter brugerdata. Brug de passende attributter for at forbedre databeskyttelsen.
1. Definér den korrekte type for adgangskodeinput;
2. Gør feltet påkrævet.

index.html

index.css

autofocus: fokuserer automatisk på inputfeltet, når siden indlæses.
required: markerer inputfeltet som obligatorisk, hvilket forhindrer formularindsendelse, hvis det efterlades tomt.
placeholder: giver en antydning eller eksempeltekst til inputfeltet.
for og id: forbinder en etiket med et inputfelt for forbedret tilgængelighed.
type: angiver typen af data, der forventes i inputfeltet (f.eks. text, email, password).

index.html

index.css

Var alt klart?

Tak for dine kommentarer!

Sektion 5. Kapitel 6

Spørg AI

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Kursusindhold

Ultimativ HTML

1. Forståelse af Webudvikling

Velkommen til HTML og Webudvikling Hvad Er Internettet?Hvordan Fungerer Internettet?Forståelse af Hvordan Hjemmesider Fungerer Frontend og Backend Udvikling Forklaret

2. HTML Tags og Attributter

3. HTML-Dokumentstruktur

4. Arbejde med Medier og Tabeller

5. HTML-Formularer og Brugerinput

Udfordring: Opret Formular med Inputfelter og Etiketter

Mål

Forbedr hjemmesidens brugeroplevelse ved at skabe en interaktiv formular, der kræver input for navn, email og adgangskode, komplet med tilhørende etiketter.

Opgave

Indarbejd en brugervenlig formular på din hjemmeside, der forbedrer brugerengagement og interaktion. Din opgave er at:

For navneinput: oprette et tekstinput, der indsamler brugernes navne. Brug de korrekte attributter for at sikre en problemfri oplevelse.
1. Definér den passende type for tekstinput;
2. Sæt placeholder til John;
3. Sørg for, at input er fokuseret som standard.
For emailinput: oprette et emailinput, der indsamler brugernes emailadresser. Sikr datanøjagtighed ved at bruge de passende attributter.
1. Definér den korrekte type for emailinput;
2. Sæt placeholder til example@gmail.com;
3. Marker feltet som påkrævet.
For adgangskodeinput: oprette et sikkert adgangskodeinput, der beskytter brugerdata. Brug de passende attributter for at forbedre databeskyttelsen.
1. Definér den korrekte type for adgangskodeinput;
2. Gør feltet påkrævet.

index.html

index.css

autofocus: fokuserer automatisk på inputfeltet, når siden indlæses.
required: markerer inputfeltet som obligatorisk, hvilket forhindrer formularindsendelse, hvis det efterlades tomt.
placeholder: giver en antydning eller eksempeltekst til inputfeltet.
for og id: forbinder en etiket med et inputfelt for forbedret tilgængelighed.
type: angiver typen af data, der forventes i inputfeltet (f.eks. text, email, password).

index.html

index.css

Var alt klart?

Tak for dine kommentarer!

Sektion 5. Kapitel 6