## Mål
Förbättra webbplatsens användarupplevelse genom att skapa ett interaktivt formulär som kräver inmatning av namn, e-postadress och lösenord, komplett med tillhörande etiketter.

## Uppgift
Lägg till ett enkelt, användarvänligt formulär på din sida. Följ dessa krav:
1. Namnfält
   - Använd ett textfält.
   - Ange platshållaren till `John`.
   - Gör fältet fokuserat som standard (autofocus).
2. E-postfält
   - Använd ett e-postfält.
   - Ange platshållaren till `example@gmail.com`.
   - Gör fältet obligatoriskt.
3. Lösenordsfält
   - Använd ett lösenordsfält.
   - Gör detta fält obligatoriskt.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDwhLS0gQ2hhbmdlIHRoZSBjb2RlIGJlbG93IC0tPgogICAgPGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgICAgIDxsYWJlbCBmb3I9Im5hbWUiPk5hbWU6PC9sYWJlbD4KICAgICAgPGlucHV0IHR5cGU9Il9fXyIgaWQ9Im5hbWUiIG5hbWU9Im5hbWUiIHBsYWNlaG9sZGVyPSJfX18iIF9fXyAvPgoKICAgICAgPGxhYmVsIGZvcj0iX19fIj5FbWFpbDo8L2xhYmVsPgogICAgICA8aW5wdXQgdHlwZT0iX19fIiBpZD0iZW1haWwiIG5hbWU9ImVtYWlsIiBwbGFjZWhvbGRlcj0iX19fIiBfX18gLz4KCiAgICAgIDxsYWJlbCBfX189Il9fXyI+UGFzc3dvcmQ6PC9sYWJlbD4KICAgICAgPGlucHV0IHR5cGU9Il9fXyIgX19fPSJfX18iIG5hbWU9InBhc3N3b3JkIiBfX18gLz4KCiAgICAgIDxidXR0b24gdHlwZT0ic3VibWl0Ij5TdWJtaXQ8L2J1dHRvbj4KICAgIDwvZm9ybT4KICA8L2JvZHk+CjwvaHRtbD4=

KiB7CiAgYm94LXNpemluZzogYm9yZGVyLWJveDsKfQoKYm9keSB7CiAgZm9udC1mYW1pbHk6ICJDb21pYyBTYW5zIE1TIiwgY3Vyc2l2ZSwgc2Fucy1zZXJpZjsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmNlMzhhOwogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKCiAgbWFyZ2luOiAwOwogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7Cn0KCmZvcm0gewogIG1hcmdpbi10b3A6IDMwcHg7CiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZjsKICBwYWRkaW5nOiAzMHB4OwogIGJvcmRlci1yYWRpdXM6IDE1cHg7CiAgYm94LXNoYWRvdzogMCAxMHB4IDIwcHggcmdiYSgwLCAwLCAwLCAwLjEpOwogIHdpZHRoOiAzNTBweDsKICB0ZXh0LWFsaWduOiBjZW50ZXI7Cn0KCmgxIHsKICBjb2xvcjogI2U3MWQzNjsKICBtYXJnaW4tYm90dG9tOiAyMHB4OwogIGZvbnQtc2l6ZTogMjhweDsKfQoKbGFiZWwgewogIGRpc3BsYXk6IGJsb2NrOwogIGZvbnQtd2VpZ2h0OiBib2xkOwogIGNvbG9yOiAjZjljNzRmOwogIG1hcmdpbi1ib3R0b206IDEwcHg7CiAgZm9udC1zaXplOiAxOHB4OwogIHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7Cn0KCmlucHV0W3R5cGU9InRleHQiXSwKaW5wdXRbdHlwZT0iZW1haWwiXSwKaW5wdXRbdHlwZT0icGFzc3dvcmQiXSB7CiAgd2lkdGg6IDEwMCU7CiAgcGFkZGluZzogMTJweDsKICBtYXJnaW4tYm90dG9tOiAxNXB4OwogIGJvcmRlcjogMnB4IHNvbGlkICNmOWM3NGY7CiAgYm9yZGVyLXJhZGl1czogNXB4OwogIGZvbnQtc2l6ZTogMTRweDsKICBjb2xvcjogIzQ0NDsKICB0cmFuc2l0aW9uOiBib3JkZXItY29sb3IgMC4zcyBlYXNlLWluLW91dDsKfQoKaW5wdXRbdHlwZT0idGV4dCJdOmZvY3VzLAppbnB1dFt0eXBlPSJlbWFpbCJdOmZvY3VzLAppbnB1dFt0eXBlPSJwYXNzd29yZCJdOmZvY3VzIHsKICBib3JkZXItY29sb3I6ICNmZjZiNmI7Cn0KCmlucHV0OjpwbGFjZWhvbGRlciB7CiAgY29sb3I6ICM4ODg7CiAgZm9udC1zdHlsZTogaXRhbGljOwp9CgpidXR0b24gewogIGJhY2tncm91bmQtY29sb3I6ICNlNzFkMzY7CiAgY29sb3I6ICNmZmY7CiAgYm9yZGVyOiBub25lOwogIGJvcmRlci1yYWRpdXM6IDVweDsKICBwYWRkaW5nOiAxMnB4IDI0cHg7CiAgY3Vyc29yOiBwb2ludGVyOwogIGZvbnQtc2l6ZTogMTZweDsKICB0cmFuc2l0aW9uOiBiYWNrZ3JvdW5kLWNvbG9yIDAuM3MgZWFzZS1pbi1vdXQ7Cn0KCmJ1dHRvbjpob3ZlciB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmNmI2YjsKfQ==

