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

Formulieren vormen de ruggengraat van gebruikersinteractie op webpagina's. Ze stellen gebruikers in staat om informatie te delen, met content te communiceren en essentiële handelingen uit te voeren, zoals aankopen of zoekopdrachten, waardoor statische websites veranderen in dynamische ervaringen.

Deze cursus richt zich op de opmaak van formulieren. Aan het einde kun je vol vertrouwen functionele formulieren maken die de gebruikersinteractie verbeteren.

Hier is een snel voorbeeld van een eenvoudig formulier in actie:

<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">Primair contactpersoon</h3>
        <label class="label1" for="name">Voornaam</label>
        <input class="input1" type="text">
        <label class="label1" for="sirname">Achternaam</label>
        <input class="input1" type="text" id="sirname">
        <label class="label1" for="phone">Telefoonnummer</label>
        <input class="input1" type="tel" id="phone">
        <label class="label1" for="mail">E-mail</label>
        <input class="input1" type="email" id="mail">
        <input class="input1" type="submit" value="Submit">
      </form>
    </div>
  </body>
</html>


Formulieren zoals deze stellen gebruikers in staat om verbinding te maken en te communiceren met je website. Laten we ons verdiepen in functionele formulieren!

Deze cursus richt zich op het maken van opmaak en het formatteren van formelementen. Aan het einde weet je hoe je gebruikersinteractie en betrokkenheid mogelijk maakt.

Het verwerken van de via formulieren verzonden gegevens - zoals het opslaan ervan in een database of het gebruik van server-side talen zoals JavaScript (Node.js), Python, PHP of Go - wordt echter niet behandeld in deze cursus.

Opmerking

Wat is het belangrijkste doel van formulieren op webpagina's?

Leer de basisprincipes van HTML (HyperText Markup Language), de basis van webontwikkeling. Deze cursus voor beginners behandelt tags, attributen, elementen en het structureren van webpagina's. Verwerf praktische vaardigheden in het maken van koppen, alinea's, lijsten, afbeeldingen, links, formulieren en tabellen. Ontdek best practices, optimalisatie en webtoegankelijkheid. Begin je webontwikkelingsreis met HTML.

Verken de werking van het web. Leer hoe gegevens over netwerken reizen, ontdek de rol van protocollen en ontrafel de mysteries van IP-adressen en domeinnamen. Krijg een hoogwaardig begrip van hoe webbrowsers en servers communiceren om webinhoud te leveren.

Ontdek de kracht van tags om inhoud te structureren, van koppen en alinea's tot lijsten en tabellen. Leer hoe je de elementen kunt verbeteren met attributen.

De kern van de HTML-documentstructuur. Leer de componenten van een HTML-document, inclusief de doctype-verklaring, head en body. Begrijp het doel van elk element en hoe ze bijdragen aan de algehele structuur van een webpagina.

Maak een webpagina aantrekkelijker met behulp van media zoals afbeeldingen, audio en video. Werk met gestructureerde tabelgegevens in de vorm van tabellen.

Ontdek de veelzijdigheid van HTML-formulieren. Leer intuïtieve en gebruiksvriendelijke formulieren ontwerpen door gebruik te maken van belangrijke concepten en technieken. Ontdek hoe formulieren gebruikersinteractie en gegevensverzending op websites mogelijk maken.

Introductie tot HTML-Formulieren

Introductie tot HTML-Formulieren