Dropdown-Ereignisse HTML PHP CSS. Wir erstellen stilvolle Dropdown-Listen. Einfaches HTML- und CSS-Dropdown

Grüße, liebe Leser der Blogseite. Heute möchte ich über so etwas wie HTML-Formulare sprechen. Unabhängig von der Engine Ihrer Website (CMS) werden auf jeden Fall Formulare in der einen oder anderen Form verwendet, die mit den Tags „Form“ und „Input“ sowie den Attributen und Parametern „Button“, „Checked“, „Value“, „Checkbox“, „Radio“, „Checkbox“, „Submit“ erstellt wurden.

Nun, Sie können diesem Element auch Elemente zum Erstellen von Dropdown-Listen und Textfeldern hinzufügen – Auswählen, Option, Textbereich, Beschriftung, Feldsatz, Legende.

Warum werden Formulare benötigt und wie funktionieren sie auf modernen Websites?

Mithilfe dieser Tags wird die gleiche Site-Suchzeichenfolge () erstellt, und eine Suche in Ihrem Projekt ist erforderlich. Daher wird es Sie überhaupt nicht behindern, zu verstehen, wie sie aufgebaut sind und wie sie funktionieren, um erfolgreich an dem Design zu arbeiten, und es wird nicht überflüssig sein, wenn Sie es selbst fördern.

Nachdem wir also die Notwendigkeit begründet haben, diese Elemente zu untersuchen, sollten meines Erachtens keine weiteren Fragen mehr aufkommen. Es ist also an der Zeit, direkt mit der Untersuchung ihrer möglichen Optionen fortzufahren.

Ja, ich möchte Sie auch daran erinnern, dass wir bereits viele Materialien zum Thema Hypertext Markup Language überprüft haben, zum Beispiel drei ) und .

Im Kern bestehen Formulare aus Elementen, für deren Erstellung verschiedene Tags aus Formular-Tags in den Hauptcontainer eingefügt werden – „Checked“, „Value“, „Checkbox“, „Radio“, „Checkbox“, „Submit“ usw. Wir müssen nur den Code an einer geeigneten Stelle platzieren Platzieren Sie es in der Site-Vorlage und geben Sie mithilfe von Tags und deren Attributen an, wie es aussehen soll.

Dies kann ein Textfeld mit einer Schaltfläche zum Senden der eingegebenen Abfrage, Auswahlmöglichkeiten mit Optionsfeldern (bei denen Sie nur eine der bereitgestellten Schaltflächen gedrückt lassen können), mehrere Textfelder mit einer Schaltfläche zum Senden() und vieles mehr sein.

Beispielsweise können Sie im Fall von „Suchen“ mithilfe des Attributs „Wert“ festlegen, was genau auf die Schaltfläche neben dem Feld zur Eingabe einer Abfrage geschrieben werden soll. Die in den Formularen eingegebenen Daten müssen in irgendeiner Weise weiterverarbeitet werden.

Zum Beispiel für den Fall Rückmeldung Nachdem der Benutzer das Feld mit seinem Namen ausgefüllt, seine E-Mail-Adresse und den Text der Nachricht eingegeben und dann auf die Schaltfläche „Senden“ geklickt hat, hat er das Recht zu hoffen, dass die Daten aus dem Formular an E gesendet werden -Mail des Site-Autors. Aber leider ist es nicht möglich, dies mit nur einer Hypertext-Auszeichnungssprache () zu implementieren.

Für diese Zwecke benötigen Sie ein spezielles Prozessorprogramm, das, nachdem der Benutzer auf die Schaltfläche „Senden“ klickt, alle Daten aus den Feedbackfeldern übernimmt und diese per E-Mail an den Eigentümer der Ressource sendet. Sie müssen über das Action-Attribut angeben, welches Programm dies selbst tun soll.

Normalerweise ist das Verarbeitungsprogramm ein eingeschriebenes Skript PHP-Sprache. Daher müssen Sie im Action-Attribut des Form-Tags den Pfad zur Datei dieses Skripts angeben, die sich auf Ihrem Hosting-Server befindet. Lassen Sie mich Ihnen ein Beispiel für das Abonnieren des RSS-Feeds meines Blogs per E-Mail geben:

