1. Webentwicklung lernen
  2. Kernlernmodule
  3. HTML
  4. Herausforderung: Feedback-Formular

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

Herausforderung: Strukturierung eines Feedback-Formulars

In dieser Herausforderung werden wir Ihre Fähigkeit testen, ein Formular zu erstellen und zu strukturieren sowie einige andere HTML-Funktionen hinzuzufügen.

Ausgangspunkt

Um diese Herausforderung zu bewältigen, erwarten wir, dass Sie ein grundlegendes Website-Projekt erstellen, entweder in einem Ordner auf der Festplatte Ihres Computers oder mit einem Online-Editor wie CodePen oder JSFiddle. Viel des benötigten Codes wird auf dieser Seite bereits zur Verfügung gestellt.

  1. Erstellen Sie einen neuen Ordner an einem geeigneten Ort auf Ihrem Computer mit dem Namen forms-challenge (oder öffnen Sie einen Online-Editor und führen Sie die erforderlichen Schritte aus, um ein neues Projekt zu erstellen).

  2. Speichern Sie die folgende HTML-Auflistung in einer Datei in Ihrem Ordner mit dem Namen index.html (oder fügen Sie sie in das HTML-Feld Ihres Online-Editors ein).

    html
    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Forms challenge</title>
    <link href="style.css" rel="stylesheet" />
    <script defer src="index.js"></script>
  </head>
  <body>
    We want your feedback!

    We're very excited that you visited the little house in the woods,
    and we want to hear what you thought of it! Please fill in the below
    sections. You don't need to provide your name or contact details, but
    if you do, we'll enter you into a prize draw where you'll have a chance
    to win prizes.

    --

    Facilities

    Was the porridge
    Too hot?
    Too cold?
    Just right?

    Were the beds
    Too hard?
    Too soft?
    Just right?

    Describe the chairs (select all you agree with)
    Comfy
    Luxurious
    Hi-tech
    Pretty
    Majestic

    --

    About your hosts

    Who's your favorite bear?
    Papa bear
    Mama bear
    Junior
    Dozer

    Which greeting did you prefer?
    Wave
    Friendly greeting
    Growl
    Claw marks in the door

    --

    Any other feedback?

    Give us your comments

    --

    Your details

    Name
    Email
    Phone

    --

    Submit

    --
  </body>
</html>

  3. Speichern Sie die folgende CSS-Auflistung in einer Datei in Ihrem Ordner mit dem Namen style.css (oder fügen Sie sie in das CSS-Feld Ihres Online-Editors ein).

    css
    /* Basic font styles */

body {
  background-color: white;
  color: #333333;
  font: 1em / 1.4 system-ui;
  padding: 1em;
  width: 800px;
  margin: 0 auto;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.6rem;
}

h1,
h2 {
  margin: 0 0 20px;
  color: purple;
}

* {
  box-sizing: border-box;
}

p {
  color: gray;
  margin: 0.5em 0;
}

/* Form structure */

fieldset {
  border: 0;
  padding: 0;
}

legend {
  padding-bottom: 10px;
  font-weight: bold;
}

fieldset,
.separator {
  margin-bottom: 20px;
}

.form-section {
  margin-bottom: 20px;
  padding: 20px;
}

img {
  max-width: 100%;
  height: 50px;
  margin: 20px 0;
}

/* Individual form items */

fieldset input {
  margin: 0 10px 0 0;
}

label {
  margin-right: 40px;
}

textarea {
  margin-top: 10px;
  padding: 5px;
  width: 100%;
  height: 200px;
}

.separator {
  display: flex;
}

.separator label {
  flex: 2;
}

.separator input,
.separator select {
  flex: 3;
  padding: 5px;
}

button {
  padding: 10px 20px;
  border-radius: 10px;
  border: 1px solid grey;
  background-color: #dddddd;
  width: 50%;
  margin: 0 auto;
  display: block;
}

button:hover,
button:focus {
  background-color: #eeeeee;
  cursor: pointer;
}

Projektbeschreibung

Stellen Sie sich vor, Sie waren gerade in einem Hotel namens "Das kleine Haus im Wald" (zumindest dachten Sie, es wäre ein Hotel). Wir möchten, dass Sie uns helfen, ein fiktives Feedback-Formular für das Hotel zu erstellen. Zusätzlich zum Markieren der erforderlichen Funktionen und dem Strukturieren des Formulars möchten wir, dass Sie einige zusätzliche HTML-Funktionen implementieren.

