Testen Sie Ihre Fähigkeiten: HTML5-Steuerelemente

Ziel dieses Fähigkeitstests ist es zu überprüfen, ob Sie unseren Artikel Die HTML5-Eingabetypen verstanden haben.

Hinweis: Sie können Lösungen in den interaktiven Editoren auf dieser Seite oder in einem Online-Editor wie CodePen, JSFiddle oder Glitch ausprobieren.

Wenn Sie nicht weiterkommen, können Sie uns über einen unserer Kommunikationskanäle erreichen.

HTML-Steuerelemente 1

Zuerst wollen wir einige Eingabetypen erkunden. Erstellen Sie geeignete Eingaben, damit ein Benutzer seine Daten für folgende Punkte aktualisieren kann:

  1. E-Mail
  2. Website
  3. Telefonnummer
  4. Lieblingsfarbe

Versuchen Sie, den Live-Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:

Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder einem Online-Editor zu arbeiten.

HTML-Steuerelemente 2

Als nächstes möchten wir, dass Sie ein Slider-Steuerelement implementieren, mit dem der Benutzer die maximale Anzahl von Personen wählen kann, die er zu seiner Party einladen möchte.

  1. Implementieren Sie ein einfaches Slider-Steuerelement zusammen mit dem bereitgestellten Label.
  2. Geben Sie ihm einen Minimalwert von 1, einen Maximalwert von 30, einen Anfangswert von 10 und eine id des Elements von max-invite.
  3. Erstellen Sie ein entsprechendes Ausgabeelement, um den aktuellen Wert des Sliders anzuzeigen. Geben Sie ihm eine Klasse von invite-output und verknüpfen Sie es semantisch mit der Eingabe. Wenn Sie dies korrekt tun, wird der auf der Seite enthaltene JavaScript automatisch den Ausgabewert aktualisieren, wenn der Schieberegler bewegt wird.

Versuchen Sie, den Live-Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:

Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder einem Online-Editor zu arbeiten.