Es mag zunächst etwas unklar erscheinen, aber ich denke, im Laufe der Geschichte wird alles klarer.

Formular- und Eingabe-Tags zum Erstellen von Schaltflächen, Kontrollkästchen und Optionsfeldern

Jedes Formular muss in öffnende und schließende Tags eingeschlossen sein Bilden. Dies ist eine Art Behälter für ihre Entstehung. Dieses Tag verfügt über eine Reihe erforderlicher und optionaler Attribute:

  1. Name – ein eindeutiger Name, der angegeben werden muss, wenn die HTML-Datei, in der Sie etwas tun, mehrere Webformulare verwendet
  2. Aktion – ein erforderliches Attribut, das den Pfad zum Skript angibt, an das die Daten zur weiteren Verarbeitung übertragen werden
  3. Methode – damit können Sie die Methode der Datenübertragung von diesem Webformular zum Handler-Dateiskript ändern. Wenn Sie es nicht angeben, wird standardmäßig die Get-Methode verwendet, die streng genommen hauptsächlich für Variablen und Kurznachrichten und darüber hinaus gedacht ist offene MethodeÜbermittlung von Daten über die Adressleiste des Browsers. Um Formulardaten an das Handler-Skript zu übertragen, ist es immer noch besser, es zu verwenden POST-Methode, speziell für die private Übertragung von Textnachrichten konzipiert

Schauen wir uns die verbleibenden Tags an, mit denen Sie verschiedene Webformulare erstellen können. Am vielseitigsten ist Eingang. Darin muss das Type-Attribut geschrieben werden, das bestimmt, wie genau das mit diesem Tag erstellte HTML-Formular aussehen wird.