Implementierung von Formularsteuerungen

  1. Im Bereich "Einrichtungen" möchten wir, dass Sie die ersten beiden Zeilen in Sets von Radio-Buttons verwandeln, plus ein Label zur Beschreibung jedes Buttons und eine Legende zur Beschreibung der gesamten Gruppe. Fügen Sie ein Attribut hinzu, um den ersten Radio-Button in jedem Fall standardmäßig auszuwählen.
  2. Im Bereich "Einrichtungen" verwandeln Sie die dritte Zeile in eine Checkbox-Gruppe mit einem Label zur Beschreibung jeder Checkbox und einer Legende zur Beschreibung der gesamten Gruppe.
  3. Im Bereich "Über Ihre Gastgeber" verwandeln Sie beide Zeilen in ein Drop-Down-Menü mit Optionen, mit einem Label zur Beschreibung jedes Menüs.
  4. Im Bereich "Sonstige Anmerkungen?" fügen Sie ein mehrzeiliges Textfeld hinzu und verwandeln Sie die vorhandene Zeile in deren beschreibendes Label.
  5. Im Bereich "Ihre Daten" fügen Sie eine geeignete Art von Texteingabefeld hinzu, um jeden der drei aufgelisteten Werte zu erfassen. Verwandeln Sie die vorhandenen Zeilen in deren Labels.
  6. Verwandeln Sie "Senden" in eine Schaltfläche zum Absenden des Formulars.

Strukturierung des Formulars

  1. Umwickeln Sie das Formular mit einem geeigneten Wrapper-Element, um das Ganze als Formular zu kennzeichnen.
  2. Fügen Sie sich wiederholende Strukturierungselemente im Formular hinzu, um jeden Formularbereich einzuschließen. Geben Sie jedem Formularbereichselement eine class von form-section. Um es einfacher zu machen, ist jeder Formularbereich von zwei Sätzen von Doppelstrichen (--) umgeben. Sie können die Doppelstriche entfernen, wenn Sie Ihre Strukturierungselemente hinzugefügt haben.
  3. Sie müssen zusätzliche Strukturierungselemente um einige der Steuerungs-/Label-Paare einfügen, damit sie auf eigenen separaten Zeilen sitzen. Fügen Sie diese jetzt hinzu und geben Sie jedem einen class von separator.
  4. Fügen Sie ein Zeilenumbruch-Element zwischen dem mehrzeiligen Textfeld und seinem Label hinzu, um die beiden in separaten Zeilen anzuordnen.

Zusätzliche HTML-Funktionen

  1. Es gibt mehrere Überschriften im Text, die mit geeigneten Elementen markiert werden müssen:
    1. Die oberste Überschrift: "Wir möchten Ihr Feedback!".
    2. Zweite Ebene Überschriften: "Einrichtungen", "Über Ihre Gastgeber", "Sonstige Anmerkungen?", und "Ihre Daten".
  2. Der einleitende Absatz unter der obersten Überschrift muss angemessen markiert werden.
  3. Auch im einleitenden Absatz verwandeln Sie den Text "das kleine Haus im Wald" und "Preisausschreiben" in Links. Wir haben noch keine Seiten zum Verlinken, daher setzen Sie vorerst die Ziel-URL als # als Platzhalter.
  4. Wir möchten, dass Sie direkt unter dem einleitenden Absatz ein breites, flaches Bild als Dekoration platzieren. Der Bildpfad ist https://mdn.github.io/shared-assets/images/examples/learn/woodland-strip.jpg, und wir möchten, dass Sie den Alternativtext dafür auf einen leeren Wert setzen, da es nur dekorativ ist.
  5. Im Anschluss an den vorherigen Punkt, als Stretch-Ziel, recherchieren Sie eine bessere Methode, um das dekorative Bild auf der Seite einzufügen, und versuchen Sie dies (dies beinhaltet eine andere Technologie als HTML, die wir in diesem Modul noch nicht behandelt haben).

Hinweise und Tipps

  • Verwenden Sie den W3C HTML-Validator, um unbeabsichtigte Fehler in Ihrem HTML zu erkennen, damit Sie sie beheben können.
  • Wenn Sie feststecken und nicht visualisieren können, welche Elemente wo platziert werden sollen, erstellen Sie ein einfaches Blockdiagramm des Seitenlayouts und schreiben Sie darauf, welche Elemente jeden Block umwickeln sollten. Dies ist äußerst hilfreich.

Beispiel

Der folgende Screenshot zeigt ein Beispiel, wie das Formular nach der Markierung aussehen könnte. Wenn Sie nicht wissen, wie Sie einige davon erreichen, sehen Sie sich die Lösung unter dem Live-Beispiel an.

Das fertige Beispiel für die Herausforderung; ein Feedback-Formular zeigt zwei Sätze von Radio-Buttons, eine Gruppe von Checkboxes und zwei Drop-Down-Menüs

Klicken Sie hier, um die Lösung anzuzeigen

