Formulare sind das Rückgrat der Benutzerinteraktion auf Webseiten. Sie ermöglichen es Benutzern, Informationen zu teilen, mit Inhalten zu interagieren und wesentliche Aktionen wie Käufe oder Suchanfragen durchzuführen, wodurch statische Websites in dynamische Erlebnisse verwandelt werden.

Dieser Kurs konzentriert sich auf das Formular-Markup. Am Ende werden Sie in der Lage sein, funktionale Formulare zu erstellen, die die Benutzerinteraktion verbessern.

Hier ist ein schnelles Beispiel für ein einfaches Formular in Aktion:

<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&amp;family=Montserrat:wght@400;500;600;700&amp;family=Play:wght@400;700&amp;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&amp;family=Ubuntu+Mono&amp;family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&amp;family=Inter:wght@400;500;600;700&amp;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">Primary Contact</h3>
        <label class="label1" for="name">First Name</label>
        <input class="input1" type="text" />
        <label class="label1" for="sirname">Last Name</label>
        <input class="input1" type="text" id="sirname" />
        <label class="label1" for="phone">Phone Number</label>
        <input class="input1" type="tel" id="phone" />
        <label class="label1" for="mail">Email</label>
        <input class="input1" type="email" id="mail" />
        <input class="input1" type="submit" value="Submit" />
      </form>
    </div>
  </body>
</html>


Solche Formulare ermöglichen es Benutzern, sich mit Ihrer Website zu verbinden und zu interagieren. Lassen Sie uns in funktionale Formulare eintauchen!

> Hinweis
>
> Dieser Kurs konzentriert sich auf die Erstellung von Markup und die Formatierung von Formularelementen. Am Ende werden Sie wissen, wie Sie Benutzerinteraktion und -engagement ermöglichen können.
>
> Die Verarbeitung der über Formulare übermittelten Daten - wie das Speichern in einer Datenbank oder die Verwendung von serverseitigen Sprachen wie JavaScript (Node.js), Python, PHP oder Go - wird in diesem Kurs jedoch nicht behandelt.

Lernen Sie die Grundlagen von HTML (HyperText Markup Language), dem Fundament der Webentwicklung. Dieser anfängerfreundliche Kurs behandelt Tags, Attribute, Elemente und das Strukturieren von Webseiten. Erwerben Sie praktische Fähigkeiten im Erstellen von Überschriften, Absätzen, Listen, Bildern, Links, Formularen und Tabellen. Entdecken Sie Best Practices, Optimierung und Webzugänglichkeit. Beginnen Sie Ihre Reise in die Webentwicklung mit HTML.

Erkunden Sie die inneren Abläufe des Webs. Lernen Sie, wie Daten über Netzwerke reisen, entdecken Sie die Rolle von Protokollen und entschlüsseln Sie die Geheimnisse von IP-Adressen und Domainnamen. Gewinnen Sie ein umfassendes Verständnis dafür, wie Webbrowser und Server kommunizieren, um Webinhalte bereitzustellen.

Entdecken Sie die Kraft der Tags, um Inhalte zu strukturieren, von Überschriften und Absätzen bis hin zu Listen und Tabellen. Lernen Sie, wie Sie die Elemente mit Attributen verbessern können.

Der Kern der HTML-Dokumentenstruktur. Lernen Sie die Komponenten eines HTML-Dokuments kennen, einschließlich der doctype-Deklaration, des Kopfes und des Körpers. Verstehen Sie den Zweck jedes Elements und wie sie zur Gesamtstruktur einer Webseite beitragen.

Gestalten Sie eine Webseite ansprechender mit Hilfe von Medien wie Bildern, Audio und Video. Arbeiten Sie mit strukturierten tabellarischen Daten in Form von Tabellen.

Erkunden Sie die Vielseitigkeit von HTML-Formularen. Lernen Sie, intuitive und benutzerfreundliche Formulare zu entwerfen, indem Sie wichtige Konzepte und Techniken nutzen. Entdecken Sie, wie Formulare die Benutzerinteraktion und Datenübermittlung auf Websites ermöglichen.

Ultimatives HTML

Einführung in Formulare