Summary  
This chapter covers creating and structuring HTML form elements, including labels and various input controls (text, tel, email) along with a submit button.

General domain of usage  
Front-end web development

Skjemaer er ryggraden i brukerinteraksjon på nettsider. De gjør det mulig for brukere å dele informasjon, engasjere seg med innhold og utføre viktige handlinger, som kjøp eller søk, og forvandler statiske nettsider til dynamiske opplevelser.

Dette kurset vil fokusere på skjema-markup. Etter endt kurs vil du trygt kunne lage funksjonelle skjemaer som forbedrer brukerinteraksjonen.

Her er et raskt eksempel på et enkelt skjema i bruk:

<html lang="en">
  <head>
    <style>
      .border-container {
        border-radius: 10px;
        font-family: Arial, sans-serif;
        line-height: 1.6;
        background-color: #f5f5f5;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
      }

      .form1 {
        width: 400px;
        background-color: #fff;
        border-radius: 10px;
        padding: 30px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      }

      .title1 {
        font-size: 24px;
        color: #333;
        margin-bottom: 20px;
        border-bottom: 2px solid #ff8a00;
        padding-bottom: 5px;
      }

      .label1 {
        font-size: 16px;
        color: #666;
        display: block;
        margin-top: 20px;
      }

      .input1 {
        width: 340px;
        padding: 10px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 4px;
      }

      .input1:focus,
      .input1:hover {
        outline: none;
        border-color: #ff8a00;
        box-shadow: 0 0 5px rgba(255, 138, 0, 0.5);
      }

      .input1[type="submit"] {
        background-color: #ff8a00;
        color: #fff;
        border: none;
        cursor: pointer;
        padding: 12px 20px;
        font-size: 16px;
        border-radius: 4px;
        transition: background-color 0.3s ease;
        width: 100px;
        display: block;
        margin: 30px auto 0 auto;
      }

      .input1[type="submit"]:hover {
        background-color: #d27204;
      }
    </style>
    <link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&family=Montserrat:wght@400;500;600;700&family=Play:wght@400;700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Ubuntu+Mono&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
      * {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 18px;
        font-weight: 400;
        box-sizing: border-box;
        vertical-align: baseline;
      }
      body {
        font-family: "Hind Siliguri", sans-serif;
        line-height: 1;
        height: 100%;
        overflow: hidden;
      }
      img {
        display: block;
        width: 100%;
        max-width: 550px;
        margin: 0 auto;
      }
      a {
        text-decoration: none;
      }
    </style>
  </head>
  <body class="body1" style="padding: 1.5px 0">
    <div class="border-container">
      <form class="form1" onsubmit="return false">
        <h3 class="title1">Primær kontakt</h3>
        <label class="label1" for="name">Fornavn</label>
        <input class="input1" type="text">
        <label class="label1" for="sirname">Etternavn</label>
        <input class="input1" type="text" id="sirname">
        <label class="label1" for="phone">Telefonnummer</label>
        <input class="input1" type="tel" id="phone">
        <label class="label1" for="mail">E-post</label>
        <input class="input1" type="email" id="mail">
        <input class="input1" type="submit" value="Submit">
      </form>
    </div>
  </body>
</html>


Skjemaer som dette gir brukere mulighet til å koble seg til og samhandle med nettstedet ditt. La oss utforske funksjonelle skjemaer!

Dette kurset fokuserer på opprettelse av markup og formatering av skjemafelt. Etter endt kurs vil du vite hvordan du muliggjør brukerinteraksjon og engasjement.

Behandling av data sendt inn via skjemaer – som å lagre det i en database eller bruke server-side språk som JavaScript (Node.js), Python, PHP eller Go – dekkes derimot ikke i dette kurset.

Merk

Hva er hovedformålet med skjemaer på nettsider?

Lær det grunnleggende i HTML (HyperText Markup Language), grunnlaget for webutvikling. Dette nybegynnervennlige kurset dekker tags, attributter, elementer og strukturering av nettsider. Få praktiske ferdigheter i å lage overskrifter, avsnitt, lister, bilder, lenker, skjemaer og tabeller. Utforsk beste praksis, optimalisering og webtilgjengelighet. Start din webutviklingsreise med HTML.

Utforsk hvordan nettet fungerer. Lær hvordan data reiser over nettverk, oppdag rollen til protokoller, og løs mysteriene med IP-adresser og domenenavn. Få en overordnet forståelse av hvordan nettlesere og servere kommuniserer for å levere nettinnhold.

Oppdag kraften i koder for å strukturere innhold, fra overskrifter og avsnitt til lister og tabeller. Lær hvordan du kan forbedre elementene med attributter.

Kjernen i HTML-dokumentstrukturen. Lær komponentene i et HTML-dokument, inkludert doctype-erklæringen, head og body. Forstå formålet med hvert element og hvordan de bidrar til den overordnede strukturen på en nettside.

Gjør en nettside mer tiltalende ved hjelp av media som bilder, lyd og video. Arbeid med strukturert tabulær data i form av tabeller.

Utforsk allsidigheten til HTML-skjemaer. Lær å designe intuitive og brukervennlige skjemaer ved å utnytte nøkkelkonsepter og teknikker. Oppdag hvordan skjemaer muliggjør brukerinteraksjon og datasending på nettsteder.

Introduksjon til HTML-skjemaer

Introduksjon til HTML-skjemaer