Tutorial zu HTML-Formular-Tags (4):

Tutorial zu HTML-Formular-Tags (4): Name Der Name des Menüs und der Liste Größe Die Anzahl der anzuzeigenden Optionen Mehrfach Mehrfachauswahl von Elementen in der Liste Wert Ausgewählter Optionswert Standardoption Dateibeispiel: 11-16.htm
Fügen Sie Menüs und Listen in Ihre Seiten ein.
01 <!-- ------------------------------ -->
02 <!-- Dateibeispiel: 11-16.htm -->
03 <!-- Dateibeschreibung: Menü und Liste einfügen-->
04 <!-- ------------------------------ -->
05 <Titel>
06 <Kopf>
07 <title>Menüs und Listen einfügen</title>
08 </head>
09 <Text>
10 <h1>Benutzerbefragung</h1>
11 <Formularaktion=mailto:[email protected] Methode=get ​​Name=investieren>
12 Bitte wählen Sie Ihre Lieblingsmusik:<br>
13 <select name="Musik" size=4 multiple>
14 <option value="rock" Ausgewählt>Rockmusik
15 <option value="pop">Pop
16 <option value="jazz">Jazz
17 <option value="nation">Volksmusik
18 </auswählen><br>
19 Bitte wählen Sie die Stadt aus, in der Sie wohnen:<br>
20 <Name auswählen="Stadt">
21 <option value="beijing" selected>Peking
22 <option value="shanghai">Shanghai
23 <option value="nanjing">Nanjing
24 <option value="guangzhou">Guangzhou
25 </Auswählen>

26 <input type="submit" name="submit" value="Formular übermitteln">
27 </Form>
28 </body>
29 </html> Zeile 13 der Dateibeschreibung definiert, dass die Anzahl der in der Liste angezeigten Elemente 4 beträgt und Mehrfachauswahl möglich ist. Die Zeilen 14 bis 17 definieren die Optionen, wobei „Rockmusik“ die Standardauswahl ist, Zeile 20 definiert die Standardanzahl der Menüs und die Zeilen 21 bis 24 definieren die Optionen, wobei „Peking“ die Standardauswahl ist.

Nehmen Sie nun an, dass Sie dem Formular ein Element wie dieses hinzufügen möchten: „Durchsuchen Sie die Stadt, in der Sie sich befinden.“ Wir sprechen hier nicht von Städten im ganzen Land, es gibt Dutzende von Städten oberhalb der Provinzhauptstädte. Eine Auflistung aller dieser Städte auf der Webseite in Form von Radiobuttons wie oben beschrieben wäre undenkbar. Dann erscheinen Menüs und Listen in den Objekten des Formulars. Schließlich werden Menüs und Listen in erster Linie erstellt, um auf Webseiten Platz zu sparen.
Das Menü ist die platzsparendste Methode. Normalerweise wird Ihnen nur eine Option angezeigt. Wenn Sie auf die Schaltfläche klicken, um das Menü zu öffnen, werden Ihnen alle Optionen angezeigt. Eine Liste kann eine bestimmte Anzahl von Optionen anzeigen. Wenn die Anzahl überschritten wird, wird automatisch eine Bildlaufleiste eingeblendet und der Betrachter kann durch Ziehen der Bildlaufleiste die einzelnen Optionen anzeigen. Mit den Tags <select> und <option> können Menü- und Listeneffekte auf der Seite gestaltet werden.
Grundlegende Syntax01 <select name="name" size=value multiple> 02 <option value="value" selected>Option03 <option value="value">Option04 … 05 </select>
Die Bedeutung dieser Attribute ist in der folgenden Tabelle aufgeführt.
Menü- und Listenmarkierungen beschreiben

<<:  React implementiert eine mehrkomponentige Wertübertragungsfunktion über Conetxt

>>:  So unterstützen Sie ApacheBench mehrere URLs

Artikel empfehlen

MySQL 8.X Installations-Tutorial unter Windows

Zuvor habe ich MySQL 5.7 verwendet, aber da MySQL...

Optimierungsanalyse der Limit-Abfrage in MySQL-Optimierungstechniken

Vorwort Im realen Geschäftsleben ist Paging eine ...

Konkretes Beispiel einer MySQL-Mehrtabellenabfrage

1. Verwenden Sie die SELECT-Klausel, um mehrere T...

Eine kurze Diskussion über die MySQL-Optimierungslösung für große Tabellen

Hintergrund Die Menge neuer Daten in der Geschäft...

Proxy realisiert das Prinzip der bidirektionalen Bindung von Vue3-Daten

Inhaltsverzeichnis 1. Vorteile von Proxy gegenübe...

Verwenden Sie die CSS-Eigenschaft border-radius, um den Bogen festzulegen

Phänomen: Wandeln Sie das Div in einen Kreis, ein...

Reines CSS für eine coole Ladeanimation

Schauen wir uns an, welche Ladeanimationseffekte ...

So installieren und konfigurieren Sie WSL unter Windows

Was ist WSL Zitat aus der Baidu-Enzyklopädie: Das...

ReactJs-Grundlagen-Tutorial - Essential Edition

Inhaltsverzeichnis 1. Einführung in ReactJS 2. Ve...

So stellen Sie MySQL so ein, dass die Groß-/Kleinschreibung nicht beachtet wird

MySQL auf Groß-/Kleinschreibung eingestellt Windo...