Ihr fertiges HTML sollte so aussehen:

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Forms challenge</title>
    <link href="style.css" rel="stylesheet" />
    <script defer src="index.js"></script>
  </head>
  <body>
    <h1>We want your feedback!</h1>

    <p>
      We're very excited that you visited the
      <a href="#">little house in the woods</a>, and we want to hear what you
      thought of it! Please fill in the below sections. You don't need to
      provide your name or contact details, but if you do, we'll enter you into
      a <a href="#">prize draw</a> where you'll have a chance to win prizes.
    </p>

    <img
      src="https://mdn.github.io/shared-assets/images/examples/learn/woodland-strip.jpg"
      alt="" />

    <form>
      <div class="form-section">
        <h2>Facilities</h2>

        <fieldset>
          <legend>Was the porridge</legend>
          <input
            type="radio"
            id="porridge-1"
            name="porridge"
            value="hot"
            checked /><label for="porridge-1">Too hot?</label>
          <input
            type="radio"
            id="porridge-2"
            name="porridge"
            value="cold" /><label for="porridge-2">Too cold?</label>
          <input
            type="radio"
            id="porridge-3"
            name="porridge"
            value="right" /><label for="porridge-3">Just right?</label>
        </fieldset>

        <fieldset>
          <legend>Were the beds</legend>
          <input
            type="radio"
            id="beds-1"
            name="beds"
            value="hard"
            checked /><label for="beds-1">Too hard?</label>
          <input type="radio" id="beds-2" name="beds" value="soft" /><label
            for="beds-2"
            >Too soft?</label
          >
          <input type="radio" id="beds-3" name="beds" value="right" /><label
            for="beds-3"
            >Just right?</label
          >
        </fieldset>

        <fieldset>
          <legend>Describe the chairs (select all you agree with)</legend>
          <input type="checkbox" id="comfy" name="comfy" /><label for="comfy"
            >Comfy</label
          >
          <input type="checkbox" id="luxurious" name="luxurious" /><label
            for="luxurious"
            >Luxurious</label
          >
          <input type="checkbox" id="hi-tech" name="hi-tech" /><label
            for="hi-tech"
            >Hi-tech</label
          >
          <input type="checkbox" id="pretty" name="pretty" /><label for="pretty"
            >Pretty</label
          >
          <input type="checkbox" id="majestic" name="majestic" /><label
            for="majestic"
            >Majestic</label
          >
        </fieldset>
      </div>

      <div class="form-section">
        <h2>About your hosts</h2>

        <div class="separator">
          <label for="favorite">Who's your favorite bear?</label>
          <select name="favorite" id="favorite">
            <option value="papa">Papa bear</option>
            <option value="mama">Mama bear</option>
            <option value="junior">Junior</option>
            <option value="dozer">Dozer</option>
          </select>
        </div>

        <div class="separator">
          <label for="greeting">Which greeting did you prefer?</label>
          <select name="greeting" id="greeting">
            <option value="wave">Wave</option>
            <option value="friendly">Friendly greeting</option>
            <option value="growl">Growl</option>
            <option value="claw">Claw marks in the door</option>
          </select>
        </div>
      </div>

      <div class="form-section">
        <h2>Any other feedback?</h2>

        <label for="comments">Give us your comments</label>
        <br />
        <textarea id="comments" name="comments"></textarea>
      </div>

      <div class="form-section">
        <h2>Your details</h2>

        <div class="separator">
          <label for="name">Name</label>
          <input type="text" id="name" name="name" />
        </div>

        <div class="separator">
          <label for="email">Email</label>
          <input type="email" id="email" name="email" />
        </div>

        <div class="separator">
          <label for="phone">Phone</label>
          <input type="tel" id="phone" name="phone" />
        </div>
      </div>

      <div class="form-section">
        <button>Submit</button>
      </div>
    </form>
  </body>
</html>

Für das Stretch-Ziel ist es wohl eine bessere Methode, dekorative Bilder auf einer Webseite hinzuzufügen, CSS-Hintergrundbilder zu verwenden. Löschen Sie das <img>-Element und verwenden Sie die CSS background-Eigenschaft, um das Bild stattdessen auf der Seite zu platzieren. Ein gutes Element, um das Hintergrundbild darauf zu platzieren, wäre das <form>-Element, und Sie müssen dem Browser mitteilen, das Bild nicht zu wiederholen. Sie müssen auch etwas margin und padding bereitstellen, um das Hintergrundbild so zu platzieren, dass es nicht mit dem Text überlappt.

css
form {
  background: url("https://mdn.github.io/shared-assets/images/examples/learn/woodland-strip.jpg")
    no-repeat;
  margin-top: 20px;
  padding-top: 50px;
}

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.
Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden