Testen Sie Ihre Fähigkeiten: Input-Typen

Das Ziel dieses Fähigkeitstests ist es, zu beurteilen, ob Sie unseren Artikel Die HTML5-Input-Typen verstanden haben.

Hinweis: Sie können die 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 sich in einem unserer Kommunikationskanäle an uns wenden.

HTML-Steuerelemente 1

Lassen Sie uns zuerst einige Input-Typen erkunden. Erstellen Sie geeignete Eingaben, damit ein Benutzer seine Daten aktualisieren kann für:

  1. E-Mail
  2. Webseite
  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 sollen Sie ein Schieberegler-Steuerelement implementieren, mit dem der Benutzer die maximale Anzahl von Personen auswählen kann, die er zu seiner Party einladen möchte.

  1. Implementieren Sie ein einfaches Schieberegler-Steuerelement, das zusammen mit dem bereitgestellten Label verwendet wird.
  2. Geben Sie ihm einen Mindestwert von 1, einen Höchstwert von 30, einen Anfangswert von 10 und die Element id von max-invite.
  3. Erstellen Sie ein entsprechendes Ausgabe-Element, 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 ausführen, wird der Wert des Ausgabeelements automatisch aktualisiert, 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.