Schaltfläche zum Senden eines HTML-Formulars mit Dropdown-Liste. HTML-Formularelemente - eine Dropdown-Liste (Auswahl, Option, Optgroup-Tags), ein Textbereich und Anwenden einer Beschriftung, eines Feldsatzes und einer Legende. Optgroup-Tag-Attribute

Die einfachste Dropdown-Liste in HTML lässt sich einfach mit dem Auswahl-Tag erstellen. Dies ist ein Container-Tag, in dem Options-Tags verschachtelt sind - sie definieren die Listenelemente.

Es gibt verschiedene Optionen für Listen, die mit dem Auswahl-Tag erstellt werden können: eine Dropdown-Liste (Optionen fallen aus, nachdem Sie auf das Hauptfeld geklickt haben oder darüber fahren) und eine Multiple-Choice-Liste - darin kann der Benutzer mehrere Elemente auswählen. Ersteres ist häufiger anzutreffen und ein wichtiges Navigationselement in modernen Websites. Die Multiple-Choice-Dropdown-Liste kann beispielsweise in Katalogen verwendet werden, in denen Sie mehrere Produkteigenschaften auswählen müssen.

Sie können das Erscheinungsbild und die Eigenschaften von Listen mithilfe generischer und benutzerdefinierter Attribute ändern.

Wählen Sie Tag-Attribute aus

1. Multiple - Legt Multiple Choice fest.

2. Größe - Legt die Anzahl der sichtbaren Linien in der Liste fest, dh die Höhe. Und hier hängt alles davon ab, ob das Mehrfachattribut vorhanden ist oder nicht. Wenn ja, und Sie keine Größe angeben, sieht der Benutzer bei Vorhandensein mehrerer Optionen alle möglichen Auswahlmöglichkeiten. Wenn mehrere nicht vorhanden sind, wird nur eine Zeile angezeigt, und der Rest des Besuchers kann lesen, wenn er auf das Aufzugssymbol auf der rechten Seite klickt. Wenn die Größe angegeben ist und die Anzahl der Optionen geringer ist, wird rechts eine Bildlaufleiste angezeigt.

3. Name - Name. Auf die Dropdown-Liste kann verzichtet werden, es kann jedoch erforderlich sein, mit dem Handler auf dem Server zu interagieren. In der Regel wird der Name weiterhin angezeigt.

Das Auswahl-Tag verfügt im Gegensatz zum Options-Tag nicht über die erforderlichen Attribute.

Option verschachtelte Tag-Attribute

1. Ausgewählt - zum Auswählen eines Listenelements. Der Benutzer kann mehr als ein Element auswählen, wenn das Mehrfachattribut festgelegt ist (siehe oben).
2. Wert - Wert. Dieses Attribut ist erforderlich. Der Webserver muss genau verstehen, welche Listenelemente der Benutzer ausgewählt hat.
3. Etikette. Mit diesem Attribut können Sie zu lange Listenelemente kürzen. Beispielsweise wird "Mailand" anstelle der im Tag angegebenen Option "Mailand ist das Verwaltungszentrum der Lombardei" angezeigt. Nord Italien". Dieses Attribut wird auch zum Gruppieren von Elementen in einer Liste verwendet.

Die Breite der Liste wird standardmäßig auf die Länge des breitesten Textes in der Liste festgelegt. Natürlich kann die Breite mithilfe von HTML-Stilen geändert werden.

Dropdown auf andere Weise

Dies kann mithilfe von CSS erfolgen. Beispielsweise wird eine Liste angezeigt, wenn Sie den Mauszeiger über ein Seitenelement bewegen. JavaScript bietet hervorragende Optionen zum Erstellen von Listen, was durch die Jquery-Bibliothek vereinfacht wird. Die mit dieser Bibliothek verbundene Dropdown-Liste kann sehr komplex sein, z. B. kaskadierend. Das heißt, wenn Sie einen Artikel in einer Liste auswählen, wird die folgende Liste angezeigt. Beispielsweise gibt es einen Menüpunkt "Damenbekleidung" (wenn Sie den Mauszeiger bewegen, wählen Sie einen der Typen aus, z. B. "Oberbekleidung", eine Liste mit den Elementen: Jacken, Parkas, Mäntel, Kurzmantel, Pelzmäntel usw.

Wir haben die wichtigsten Möglichkeiten zum Erstellen einer Dropdown-Liste überflogen. Natürlich gibt es in und in JavaScript viele Nuancen, mit denen Sie die Funktionalität und das Erscheinungsbild von Listen ändern können.

In diesem Artikel werden wir uns die Elemente ansehen, mit denen Sie Dropdown-Listen erstellen können, lernen, wie Sie Gruppen in diesen Listen bilden, wie Sie Elemente und sogar Gruppen von Listen deaktivieren, sich mit dem Element vertraut machen, mit dem Sie ein mehrzeiliges Textfeld erstellen können. Sie können es später in HTML verwenden Formen (Element

) setzen wir eindeutige Namen für den ersten und zweiten Bereich mit dem Attribut name. Für den zweiten Textbereich haben wir unter Verwendung des Attributs disabled angegeben, dass es beim Laden der Seite deaktiviert wird.</p> <p>Zusätzlich haben wir eine Schaltfläche in das Formular eingefügt, die zum Senden des Formulars (Elements) dient <input> Geben Sie mit der Schaltfläche "Formular senden" ein: type \u003d "submit").</p> <p>Das Ergebnis unseres Beispiels:</p> <h2>Tooltip für den Textbereich</h2> <p>Und so werden Sie und ich das letzte Beispiel betrachten und mit der praktischen Aufgabe des Artikels dieses Tutorials fortfahren.</p> <p>Dank dem (HTML-Tag <textarea>) Es ist zulässig, den Text der QuickInfo anzugeben, der den erwarteten Wert beschreibt, den der Benutzer in das Element eingeben muss.</p> <p>Der Hinweistext wird ausgeblendet, wenn der Benutzer einen Wert (ein beliebiges Zeichen) in das Textfeld eingibt. Wenn Sie ihn entfernen, wird der Hinweis erneut angezeigt.</p> <p>Schauen wir uns ein Anwendungsbeispiel an:</p> <span><!DOCTYPE html> <html> <head> <title> </span>Platzhalter- und schreibgeschützte Tag-Attribute <textarea><span></title> </head> <body> <form> <textarea placeholder = <span>"Geben Sie Informationen in das Textfeld ein"</span>> "Das Feld ist schreibgeschützt"</span> schreibgeschützt\u003e
type \u003d "submit" name \u003d "submitInfo" value \u003d "(! LANG: submit" > !}

