Erstellen einer Dropdownliste für HTML5- und CSS3-basierte Webseiten

Erstellen einer Dropdownliste für Ihr HTML5- und CSS3-basiertes Web Pages - Dummies

Die Dropdown-Liste ist ein beliebtes Auswahlwerkzeug für HTML5- und CSS3-Webentwickler. Die Dropdown-Liste hat einige sehr nützliche Elemente, die es zu einem riesigen Web-Publishing-Publikumsliebling machen:

  • Es spart Platz auf dem Bildschirm. Es wird nur die aktuelle Auswahl angezeigt. Wenn der Benutzer auf die Liste klickt, wird eine Reihe von Auswahlmöglichkeiten angezeigt, die nach der Auswahl wieder ausgeblendet werden.

  • Es begrenzt die Eingabe. Die einzigen Dinge, die der Benutzer auswählen kann, sind Dinge, die Sie in die Liste aufgenommen haben. Dies erleichtert die Handhabung der potenziellen Eingaben, da Sie sich keine Gedanken über Tippfehler machen müssen.

  • Der Wert kann sich von dem unterscheiden, was der Benutzer sieht. Dies scheint ein merkwürdiger Vorteil zu sein, aber es erweist sich manchmal als sehr nützlich.

Der Code für diese einfache Dropdown-Liste folgt:

 basicSelect. html 

Was ist deine Lieblingsfarbe? Rot Grün Blau Cyan Magenta Gelb Schwarz Weiß

Das Objekt unterscheidet sich etwas von den anderen Eingabeelementen, wie Sie es gewohnt sind, wie

  • Es ist von einem Apair umgeben. Diese Tags zeigen die gesamte Liste an.

  • Das Objekt hat ein Attribut. Obwohl das Objekt viele andere Tags enthält, hat normalerweise nur das Objekt selbst ein Attribut.

  • Es enthält eine Reihe von Paaren. Jede einzelne Auswahl ist in einem Set untergebracht.

  • Eachtag hat einen Wert zugeordnet. Der Wert wird von Code verwendet. Der Wert ist nicht unbedingt das, was der Benutzer sieht.

  • Der Inhalt zwischen ist für den Benutzer sichtbar. Der Inhalt ist das, was der Benutzer tatsächlich sieht.

Auswahlfelder erfordern kein Dropdown-Verhalten. Wenn Sie möchten, können Sie die Anzahl der Zeilen angeben, die mit dem Attribut angezeigt werden sollen. In diesem Fall ist die Anzahl der Zeilen, die Sie angeben, immer auf dem Bildschirm sichtbar.