Oppgaver: HTML Skjema

Nivå 1: Lett

🔐 Enkel Innlogging

Lag et standard innloggingsskjema.

Krav:

  • Brukernavn (tekst) og Passord (skjult).
  • Husk label!
Nivå 1: Lett

📧 Nyhetsbrev

Et enkelt felt for å melde seg på nyhetsbrev.

Krav:

  • E-post felt som krever "@" (type="email").
  • En knapp som sier "Abonner".
Nivå 1: Lett

🎮 Gamer Registrering

Du skal lage et registreringsskjema for en e-sport turnering. Fokuser på riktige input-typer.

Krav:

  • <form> element som omslutter alt.
  • Et tekstfelt for Gamertag.
  • Et e-postfelt for Kontakt-epost.
  • Husk <label> til alle felter!
  • En "Send inn" knapp.
Nivå 2: Medium

💼 Jobbsøknad

Et skjema for å søke jobb. Her må du bruke tekstområde.

Krav:

  • Navn og E-post.
  • Et stort tekstfelt (textarea) for "Søknadstekst".
  • En checkbox for "Jeg godtar vilkårene".
Nivå 2: Medium

⭐ Tilbakemelding

Gi brukeren mulighet til å gi tilbakemelding.

Krav:

  • Radio-knapper for terningkast 1-6.
  • Input for overskrift.
  • Textarea for detaljert beskrivelse.
Nivå 2: Medium

🍕 Pizza Bestilling

Lag et skjema hvor brukeren kan sette sammen sin egen pizza. Her må du bruke valg-elementer.

Krav:

  • Størrelse: Bruk radio-knapper (Liten, Medium, Stor). Husk name attributtet!
  • Ingredienser: Bruk checkbox for minst 3 valg (Ost, Skinke, Sopp).
  • Levering: En select-meny der man velger by (Oslo, Bergen, Trondheim).
Nivå 3: Utfordring

📊 Spørreundersøkelse

En omfattende undersøkelse.

Krav:

  • Minst 3 seksjoner (Personalia, Vaner, Preferanser).
  • Blanding av radio, checkbox og select.
Nivå 3: Utfordring

🛒 Nettbutikk Kasse

Betalingsinformasjon og levering.

Krav:

  • Leveringsadresse (Gate, Postnr, Sted).
  • Kortinformasjon (kun visuelt, ingen ekte data).
Nivå 3: Utfordring

✈️ Reisebooking

Et mer avansert skjema for å bestille en reise.

Krav:

  • Input for Avreisedato (bruk riktig type).
  • Input for Passord (skal være skjult tekst).
  • Alle feltene må ha attributtet required (må fylles ut).
  • Bruk placeholder for å gi hint i tekstfeltene.
🐞 Feilsøking

Hvorfor kan jeg velge begge?

Kunden klager på at de kan velge både "Katt" og "Hund" samtidig. Det skal bare være lov å velge én!

<input type="radio" name="dyr1" value="katt"> Katt
<input type="radio" name="dyr2" value="hund"> Hund

Oppgave:

Hvordan kan du fikse feilen i koden?

🐞 Feilsøking

Hvorfor virker ikke label?

Kunden prøver å trykke på teksten "Jeg godtar", men checkboxen blir ikke krysset av.

<input type="checkbox" id="vilkar">
<label for="regler">Jeg godtar</label>

Oppgave:

Hvorfor snakker de ikke sammen?

🐞 Feilsøking

Siden laster på nytt?!

Hver gang jeg trykker på knappen for å åpne menyen, blinker siden og laster på nytt.

<form>
  ...
  <button>Åpne Meny</button>
</form>

Oppgave:

Hva er feil i dette skjemaet?