## Mål
Forbedring af brugeroplevelsen på hjemmesiden ved at oprette en interaktiv formular, der kræver indtastning af navn, e-mail og adgangskode, med tilhørende etiketter.

## Opgave
Tilføj en enkel, brugervenlig formular til din side. Følg disse krav:
1. Navnefelt
   - Brug et tekstinput.
   - Indstil placeholder til `John`.
   - Gør inputfeltet fokuseret som standard (autofokus).
2. E-mailfelt
   - Brug et e-mailinput.
   - Indstil placeholder til `example@gmail.com`.
   - Marker feltet som påkrævet.
3. Adgangskodefelt
   - Brug et adgangskodeinput.
   - Gør dette felt påkrævet.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDwhLS0gQ2hhbmdlIHRoZSBjb2RlIGJlbG93IC0tPgogICAgPGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgICAgIDxsYWJlbCBmb3I9Im5hbWUiPk5hbWU6PC9sYWJlbD4KICAgICAgPGlucHV0IHR5cGU9Il9fXyIgaWQ9Im5hbWUiIG5hbWU9Im5hbWUiIHBsYWNlaG9sZGVyPSJfX18iIF9fXyAvPgoKICAgICAgPGxhYmVsIGZvcj0iX19fIj5FbWFpbDo8L2xhYmVsPgogICAgICA8aW5wdXQgdHlwZT0iX19fIiBpZD0iZW1haWwiIG5hbWU9ImVtYWlsIiBwbGFjZWhvbGRlcj0iX19fIiBfX18gLz4KCiAgICAgIDxsYWJlbCBfX189Il9fXyI+UGFzc3dvcmQ6PC9sYWJlbD4KICAgICAgPGlucHV0IHR5cGU9Il9fXyIgX19fPSJfX18iIG5hbWU9InBhc3N3b3JkIiBfX18gLz4KCiAgICAgIDxidXR0b24gdHlwZT0ic3VibWl0Ij5TdWJtaXQ8L2J1dHRvbj4KICAgIDwvZm9ybT4KICA8L2JvZHk+CjwvaHRtbD4=

KiB7CiAgYm94LXNpemluZzogYm9yZGVyLWJveDsKfQoKYm9keSB7CiAgZm9udC1mYW1pbHk6ICJDb21pYyBTYW5zIE1TIiwgY3Vyc2l2ZSwgc2Fucy1zZXJpZjsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmNlMzhhOwogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKCiAgbWFyZ2luOiAwOwogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7Cn0KCmZvcm0gewogIG1hcmdpbi10b3A6IDMwcHg7CiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZjsKICBwYWRkaW5nOiAzMHB4OwogIGJvcmRlci1yYWRpdXM6IDE1cHg7CiAgYm94LXNoYWRvdzogMCAxMHB4IDIwcHggcmdiYSgwLCAwLCAwLCAwLjEpOwogIHdpZHRoOiAzNTBweDsKICB0ZXh0LWFsaWduOiBjZW50ZXI7Cn0KCmgxIHsKICBjb2xvcjogI2U3MWQzNjsKICBtYXJnaW4tYm90dG9tOiAyMHB4OwogIGZvbnQtc2l6ZTogMjhweDsKfQoKbGFiZWwgewogIGRpc3BsYXk6IGJsb2NrOwogIGZvbnQtd2VpZ2h0OiBib2xkOwogIGNvbG9yOiAjZjljNzRmOwogIG1hcmdpbi1ib3R0b206IDEwcHg7CiAgZm9udC1zaXplOiAxOHB4OwogIHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7Cn0KCmlucHV0W3R5cGU9InRleHQiXSwKaW5wdXRbdHlwZT0iZW1haWwiXSwKaW5wdXRbdHlwZT0icGFzc3dvcmQiXSB7CiAgd2lkdGg6IDEwMCU7CiAgcGFkZGluZzogMTJweDsKICBtYXJnaW4tYm90dG9tOiAxNXB4OwogIGJvcmRlcjogMnB4IHNvbGlkICNmOWM3NGY7CiAgYm9yZGVyLXJhZGl1czogNXB4OwogIGZvbnQtc2l6ZTogMTRweDsKICBjb2xvcjogIzQ0NDsKICB0cmFuc2l0aW9uOiBib3JkZXItY29sb3IgMC4zcyBlYXNlLWluLW91dDsKfQoKaW5wdXRbdHlwZT0idGV4dCJdOmZvY3VzLAppbnB1dFt0eXBlPSJlbWFpbCJdOmZvY3VzLAppbnB1dFt0eXBlPSJwYXNzd29yZCJdOmZvY3VzIHsKICBib3JkZXItY29sb3I6ICNmZjZiNmI7Cn0KCmlucHV0OjpwbGFjZWhvbGRlciB7CiAgY29sb3I6ICM4ODg7CiAgZm9udC1zdHlsZTogaXRhbGljOwp9CgpidXR0b24gewogIGJhY2tncm91bmQtY29sb3I6ICNlNzFkMzY7CiAgY29sb3I6ICNmZmY7CiAgYm9yZGVyOiBub25lOwogIGJvcmRlci1yYWRpdXM6IDVweDsKICBwYWRkaW5nOiAxMnB4IDI0cHg7CiAgY3Vyc29yOiBwb2ludGVyOwogIGZvbnQtc2l6ZTogMTZweDsKICB0cmFuc2l0aW9uOiBiYWNrZ3JvdW5kLWNvbG9yIDAuM3MgZWFzZS1pbi1vdXQ7Cn0KCmJ1dHRvbjpob3ZlciB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmNmI2YjsKfQ==

1. `autofocus`: fokuserer automatisk på inputfeltet, når siden indlæses;
2. `required`: markerer inputfeltet som obligatorisk og forhindrer formularen i at blive sendt, hvis det er tomt;
3. `placeholder`: viser et hint eller eksempeltekst i inputfeltet;
4. `for` og `id`: forbinder en label med et inputfelt for bedre tilgængelighed;
5. `type`: angiver typen af data, der forventes i inputfeltet, såsom tekst, e-mail eller adgangskode.


```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <form onsubmit="return false">
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" placeholder="John" autofocus />

      <label for="email">Email:</label>
      <input
        type="email"
        id="email"
        name="email"
        placeholder="example@gmail.com"
        required
      />

      <label for="password">Password:</label>
      <input type="password" id="password" name="password" required />

      <button type="submit">Submit</button>
    </form>
  </body>
</html>
```

Løsning

Lær det grundlæggende i HTML (HyperText Markup Language), fundamentet for webudvikling. Dette begynder-venlige kursus dækker tags, attributter, elementer og strukturering af websider. Få praktiske færdigheder i at skabe overskrifter, afsnit, lister, billeder, links, formularer og tabeller. Udforsk bedste praksis, optimering og webtilgængelighed. Start din webudviklingsrejse med HTML.

Udforsk alsidigheden af HTML-formularer. Lær at designe intuitive og brugervenlige formularer ved at udnytte nøglekoncepter og teknikker. Opdag, hvordan formularer muliggør brugerinteraktion og dataindsendelse på hjemmesider.

Udfordring: Opret formular med inputfelter og etiketter

Mål

Opgave