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 im interaktiven Editor auf dieser Seite oder in einem Online-Editor wie CodePen, JSFiddle oder Glitch ausprobieren.

Sollten Sie auf Schwierigkeiten stoßen, können Sie sich über einen unserer Kommunikationskanäle mit uns in Verbindung setzen.

HTML-Steuerelemente 1

Zunächst wollen wir einige Eingabetypen erkunden. Erstellen Sie geeignete Eingaben für Benutzer, um ihre Informationen zu aktualisieren für:

  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 in einem Online-Editor zu arbeiten.

HTML-Steuerelemente 2

Als Nächstes möchten wir, dass Sie ein Schieberegler-Steuerelement implementieren, damit der Benutzer die maximale Anzahl von Personen auswählen kann, die zu seiner Party eingeladen werden sollen.

  1. Implementieren Sie ein grundlegendes Schieberegler-Steuerelement zusammen mit dem bereitgestellten Label.
  2. Geben Sie ihm einen minimalen Wert von 1, einen maximalen Wert von 30, einen Anfangswert von 10 und die Element-id von max-invite.
  3. Erstellen Sie ein entsprechendes Ausgabeelement, um den aktuellen Wert des Schiebereglers anzuzeigen. Geben Sie ihm eine Klasse von invite-output und verknüpfen Sie es semantisch mit der Eingabe. Wenn Sie dies korrekt machen, wird der JavaScript-Code auf der Seite den Ausgabewert automatisch 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 in einem Online-Editor zu arbeiten.