Mithilfe von Eingabe und Typ können Sie die folgenden Elemente erstellen:

  1. einzeilige Textfelder (Type="Text")
  2. Felder zur Eingabe eines Passwortes (Type="Password")
  3. Kontrollkästchen (Type="Checkbox")
  4. Optionsfelder (Type="Radio")
  5. versteckte Felder (Type="Hidden")
  6. normale Schaltflächen (Type="Button")
  7. Schaltflächen zum Senden von Daten an den Handler (Type="Submit")
  8. Schaltflächen zum Aufrufen des Webformulars Originalzustand(Typ="Zurücksetzen")
  9. Felder zum Hochladen von Dateien auf den Server (Type="File)
  10. Schaltflächen mit einem Bild (Type="Image")

Die Eingabe hat kein schließendes Tag. Wie genau ein damit erstelltes Webformular aussehen wird, hängt vollständig von dem im Type-Attribut angegebenen Parameter ab. Wenn Typ nicht angegeben ist, wird standardmäßig ein Textfeld erstellt.

Beispiele für Formulare, die bei der Eingabe mit unterschiedlichen Werten für Typ erstellt wurden

Andere Input-Tag-Attribute und Beispiele für ihre Verwendung

Schauen wir uns an, wofür die anderen Attribute benötigt werden:

  1. Name – Wenn die Daten an das Handler-Programmskript gesendet werden müssen, müssen Sie einen Parameter für das Name-Attribut angeben. Unter diesem Namen erscheinen die vom Formular gesendeten Daten im Informationsverarbeitungsprogramm.
  2. Größe – Hiermit wird die Größe des Felds des zu erstellenden Webformulars festgelegt. Der Wert wird in der Anzahl der Zeichen angegeben, die in dieses Feld passen. Wenn Größe nicht angegeben ist, beträgt die Breite standardmäßig 24 Zeichen
  3. Maxlength – Standardmäßig ist die Anzahl der Zeichen, die in ein HTML-Formular eingegeben werden können, nicht begrenzt, aber mit Maxlength können Sie diese Beschränkung festlegen. Sie können nicht mehr Zeichen eingeben, als im Feld angegeben sind.
  4. Wert – Sie können damit angeben, was genau standardmäßig in das Feld oder auf die Schaltfläche zum Senden von Daten geschrieben wird
  5. „Checked“ ist ein Flag-Attribut, das in die Eingabe für Optionsfelder oder Kontrollkästchen eingefügt werden kann. In diesem Fall ist dieses Optionsfeld oder Kontrollkästchen aktiv, wenn die Seite mit dem Webformular geladen wird (sie sind bereits mit einem Häkchen versehen).

Schauen wir uns nun alles an Beispiele für Formulare mit Eingabe. Das Erscheinungsbild des Textfelds ähnelt dem Erscheinungsbild des Passworteingabefelds. Betrachten wir daher nur die Möglichkeit, einen Text zu erstellen, um beispielsweise eine E-Mail-Adresse einzugeben:

Schauen wir uns nun die Erstellung eines Webformulars mit Optionsfeldern (Radio) an:

Beachten Sie, dass dieses Formular das Input-Tag zweimal verwendet, einmal, um jedes der beiden Optionsfelder zu erstellen. Darüber hinaus enthält jedes von ihnen das Name-Attribut mit demselben Wert (resultat) und der Wertwert ist unterschiedlich (YES und NO).

Dies bedeutet, dass bei der Verarbeitung, wenn einer der Schalter ausgewählt wird, eine Variable gesendet wird, deren Name in Name geschrieben wird, der Wert dieser Variablen jedoch davon abhängt, welcher Schalter ausgewählt wurde.

Schauen wir uns ein Beispiel für die Erstellung eines Webformulars mit Kontrollkästchen an:

Kontrollkästchen unterscheiden sich von Optionsfeldern dadurch, dass Sie mehrere Optionen gleichzeitig auswählen können. Name wird verwendet, um in der Handler-Datei zu bestimmen, in welchem ​​Kontrollkästchen die Kontrollkästchen platziert werden, und Value gibt den Wert an, der an den Handler gesendet wird (wenn Value nicht angegeben ist, wird der Text neben diesem Kontrollkästchen an den Handler gesendet ).

Auswählen, Option, Textbereich, Beschriftung, Feldsatz, Legende – Dropdown-Listen, Textbereiche und andere Webformularelemente

Zunächst möchte ich Sie ein wenig daran erinnern, was Webformulare eigentlich sind und warum sie auf Website-Seiten benötigt werden. Sie dienen in erster Linie dazu, Elemente, die in jedem Betriebssystem zu finden sind, in einer benutzerfreundlichen Form nachzubilden: Schaltflächen, Texteingabefelder, Dropdown-Listen, Kontrollkästchen, Schalter und dergleichen.

Alle Benutzer verstehen ohne weitere Erklärung den Zweck dieser Elemente und wenn sie eine HTML-Formularschaltfläche sehen, verstehen sie, dass sie darauf klicken müssen.

Darüber hinaus sind alle seine Bestandteile (wie Select, Option, Textarea, Label, Fieldset, Legend) bereits ausgefüllte Leerzeichen (Container), zum Einfügen müssen Sie lediglich das gewünschte Tag mit den erforderlichen Attributen und Parametern verwenden.

Browser wissen selbst, wie sie dieses oder jenes Webformularelement anzeigen. Stimmt, Optionen zum Anzeigen desselben Elements in verschiedene Browser können geringfügig voneinander abweichen, in der Regel jedoch nicht wesentlich.

Das. Es stellt sich heraus, dass Webformulare in HTML ein Versuch sind, den Schlüssel zu übertragen Elemente, die in jedem Betriebssystem verwendet werden, zu den Seiten der Website. Aber warum werden sie möglicherweise auf Website-Seiten benötigt?

Im Prinzip für dasselbe, wofür ähnliche Elemente verwendet werden Betriebssysteme— Übermittlung von Daten durch den Benutzer. Bei Formularen werden Daten des Nutzers an den Server übertragen und dort verarbeitet Sonderprogramm(Hypertext-Auszeichnungssprache erlaubt leider keine Datenverarbeitung).

Allerdings können Daten nicht nur an den Server, sondern beispielsweise auch per gesendet werden Email an die im Action-Attribut des Form-Tags angegebene Adresse. Beim Senden von Daten von HTML an E-Mail beginnt der Benutzer, der die Felder ausfüllt, nachdem er auf die Schaltfläche „Daten senden“ geklickt hat Mailprogramm Standard auf seinem Computer.

Das öffnende Form-Tag sollte in diesem Fall etwa so aussehen:

Auswählen und Option – Dropdown-Listen-Tags

Alle Webformularelemente, die Dropdown-Listenfelder erstellen, sind auf die gleiche Weise aufgebaut. Zunächst wird der Container des Kombinationsfelds mithilfe des öffnenden und schließenden HTML-Select-Tags festgelegt. Und dann werden innerhalb dieses Containers separate Container mit den Elementen (Elementen) dieser Liste erstellt. Dies geschieht mithilfe öffnender und schließender Option-Tags.

Es stellt sich ungefähr so ​​heraus:

Dies ist jedoch ein vereinfachtes Design, weil Select und Option haben eine Reihe von Attributen, die die Eigenschaften bestimmen und Aussehen erstelltes Feld mit einer Dropdown-Liste.

  1. Name – Sie müssen einen eindeutigen Namen für dieses mit „Auswählen“ erstellte Webformularelement angeben. Dieser Name wird dem Server an das Datenverarbeitungsprogramm als Name für die Variable übergeben. Der Wert dieser Variablen ist der Wert des Wertattributs (für jedes Element in Option festgelegt) des Dropdown-Listenelements, das der Benutzer auswählt.
  2. Größe: Sie können damit die Anzahl der angezeigten Elemente festlegen. Mit anderen Worten: Mit Size können Sie die Höhe der Liste, gemessen an der Anzahl der angezeigten Zeilen, festlegen. Wenn Sie den Größenwert im Select-Tag nicht explizit angeben, wird die Standardhöhe der Dropdown-Liste verwendet. Sie unterscheidet sich, wenn das Select-Attribut fehlt oder im Select-Attribut vorhanden ist:
    1. Wenn „Mehrere“ in „Auswählen“ vorhanden ist, entspricht die Höhe der Dropdown-Liste im Webformular standardmäßig der Anzahl ihrer Elemente. Diese. Alle Elemente der Mehrfachauswahl-Dropdown-Liste werden angezeigt. Siehe Beispiel Plural unten. Wenn das Attribut „Größe“ in „Auswählen“ auf einen kleineren Wert als die Anzahl der Elemente eingestellt ist, wird rechts eine Bildlaufleiste angezeigt.
    2. Wenn „Mehrere“ in „Auswählen“ nicht vorhanden ist, beträgt die Höhe der Dropdown-Liste im Webformular standardmäßig eine Zeile. Diese. Es ist nur eine Zeile sichtbar und die restlichen Elemente sind nur durch Drücken der Aufzugstaste (rechts) zugänglich. Siehe Beispiel unten
  3. Mehrere – wenn Sie dieses Attribut dem Select-Tag zuweisen, können Sie eine Dropdown-Liste mit der Möglichkeit erstellen, mehrere Elemente gleichzeitig auszuwählen. Lesen Sie weiter unten mehr über dieses Attribut.

Formulare mit Dropdown-Listen können in zwei Optionen unterteilt werden. Bei der ersten Option können Sie mit einer Dropdown-Liste nur ein Element (Zeile) des Feldes auswählen. Bei der zweiten Option können Sie mit gedrückter Strg- oder Umschalttaste gleichzeitig mehrere der verfügbaren Elemente auswählen.

In diesem Fall werden bei der zweiten Option Daten zu allen ausgewählten Artikeln an den Server gesendet. Welche Dropdown-Liste erstellt wird, wird durch das Vorhandensein oder Fehlen des Multiple-Attributs im Select-Tag bestimmt.

Multiple wird in Select ohne Parameter angegeben, weil Es heißt einfach Multiple und das war’s. Wenn es vorhanden ist, wird ein Dropdown-Listen-Webformular mit der Möglichkeit zur Mehrfachauswahl erstellt (bei gedrückter Strg- oder Umschalttaste).

Eine Variante eines Feldes mit einer Dropdown-Liste, die Folgendes enthält: Mehrfachauswahl möglich, wird in etwa so aussehen:

Auf der rechten Seite sehen Sie ein Beispiel für ein Dropdown-Webformular mit Mehrfachauswahl, das auf dem obigen Code basiert. Wie Sie sehen, können Sie mit gedrückter Strg- oder Umschalttaste mehrere Elemente gleichzeitig auswählen.

Wenn im Select-Tag kein Multiple-Attribut vorhanden ist, kann nur ein Element dieser Dropdown-Liste (Zeile) ausgewählt werden.

Ein Beispiel, bei dem Sie nur ein Element auswählen können, sehen Sie hier:

Beschriftung „Ausgewählte Site auswählen“-Legende

Options-Tag-Attribute


In der erstellten Dropdown-Liste (mit Auswahl und Option) können Sie so etwas wie Trennzeichen mit Gruppenüberschriften hinzufügen, die sich im Schriftstil von den übrigen Menüelementen unterscheiden.

Um eine Gruppe aus Dropdown-Listenelementen zu erstellen, müssen Sie diese in die öffnenden und schließenden Tags des Optgroup-Formulars einschließen und im öffnenden Optgroup-Tag das Label-Attribut hinzufügen, als dessen Parameter Sie das eingeben müssen gewünschten Namen der Gruppe.

Zum Beispiel so:

Beschriftung auswählen
Legende der SelectED-Website

Textbereich – Erstellen eines Textfelds in einem Formular

Es gibt ein weiteres Element von Webformularen, das wir nicht berücksichtigt haben – Textarea (ein Feld mit der Möglichkeit, mehrzeiligen Text einzugeben). Es wird mit dem gepaarten HTML-Tag Textarea erstellt. Darüber hinaus können Sie Text übertragen Neue Zeile und es wird unter Berücksichtigung der durchgeführten Übertragungen an den Server übermittelt.

Um also ein mehrzeiliges Textfeld zu erstellen, müssen Sie einen öffnenden und schließenden Textbereich angeben und dazwischen Text hinzufügen, der sichtbar ist, wenn die Seite mit dem Webformular geladen wird. Der Benutzer kann diesen Text dann löschen und seinen eigenen schreiben.

Wie Sie sehen, ist es sinnlos, auf den Text zu klicken, um dieses Element zu aktivieren – Sie müssen darauf klicken. Dies ist genau der Zustand, den das Label-Tag korrigieren soll. Es ermöglicht Ihnen, den Text neben dem Webformularelement anklickbar zu machen, was zweifellos der Fall ist wird die Benutzerfreundlichkeit verbessern.

Aber wie verbindet man das HTML-Formularelement und den Text? Dazu müssen Sie dem Attribut eine ID mit einem eindeutigen Parameter hinzufügen und der Text muss von öffnenden und schließenden Label-Tags umgeben sein. Und das ist noch nicht alles. Im öffnenden Label-Tag müssen Sie das For-Attribut einschließen, dessen Parameter genau mit dem des ID-Attributs im HTML-Tag des Formularelements identisch sein muss. Es stellt sich ungefähr so ​​heraus:

Wie Sie sehen, können Webformularelemente dank der Verwendung von Label nun nicht nur durch Klicken auf das Element selbst, sondern auch durch Klicken auf den Text daneben aktiviert werden.

Fieldset und Legend – Aufteilen des Formulars in Teile

Sie haben wahrscheinlich schon oft gesehen, dass große Formulare in HTML in Gruppen (Fieldset) unterteilt sind, die von einem Rahmen umgeben sind und jede dieser Gruppen einen eigenen Titel (Legend) hat. Dies wird mit nur zwei Tags implementiert: Fieldset und Legend. Sie sind paarweise, d.h. Sie müssen einen öffnenden und einen schließenden haben.

Um also eine Gruppe von Komponententeilen zu erstellen, müssen Sie alle diese Teile in die öffnenden und schließenden Fieldset-Tags einschließen. Und um einen Titel (Legende) für diese Gruppe festzulegen, müssen Sie unmittelbar nach dem öffnenden Feldset eine Konstruktion einer öffnenden und schließenden Legende schreiben, zwischen denen Sie den Text des Gruppentitels einfügen müssen.

Hier ist ein Beispiel für die Erstellung von Gruppen mithilfe von Fieldset und Legend:



Viel Erfolg! Vor bis bald auf den Seiten der Blog-Site

Du könntest interessiert sein

Select, Option, Textarea, Label, Fieldset, Legend – HTML-Tags für die Form von Dropdown-Listen und Textfeldern
Einträge in HTML Quelltext- UL-, OL-, LI- und DL-Tags
MailTo – was ist das und wie erstellt man einen Link in HTML, um eine E-Mail zu senden?
Wie Farben im HTML- und CSS-Code eingestellt werden, Auswahl von RGB-Farbtönen in Tabellen, Yandex-Ausgabe und andere Programme
Was ist die Hypertext-Auszeichnungssprache HTML und wie zeigt man eine Liste aller Tags im W3C-Validator an?
So fügen Sie einen Link und ein Bild (Foto) in HTML - IMG- und A-Tags ein
Tabellen in HTML – Table-, Tr- und Td-Tags sowie Colspan, Cellpadding, Cellspacing und Rowspan für deren Erstellung
Schriftart (Gesicht, Größe und Farbe), Blockquote und Pre-Tags – alte Textformatierung in reinem HTML (kein CSS verwendet)
So erstellen Sie einen Hyperlink (A, Href, Ziel leer), wie Sie ihn in einem neuen Fenster auf der Website öffnen und wie Sie ein Bild in einen Link im HTML-Code umwandeln

In den letzten zwei Jahren hat die Entwicklung von Webanwendungen (Websites) große Fortschritte gemacht und die Methoden, mit denen wir früher eine Website erstellt haben, sind bereits veraltet oder es sind neuere Methoden aufgetaucht.

Um zuvor eine Dropdown-Liste in HTML zu erstellen ( auf Englisch. - runterfallen), haben wir gerade verwendet

In diesem Beispiel taggen wir

Im Browser sieht es so aus:

Gruppieren von Menüpunkten

Schauen wir uns das folgende Tag an , das zum Gruppieren zusammengehöriger Daten in einer Dropdown-Liste verwendet wird name = "black&white" > label = "Whitelist" >

In diesem Beispiel haben wir zwei Gruppen mit dem Tag hervorgehoben . Das Label-Attribut des Elements gibt den Namen der ausgewählten Gruppe in Fettschrift an:

Im folgenden Beispiel deaktivieren wir mithilfe des booleschen Attributs „disabled“ eine Gruppe („ Gruppe B"):

</span> Ein Beispiel für die Verwendung des Attributs „disabled“ eines HTML-Tags <optgroup><span>

Das Ergebnis unseres Beispiels:

Liste und Mehrfachauswahl deaktivieren

</span> Die Tag-Attribute „disabled“ und „multiple“. <select><span>

In diesem Beispiel haben wir zwei Dropdown-Listen erstellt. Für die erste Liste haben wir das Attribut „disabled“ verwendet, das die Interaktion mit der Liste verhindert (sie deaktiviert).

Für die zweite Liste haben wir das Attribut multiple verwendet, das angibt, dass es möglich ist, mehrere Optionen in der Liste gleichzeitig auszuwählen (via Strg unter Windows und über Befehl auf dem Mac).

Im Browser sieht es so aus:

Textbereich

Das Ergebnis unseres Beispiels:

Deaktivieren des Textbereichs

Analog zu den zuvor besprochenen Tag-Elementen



type = "submit" name = "submitInfo" value = "submit" > !}

In diesem Beispiel haben wir zwei Textbereiche erstellt (das Element