In diesem Beispiel haben wir zwei Textbereiche (Element) erstellt ), für den ersten und zweiten Bereich mit dem Attribut setzen wir einen Hinweis für den Benutzer, der mit einer blassen Farbe des Textes innerhalb des Elements angezeigt wird. Für den zweiten Textbereich mit dem Attribut readonly haben wir angegeben, dass er schreibgeschützt ist (der Inhalt kann nicht geändert werden).</p> <p>Beachten Sie, dass der Inhalt nicht geändert werden kann, wenn das Textfeld schreibgeschützt ist. Der Benutzer kann jedoch zum Inhalt navigieren, ihn auswählen und kopieren.</p> <p>Zusätzlich haben wir eine Schaltfläche in das Formular eingefügt, die zum Senden des Formulars (Elements) dient <input> Geben Sie mit der Schaltfläche "Formular senden" ein: type \u003d "submit").</p> <p>Das Ergebnis unseres Beispiels:</p> <h2>Fragen und Aufgaben zum Thema</h2> <p>Schließen Sie die Übungsaktivität ab, bevor Sie mit dem nächsten Thema fortfahren:</p> <ul><li>Erstellen Sie anhand der gewonnenen Erkenntnisse das folgende Formular für Stellenausschreibungen:</li> </ul><p>Öffnen Sie das Beispiel in einem neuen Fenster, bevor Sie mit der Aufgabe fortfahren, und überprüfen Sie das Formular sorgfältig, um alle Punkte zu wiederholen. Um die Aufgabe abzuschließen, benötigen Sie das Wissen aus dem Artikel. Wenn Sie es verpasst haben, kommen Sie zurück, um es zu studieren.</p> <p>Überprüfen Sie nach Abschluss der Übung den Seitencode, indem Sie das Beispiel in einem separaten Fenster öffnen, um sicherzustellen, dass Sie alles richtig gemacht haben.</p> <p>Eine Dropdown-Liste in HTML kann mithilfe des Tags erstellt werden <b>wählen</b>... Zusätzlich zur Dropdown-Liste (oder "Dropdown" -Liste) wird das Tag angezeigt <b>wählen</b> Mit dieser Option können Sie ein Multiple-Choice-Listenelement erstellen. Tag-Verwendungssyntax <b>wählen</b> Der HTML-Code sieht folgendermaßen aus:</p><p> <select> <option>Elektronisch</option> <option>Syroezhkin</option> <option>Chizhikov</option> <option>Kukushkina</option> </select> </p><p>Hier mit dem Tag <b>möglichkeit</b> Listenelemente werden gesetzt.</p> <p>Anwendungsergebnis:</p><p>Elektronik Syroezhkin Chizhikov Kukushkina</p><h2>SELECT-Tag-Attribute</h2> <p>Berücksichtigen Sie Tag-Attribute <b>wählen</b>:</p> <ul><li><b>name</b></li> <li><b>größe</b> - die Anzahl der angezeigten Zeilen in der Liste (Anzahl);</li> <li><b>mehrere</b> - enthält die Funktion der Mehrfachauswahl von Elementen in der Dropdown-Liste;</li> <li><b>behindert</b> - blockiert den Zugriff auf das Element;</li> <li><b>bilden</b> - Ermöglicht das Verknüpfen einer Dropdown-Liste mit einem Formular (möglicherweise erforderlich, wenn sich die Liste selbst außerhalb des Formulars befindet, an das sie angehängt werden soll). Die Formular-ID wird als Argument übergeben.</li> </ul><p>Vielleicht sind dies alle Hauptattribute des Tags <b>wählen</b>welche am häufigsten verwendet werden. Lassen Sie uns nun sehen, wie Sie eine Dropdown-Liste in HTML mit den angegebenen Attributen erstellen:</p><p> <html> <head> <title>Dropdown-Liste mit HTML - Nubex</title> </head> <body> <form id="nubexForm" action="do.php"> <input type="submit" value="Nachricht senden" /> </form> <select name="nubexSelect" size="3" multiple form="nubexForm"> <option>Elektronisch</option> <option>Syroezhkin</option> <option>Chizhikov</option> <option>Kukushkina</option> </select> </body> </html> </p><h2>OPTION-Tag-Attribute</h2> <p>Etikett <b>möglichkeit</b>Wie bereits erwähnt, können Sie die untergeordneten Elemente der Dropdown-Liste definieren <b>wählen</b>was wiederum als Container fungiert. Etikett <b>möglichkeit</b> hat seine eigenen Attribute:</p> <ul><li><b>behindert</b> - verbietet die Auswahl dieses Listeneintrags;</li> <li><b>etikette</b> - Ermöglicht das Festlegen einer Beschriftung für das aktuelle Listenelement (anstelle des im Tag angegebenen Textes wird der Beschriftungswert angezeigt, mit dem Sie einen abgekürzten Wert anzeigen können). <b>Hinweis: Das Attribut wird im Firefox-Browser nicht unterstützt</b></li> <li><b>ausgewählt</b> - Das aktuelle Element in der Liste wird standardmäßig ausgewählt.</li> <li><b>wert</b> - den Wert, der an den Server übertragen wird;</li> </ul><p>Schauen wir uns einen erweiterten Anwendungsfall für das Tag an <b>möglichkeit</b>:</p><p> <select> <option label="Электроник" value="1" selected>Herr Electronic</option> <option>Syroezhkin</option> <option disabled>Chizhikov</option> <option>Kukushkina</option> </select> </p><p>Das Ergebnis des angegebenen Beispiels sieht folgendermaßen aus:</p><p>Herr Electronic Syroezhkin Chizhikov Kukushkina</p><p>Im Site-Konstruktor "Nubex" können mit dem Formularkonstruktormodul beliebige Formulare erstellt werden. Die Funktionsweise von Dropdown-Listen in "Nubex" wird im Artikel beschrieben:</p> <p>Grüße an alle Leser meines Blogs. Heute werde ich Ihnen erklären, wie Sie eine Dropdown-Liste in HTML erstellen, welche Tags und Attribute Sie verwenden müssen und für welche Zwecke Sie sie möglicherweise benötigen.</p> <h2>Das Auswahl-Tag und das Erstellen einer Dropdown-Liste</h2> <p>Daher wird die Dropdown-Liste in HTML mithilfe des gepaarten Auswahl-Tags erstellt, in das die gepaarten Options-Tags eingefügt werden. In ihnen werden alle Optionen aufgezeichnet, die angeboten werden, wenn Sie auf die Liste klicken. Beispiel:</p><p>Wähle ein Tier <select> <option value = "Stier">Stier</option> <option value = "Kuh">Kuh</option> <option value = "Schaf">Schaf</option> <option value = "Pferd">Pferd</option> </select> </p><p>In diesem Fall wird auf dem Bildschirm angezeigt, was zwischen dem öffnenden und dem schließenden Teil der Option angezeigt wird, und der im Wertattribut enthaltene Wert wird an den Server gesendet oder mithilfe eines Skripts verarbeitet.</p><p>Die HTML-Liste kann regulär oder Multiple-Choice sein. Um die Auswahl mehrerer Elemente zu ermöglichen, fügen Sie ein leeres Mehrfachattribut zur Auswahl hinzu. Halten Sie gedrückt, um mehrere Werte auszuwählen <i>strg</i> und drücken Sie die linke Maustaste. <br><br> Ein weiteres nützliches Attribut ist die Größe. Hier können Sie auswählen, wie viele Zeilen in der Dropdown-Liste angezeigt werden sollen.</p> <p>Ein anderes Attribut ist deaktiviert. Es macht den Zugriff auf die Liste für das Klicken und Anzeigen von Elementen unzugänglich, sie ist jedoch weiterhin auf der Seite sichtbar.</p> <p>Erforderlich - HTML5-Attribut. Wenn angegeben, wird das Formular nicht gesendet, ohne einen Wert aus der Dropdown-Liste auszuwählen. Im Allgemeinen wird es ein Muss für die Auswahl. Das Attribut funktioniert zwar nicht in allen Browsern.</p> <h2>Options-Tag-Attribute</h2> <p>Tatsächlich dient select nur als Container für Listenelemente. Sie werden selbst mithilfe des Options-Tags festgelegt. Es hat einen Wertparameter, wie wir bereits herausgefunden haben, aber außerdem gibt es andere. Beispielsweise: <br> Deaktiviert - macht das Listenelement für die Auswahl nicht verfügbar. Es wird angezeigt, aber Sie können nicht darauf klicken.</p> <p>Ausgewählt - Das Element wird standardmäßig ausgewählt. In einer regulären Liste kann dieses Attribut ohne Wert auf nur ein Element in einer Pluralliste festgelegt werden - auf mehrere.</p> <h2>Wichtige Klarstellung für den korrekten Betrieb</h2> <p>Wenn das Ergebnis der Auswahl an den Server gesendet oder über Skripte verarbeitet werden muss, platzieren Sie die Auswahl im Formular, damit keine Fehler auftreten. Tatsache ist, dass die Dropdown-Liste ursprünglich genau als eines der Formularelemente erstellt wurde.</p> <h2>Wofür wird ausgewählt?</h2> <p>Normalerweise kann es für Sie nützlich sein, wenn Sie sich auf Ihrer Website registrieren oder eine Umfrage durchführen möchten. Das Element hat einen Nachteil - es ändert sein Aussehen über CSS nicht sehr gut.</p> <p>Wenn Sie auf die Liste klicken, wird standardmäßig ein blauer Rahmen angezeigt. In derselben Farbe werden die Listenelemente hervorgehoben, über denen sich der Cursor befindet. Um zu verhindern, dass der Rahmen beim Drücken angezeigt wird, oder um ihn in einer anderen Farbe hervorzuheben, können Sie den folgenden Selektor schreiben:</p> <p>Wählen Sie: Fokus ( <br> Umriss: 1px festes Orange; <br> }</p> <p>Der Rahmen ist jetzt orange.</p> <p>Die Option kann auch gestylt werden. Wenn Sie jedoch mit der Maus über ein Element fahren, wird der Hintergrund blau und ändert sich aus irgendeinem Grund nicht durch die Stile.</p> <p>Möglichkeit ( <br> Farbe braun; <br> Hintergrund: Aqua; <br> }</p> <p>Kann übrigens jemand von euch wissen, wie man die Hintergrundfarbe ändert, wenn Sie mit der Maus über ein Element über CSS fahren?</p> <p>Das ist in der Tat alles für das Select-Tag und seine Verwendung. Es gibt keine zusätzlichen Funktionen im HTML dafür. Alle anderen Operationen damit können mit Javascript und PHP ausgeführt werden. Wenn Sie beispielsweise eine Liste zur Auswahl des Geburtsjahres erstellen müssen und möglicherweise 80 bis 100 verschiedene Optionen verfügbar sind, werden Sie diese nicht von Hand schreiben?</p> <p>Dies ist genau das, was Sie für die Programmierung benötigen, nämlich eine Schleife. Okay, das ist bereits ein Thema für ein weiteres Gespräch, aber für heute sind dies alle Informationen, die ich Ihnen mitteilen wollte. Sie können sich mit anderen grundlegenden Tags in HTML vertraut machen.</p> <p>Grüße an Sie, liebe Leser der Blog-Site. Heute möchte ich über solche HTML-Formulare sprechen. Unabhängig von der Engine Ihrer Site (cms) werden auf jeden Fall Formulare verwendet, die mit Formular- und Eingabe-Tags erstellt wurden, sowie Attribute und Parameter Button, Checked, Value, Checkbox, Radio, Checkbox, Submit in der einen oder anderen Form ...</p><p>Nun, Sie können auch Elemente hinzufügen, um Dropdown-Listen und Textfelder zu erstellen - Auswählen, Option, Textbereich, Beschriftung, Feldsatz, Legende.</p><h2>Warum werden wir gebraucht und wie funktionieren Formulare auf modernen Websites?</h2><p>Mit diesen Tags wird dieselbe Site-Suchzeichenfolge () erstellt. Anschließend ist die Suche in Ihrem Projekt obligatorisch. Das Verstehen, wie sie angeordnet sind und funktionieren, schadet Ihnen daher für eine erfolgreiche Arbeit am Design überhaupt nicht, und selbst bei Eigenwerbung und Eigenwerbung ist dies nicht überflüssig.</p><p>Aus den Gründen für die Notwendigkeit, diese Elemente zu untersuchen, sollten meiner Meinung nach keine weiteren Fragen auftauchen. Daher ist es an der Zeit, direkt mit der Untersuchung ihrer möglichen Optionen fortzufahren.</p><p>Ja, ich möchte Sie auch daran erinnern, dass wir bereits viele Materialien zum Thema Hypertext-Markup-Sprache überprüft haben, z. B. drei) und.</p><p>Formulare bestehen im Kern aus Elementen, für deren Erstellung innerhalb des Hauptcontainers aus Formular-Tags verschiedene Tags eingefügt werden - Aktiviert, Wert, Kontrollkästchen, Radio, Kontrollkästchen, Senden usw. Wir müssen den Code nur an einer beliebigen Stelle der Site-Vorlage platzieren indem Sie mit Tags und ihren Attributen angeben, wie es aussehen soll.</p><p>Dies kann ein Textfeld mit einer Senden-Schaltfläche für die von Ihnen eingegebene Abfrage, Auswahlmöglichkeiten mit Optionsfeldern (bei denen Sie nur eine der bereitgestellten Schaltflächen gedrückt lassen können), mehrere Textfelder mit einer Senden-Schaltfläche () und mehr sein.</p><p>Im Fall von "Suchen" können Sie beispielsweise mithilfe des Attributs "Wert" angeben, was genau auf die Schaltfläche neben dem Feld zur Eingabe einer Abfrage geschrieben werden soll. Die in die Formulare eingegebenen Daten müssen in irgendeiner Weise weiterverarbeitet werden.</p><p>Im Falle einer Rückmeldung gibt der Benutzer beispielsweise nach dem Ausfüllen des Felds mit seinem Namen seine E-Mail-Adresse und den Text der Nachricht ein und klickt dann auf die Schaltfläche "Senden". Er hat das Recht zu hoffen, Daten aus dem Formular an die E-Mail-Adresse des Site-Autors zu senden. Leider ist es nicht möglich, dies mit nur einer Hypertext-Markup-Sprache () zu implementieren.</p><p>Zu diesem Zweck ist ein spezielles Handlerprogramm erforderlich, das nach dem Klicken des Benutzers auf die Schaltfläche "Senden" alle Daten aus den Feedbackfeldern entnimmt und per E-Mail an den Ressourcenbesitzer sendet. Welches Programm dies tut, müssen Sie selbst mit dem Action-Attribut angeben.</p><p>Normalerweise ist ein Verarbeitungsprogramm ein in PHP geschriebenes Skript. Daher müssen Sie im Action-Attribut des Form-Tags den Pfad zur Datei dieses Skripts angeben, die sich auf Ihrem Hosting-Server befindet. Ich werde als Beispiel ein Abonnement für den RSS-Feed meines Blogs per E-Mail geben:</p><p>Ein bisschen unverständlich, wahrscheinlich scheint es am Anfang, aber ich denke, dass alles klarer wird, wenn wir die Geschichte fortsetzen.</p><h3>Formular- und Eingabe-Tags zum Erstellen von Schaltflächen, Kontrollkästchen und Optionsfeldern</h3><p>Jedes Formular muss in öffnenden und schließenden Tags enthalten sein <b>Bilden</b>... Dies ist eine Art Container für ihre Erstellung. Dieses Tag verfügt über eine Reihe erforderlicher und optionaler Attribute:</p><ol><li>Name - Ein eindeutiger Name, der angegeben werden muss, wenn in der HTML-Datei, in der Sie etwas tun, mehrere Webformulare verwendet werden</li><li>Aktion - Ein erforderliches Attribut, das den Pfad zum Skript angibt, von dem Daten zur weiteren Verarbeitung empfangen werden</li><li>Methode - Mit dieser Methode können Sie die Methode zum Übertragen von Daten aus diesem Webformular in das Skript der Handlerdatei ändern. Wenn Sie es nicht angeben, wird standardmäßig die Get-Methode verwendet, die hauptsächlich für Variablen und Kurznachrichten bestimmt ist und außerdem auf offene Weise Daten über die Adressleiste des Browsers überträgt. Um Formulardaten an das Handler-Skript zu übergeben, ist es immer noch besser, sie zu verwenden <b>pOST-Methode</b>Entwickelt speziell für das geschlossene Senden von Textnachrichten</li> </ol><p>Betrachten Sie den Rest der Tags, mit denen Sie eine Vielzahl von Webformularen erstellen können. Am vielseitigsten ist <b>Eingang</b>... Darin muss das Type-Attribut vorgeschrieben sein, das bestimmt, wie genau das mit diesem Tag erstellte HTML-Formular aussehen soll.</p><p>Die folgenden Elemente können mit Eingabe und Typ erstellt werden:</p><ol><li>einzeilige Textfelder (Typ \u003d "Text")</li><li>felder zur Eingabe eines Passwortes (Typ \u003d "Passwort")</li><li>kontrollkästchen (Typ \u003d "Kontrollkästchen")</li><li>optionsfelder (Typ \u003d "Radio")</li><li>versteckte Felder (Typ \u003d "Versteckt")</li><li>normale Tasten (Typ \u003d "Taste")</li><li>schaltflächen zum Senden von Daten an den Handler (Typ \u003d "Senden")</li><li>schaltflächen zum Versetzen des Webformulars in den ursprünglichen Zustand (Typ \u003d "Zurücksetzen")</li><li>felder zum Hochladen von Dateien auf den Server (Type \u003d "File)</li><li>schaltflächen mit einem Bild (Typ \u003d "Bild")</li> </ol><p>Die Eingabe hat kein End-Tag. Wie genau das damit erstellte Webformular aussehen wird, hängt vollständig von dem im Attribut Type angegebenen Parameter ab. Wenn Typ nicht angegeben ist, wird standardmäßig ein Textfeld erstellt.</p><h3>Beispiele für Formulare, die bei der Eingabe mit unterschiedlichen Werten für Typ erstellt wurden</h3> <h3>Andere Attribute des Input-Tags und Beispiele für deren Verwendung</h3><p>Mal sehen, wofür die restlichen Attribute sind:</p><ol><li>Name - Wenn die Daten an das Skript des Handlerprogramms gesendet werden sollen, müssen Sie den Parameter für das Attribut Name angeben. Unter diesem Namen werden die vom Formular übermittelten Daten im Information-Handler-Programm angezeigt.</li><li>Größe - Legt die Größe des Felds des erstellten Webformulars fest. Der Wert wird in der Anzahl der Zeichen angegeben, die in dieses Feld passen können. Wenn Größe nicht angegeben ist, beträgt die Standardbreite 24 Zeichen</li><li>Maxlength - Standardmäßig ist die Anzahl der Zeichen, die in das HTML-Formular eingegeben werden können, nicht begrenzt. Mit Maxlength können Sie diese Einschränkung jedoch festlegen. Sie können nicht mehr Zeichen eingeben, als im Feld angegeben sind</li><li>Wert - Mit ihm können Sie festlegen, was genau standardmäßig in das Feld oder auf die Schaltfläche zum Senden von Daten geschrieben wird</li><li>Aktiviert ist ein Flag-Attribut, das in die Eingabe für Optionsfelder (Radio) oder für Kontrollkästchen (Kontrollkästchen) eingefügt werden kann. In diesem Fall ist dieses Optionsfeld oder Kontrollkästchen beim Laden einer Seite mit einem Webformular aktiv (es ist bereits ein Häkchen darin).</li> </ol><p>Lassen Sie uns jetzt alles durchgehen <b>beispiele für Formulare mit Eingabe</b>... Das Erscheinungsbild des Textfelds ähnelt dem Erscheinungsbild des Passworteingabefelds. Daher wird nur die Option zum Erstellen von Text in Betracht gezogen, um beispielsweise eine E-Mail-Adresse einzugeben:</p><p><img src='https://i2.wp.com/ktonanovenkogo.ru/image/26-06-201323-44-45.png' width="100%" loading=lazy></p><p>Schauen wir uns nun an, wie Sie ein Webformular mit Optionsfeldern (Radio) erstellen:</p><p><img src='https://i0.wp.com/ktonanovenkogo.ru/image/26-06-201323-45-36.png' width="100%" loading=lazy></p><p>Beachten Sie, dass dieses Formular das Eingabe-Tag zweimal verwendet - einmal, um jedes der beiden Optionsfelder zu erstellen. Darüber hinaus enthält jeder von ihnen das Attribut Name mit demselben Wert (rezultat), und der Wert value ist unterschiedlich (YES und NO).</p><p>Dies bedeutet, dass bei der Verarbeitung, wenn eines der Optionsfelder ausgewählt ist, eine Variable gesendet wird, deren Name in Name geschrieben ist. Der Wert dieser Variablen hängt jedoch davon ab, welches Optionsfeld ausgewählt wurde.</p><p>Betrachten wir ein Beispiel für das Erstellen eines Webformulars mit Kontrollkästchen:</p><p><img src='https://i1.wp.com/ktonanovenkogo.ru/image/26-06-201323-46-30.png' width="100%" loading=lazy></p><p>Kontrollkästchen unterscheiden sich von Optionsfeldern durch die Möglichkeit, mehrere Optionen gleichzeitig auszuwählen. Name wird verwendet, um in der Handlerdatei zu definieren, in welchem \u200b\u200bKontrollkästchen sich die Kontrollkästchen befinden, und Value legt den Wert fest, der an den Handler gesendet wird (wenn Value nicht angegeben ist, wird der Text neben diesem Kontrollkästchen an den Handler gesendet).</p><h2>Wählen Sie, Option, Textbereich, Beschriftung, Feldsatz, Legende - Dropdown-Listen, Textbereiche und andere Elemente von Webformularen</h2><p>Zunächst möchte ich Sie ein wenig daran erinnern, was Webformulare tatsächlich sind und warum sie auf den Seiten der Website benötigt werden. Sie dienen in erster Linie dazu, die in jedem Betriebssystem verfügbaren Elemente benutzerfreundlich zu wiederholen: Schaltflächen, Texteingabefelder, Dropdown-Listen, Kontrollkästchen, Optionsfelder und dergleichen.</p><p>Alle Benutzer verstehen ohne zusätzliche Erklärung den Zweck dieser Elemente und wenn sie die HTML-Schaltfläche des Formulars sehen, verstehen sie, dass sie darauf klicken müssen.</p><p>Darüber hinaus sind alle Bestandteile (wie Select, Option, Textarea, Label, Fieldset, Legend) bereits fertige Werkstücke (Container), deren Einfügung ausreicht, um nur das erforderliche Tag mit den erforderlichen Attributen und Parametern zu verwenden.</p><p>Browser selbst wissen, wie ein bestimmtes Element eines Webformulars angezeigt wird. Die Optionen zum Anzeigen desselben Elements in verschiedenen Browsern können sich zwar geringfügig voneinander unterscheiden, sind jedoch in der Regel nicht wesentlich.</p><p>So Es stellt sich heraus, dass Webformulare in HTML ein Versuch sind, Schlüssel zu übertragen <b>elemente, die in jedem Betriebssystem verwendet werden</b>auf die Seiten der Website. Aber warum werden sie möglicherweise auf Websiteseiten benötigt?</p><p>Grundsätzlich für den gleichen Zweck, für den ähnliche Elemente in Betriebssystemen verwendet werden - die Übertragung von Daten vom Benutzer. Bei Formularen werden Daten vom Benutzer an den Server übertragen, wo sie von einem speziellen Programm verarbeitet werden (leider erlaubt die Hypertext-Markup-Sprache keine Datenverarbeitung).</p><p>Daten können zwar nicht nur an den Server gesendet werden, sondern beispielsweise auch per E-Mail an die im Attribut Aktion des Formular-Tags angegebene Adresse. Beim Senden von Daten von HTML an E-Mail startet der Benutzer, der die Felder ausfüllt, nachdem er auf die Schaltfläche zum Senden von Daten geklickt hat, standardmäßig das auf seinem Computer verwendete E-Mail-Programm.</p><p>Das öffnende Formular-Tag sollte in diesem Fall ungefähr so \u200b\u200baussehen:</p><p> <form action="mailto:qwertydmitriy@gmail.com" enctype="text/plain"> </p><h3>Auswahl und Option - Dropdown-Tags</h3><p>Alle Elemente eines Webformulars, die Felder mit Dropdown-Listen erstellen, werden auf dieselbe Weise gebildet. Zunächst wird der Container des Kombinationsfelds mithilfe des öffnenden und schließenden HTML-Auswahl-Tags festgelegt. In diesem Container werden dann separate Container mit den Elementen (Elementen) dieser Liste erstellt. Dies erfolgt über das Öffnen und Schließen von Options-Tags.</p><p>Es stellt sich ungefähr so \u200b\u200bheraus:</p><p><img src='https://i1.wp.com/ktonanovenkogo.ru/image/27-06-20130-21-18.png' width="100%" loading=lazy></p><p>Dies ist jedoch eine vereinfachte Konstruktion, da <b>select und Option haben eine Reihe von Attributen</b>die die Eigenschaften und das Erscheinungsbild des erstellten Dropdown-Felds definieren.</p><ol><li>Name - Sie müssen einen eindeutigen Namen für dieses Webformularelement angeben, das mit Select erstellt wurde. Dieser Name wird im Datenhandlerprogramm als Name für die Variable an den Server übergeben. Der Wert des Value-Attributs (in Option für jedes Element festgelegt) des Dropdown-Listenelements, das der Benutzer auswählt, wird als Wert dieser Variablen übergeben.</li><li>Größe - Sie können damit die Anzahl der angezeigten Elemente festlegen. Mit anderen Worten, mit Hilfe von Größe können Sie die Höhe der Liste festlegen, gemessen an der Anzahl der angezeigten Zeilen. Wenn Sie den Größenwert im Tag "Auswählen" nicht explizit angeben, wird der Standardwert der Höhe der Dropdown-Liste verwendet, der sich in Abwesenheit oder Vorhandensein des Attributs "Mehrfach" in "Auswahl" unterscheidet. <ol><li>Wenn in Select Multiple vorhanden ist, entspricht die Höhe der Dropdown-Liste im Webformular standardmäßig der Anzahl der Elemente. Jene. Alle Elemente in der Multiple-Choice-Dropdown-Liste werden angezeigt. Unten sehen Sie ein Beispiel für einen Plural. Wenn das Größenattribut in Auswahl auf weniger als die Anzahl der Elemente festgelegt ist, wird rechts eine Bildlaufleiste angezeigt.</li><li>Wenn in Select kein Multiple vorhanden ist, entspricht die Höhe der Dropdown-Liste im Webformular standardmäßig einer Zeile. Jene. Es ist nur eine Zeile sichtbar, und der Rest der Elemente ist nur verfügbar, wenn Sie die Aufzugstaste (rechts) drücken. Siehe Beispiel unten</li> </ol></li><li>Mehrfach - Wenn Sie dieses Attribut im Tag "Auswählen" zuweisen, können Sie eine Dropdown-Liste mit der Möglichkeit erstellen, mehrere Elemente gleichzeitig auszuwählen. Lesen Sie unten mehr über dieses Attribut.</li> </ol><p>Dropdown-Formulare können in zwei Optionen unterteilt werden. Bei der ersten Option können Sie nur ein Element (Zeile) des Felds mit einer Dropdown-Liste auswählen. Bei der zweiten Option können Sie bei gedrückter Strg- oder Umschalttaste mehrere der verfügbaren Elemente gleichzeitig auswählen.</p><p>In diesem Fall werden bei der zweiten Option Daten zu allen ausgewählten Elementen an den Server gesendet. Welche Dropdown-Liste erstellt wird, hängt vom Vorhandensein oder Fehlen des Multiple-Attributs im Select-Tag ab.</p><p>Multiple ist in Select ohne Parameter angegeben, da es ist einfach mehrfach geschrieben und das wars. Wenn es vorhanden ist, wird ein Dropdown-Listen-Webformular mit der Möglichkeit der Mehrfachauswahl erstellt (Strg oder Umschalt gedrückt halten).</p><p>Eine Variante des Feldes mit einer Dropdown-Liste, die wird <b>multiple Choice möglich</b>wird ungefähr so \u200b\u200baussehen:</p><p><img src='https://i1.wp.com/ktonanovenkogo.ru/image/27-06-20130-23-55.png' width="100%" loading=lazy></p><p>Auf der rechten Seite sehen Sie ein Beispiel für ein Webformular für eine Dropdown-Liste mit Mehrfachauswahl, die auf dem obigen Code basiert. Wie Sie sehen können, können Sie bei gedrückter Strg- oder Umschalttaste mehrere Elemente gleichzeitig auswählen.</p><p>Wenn das Select-Tag kein Multiple-Attribut enthält, kann nur ein Element dieser Dropdown-Liste (Zeile) ausgewählt werden.</p><p><img src='https://i0.wp.com/ktonanovenkogo.ru/image/27-06-20130-25-25.png' width="100%" loading=lazy></p><p>Ein Beispiel, bei dem nur ein Element ausgewählt werden kann, finden Sie hier:</p><p>Label Select SelectED Legend-Website</p><h3>Options-Tag-Attribute</h3><br><img src='https://i2.wp.com/ktonanovenkogo.ru/image/27-06-20130-36-11.png' width="100%" loading=lazy><p>In der erstellten Dropdown-Liste (mit Auswahl und Option) können Sie Trennzeichen mit der Überschrift der Gruppen hinzufügen, die sich im Schriftstil von den übrigen Menüelementen unterscheiden.</p><p>Um eine Gruppe aus den Dropdown-Listenelementen zu erstellen, müssen Sie sie in die öffnenden und schließenden Tags des Optgroup-Formulars einschließen und im Optgroup-Eröffnungs-Tag das Label-Attribut schreiben, als Parameter müssen Sie den gewünschten Gruppennamen eingeben.</p><p>Zum Beispiel so:</p><p><img src='https://i1.wp.com/ktonanovenkogo.ru/image/27-06-20130-38-10.png' width="100%" loading=lazy></p><p>Beschriftung auswählen <br> Ausgewählte Legend-Website <br></p><h2>Textbereich - Erstellen eines Textfelds in einem Formular</h2><p>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 darin Text in eine neue Zeile übertragen, der unter Berücksichtigung der vorgenommenen Übertragungen an den Server übertragen wird.</p><p>Um ein mehrzeiliges Textfeld zu erstellen, müssen Sie den öffnenden und schließenden Textbereich registrieren und dazwischen Text hinzufügen, der sichtbar wird, wenn die Seite mit dem Webformular geladen wird. Der Benutzer kann diesen Text dann löschen und seinen eigenen schreiben.</p><p> <form> <textarea rows="3" cols="15" name="textt">Was kannst du uns über dich erzählen?

Wie Sie sehen, ist das Klicken auf den Text zum Aktivieren dieses Elements nutzlos - Sie müssen selbst darauf klicken. Dies ist genau der Stand der Dinge und soll das Tag-Label reparieren. Sie können den Text neben dem Webformularelement anklickbar machen, was zweifellos der Fall ist wird die Benutzerfreundlichkeit verbessern.

Aber wie verknüpft man das HTML-Element des Formulars mit dem Text? Fügen Sie dazu dem Attribut eine ID mit einem eindeutigen Parameter hinzu und umgeben Sie den Text mit den öffnenden und schließenden Label-Tags. Und das ist noch nicht alles. Im öffnenden Label-Tag müssen Sie das For-Attribut registrieren, dessen Parameter genau mit dem ID-Attribut im HTML-Tag des Formularelements übereinstimmen muss. Es stellt sich ungefähr so \u200b\u200bheraus:

Wie Sie jetzt sehen können, können Elemente des Webformulars dank der Verwendung von Label nicht nur durch Klicken darauf, sondern auch durch Klicken auf den Text daneben aktiviert werden.

Fieldset und Legende - die Form in Stücke brechen

Sie haben wahrscheinlich oft gesehen, dass große Formulare in HTML in Gruppen (Fieldset) unterteilt sind, die von einem Rahmen umgeben sind, und jede dieser Gruppen hat ihren eigenen Titel (Legende). Dies geschieht mit nur zwei Tags: Fieldset und Legend. Sie sind gepaart, d.h. Sie müssen ein Öffnen und Schließen haben.

Um eine Gruppe von Komponenten zu erstellen, müssen Sie alle diese Teile in die öffnenden und schließenden Tags des Fieldset einschließen. Um einen Titel (Legende) für diese Gruppe festzulegen, müssen Sie unmittelbar nach dem Öffnen des Feldsatzes eine Struktur aus der öffnenden und schließenden Legende schreiben, zwischen die Sie den Text des Gruppentitels einfügen müssen.

Hier ist ein Beispiel für das Erstellen von Gruppen mit Fieldset und Legend:

Viel Erfolg! Bis bald auf den Seiten der Blog-Site

Du könntest interessiert sein

Wählen Sie die Optionen Option, Textbereich, Beschriftung, Feldsatz, Legende - HTML des Dropdown- und Textfeldformulars aus
Listet in HTML-Code-Tags UL, OL, LI und DL auf
MailTo - Was ist das und wie erstellt man einen Link in HTML zum Senden einer E-Mail?
Wie Farben in HTML- und CSS-Code eingestellt werden, Auswahl von RGB-Schattierungen in Tabellen, Yandex-Ergebnisse und andere Programme
Was ist die HTML-Sprache für Hypertext-Markups und wie wird eine Liste aller Tags im W3C-Validator angezeigt?
So fügen Sie Link und Bild (Foto) in HTML - IMG - und A - Tags ein
Tabellen in HTML - Tabellen-, Tr- und Td-Tags sowie Colspan, Cellpadding, Cellspacing und Rowspan, um sie zu erstellen
Schrift- (Gesicht, Größe und Farbe), Blockquote- und Pre-Tags sind Legacy-Textformatierungen in reinem HTML (kein CSS).
So erstellen Sie einen Hyperlink (A, Href, Ziel leer), öffnen ihn in einem neuen Fenster auf der Site und machen ein Bild zu einem Link im HTML-Code