1. `autofocus`: fokuserar automatiskt på inmatningsfältet när sidan laddas;
2. `required`: markerar inmatningsfältet som obligatoriskt, vilket förhindrar formulärinlämning om det lämnas tomt;
3. `placeholder`: visar tips- eller exempeltext för inmatningsfältet;
4. `for` och `id`: kopplar en etikett till ett inmatningsfält för förbättrad tillgänglighet;
5. `type`: anger vilken typ av data som förväntas i inmatningsfältet, såsom text, e-post eller lösenord.


Tips

```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 dig grunderna i HTML (HyperText Markup Language), grunden för webbutveckling. Denna nybörjarvänliga kurs täcker taggar, attribut, element och strukturering av webbsidor. Få praktiska färdigheter i att skapa rubriker, stycken, listor, bilder, länkar, formulär och tabeller. Utforska bästa praxis, optimering och webbtillgänglighet. Börja din webbutvecklingsresa med HTML.

Utforska webben inre funktioner. Lär dig hur data färdas över nätverk, upptäck protokollens roll och lös mysterierna med IP-adresser och domännamn. Få en övergripande förståelse för hur webbläsare och servrar kommunicerar för att leverera webb-innehåll.

Upptäck kraften i taggar för att strukturera innehåll, från rubriker och stycken till listor och tabeller. Lär dig hur du förbättrar elementen med attribut.

Kärnan i HTML-dokumentstrukturen. Lär dig komponenterna i ett HTML-dokument, inklusive doctype-deklarationen, head och body. Förstå syftet med varje element och hur de bidrar till den övergripande strukturen på en webbsida.

Gör en webbsida mer tilltalande med hjälp av media som bilder, ljud och video. Arbeta med strukturerad tabulär data i form av tabeller.

Utforska mångsidigheten hos HTML-formulär. Lär dig att designa intuitiva och användarvänliga formulär genom att utnyttja viktiga koncept och tekniker. Upptäck hur formulär möjliggör användarinteraktion och dataöverföring på webbplatser.

Challenge: Skapa Formulär med Inmatningsfält och Etiketter

Mål

Uppgift