HTML Form Tag Tutorial (4):

HTML Form Tag Tutorial (4): name The name of the menu and list size The number of options to be displayed multiple Multiple selections of items in the list value Option value selected Default option File example: 11-16.htm
Insert menus and lists into your pages.
01 <!-- ------------------------------ -->
02 <!-- File example: 11-16.htm -->
03 <!-- File Description: Insert menu and list-->
04 <!-- ------------------------------ -->
05 <title>
06 <head>
07 <title>Insert menus and lists</title>
08 </head>
09 <body>
10 <h1>User Survey</h1>
11 <Form action=mailto:[email protected] method=get name=invest>
12 Please select your favorite music:<br>
13 <select name="music" size=4 multiple>
14 <option value="rock" Selected>Rock music
15 <option value="pop">Pop
16 <option value="jazz">Jazz
17 <option value="nation">Folk Music
18 </select><br>
19 Please select the city where you live:<br>
20 <select name="city">
21 <option value="beijing" selected>Beijing
22 <option value="shanghai">Shanghai
23 <option value="nanjing">Nanjing
24 <option value="guangzhou">Guangzhou
25 </select>
26 <input type="submit" name="submit" value="Submit form">
27 </Form>
28 </body>
29 </html> Line 13 of the file description defines that the number of items displayed in the list is 4, and multiple selections are possible. Lines 14 to 17 define the options, with "Rock Music" being the default selection, line 20 defines the default number of menus, and lines 21 to 24 define the options, with "Beijing" being the default selection.

Suppose now you want to add an item like this to the form: Browse the city you are in. We are not talking about cities across the country here, there are dozens of cities above provincial capitals. It would be unthinkable to list all these cities on the web page in the form of radio buttons as mentioned above. Then menus and lists appear in the form's objects. After all, menus and lists are created primarily to save space on web pages.
The menu is the most space-saving method. Under normal circumstances, you can only see one option. You can see all the options after clicking the button to open the menu. A list can display a certain number of options. If the number is exceeded, a scroll bar will automatically appear and the viewer can view each option by dragging the scroll bar. The <select> and <option> tags can be used to design menu and list effects on the page.
Basic syntax01 <select name="name" size=value multiple> 02 <option value="value" selected>Option03 <option value="value">Option04 … 05 </select>
The meanings of these attributes are shown in the following table		 Menu and list markers describe

<<:  How to make ApacheBench support multi-url

>>:  The role and opening of MySQL slow query log

Recommend

How to create a stylish web page design (graphic tutorial)

"Grand" are probably the two words that ...

Solve the problem of VScode configuration remote debugging Linux program

Let's take a look at the problem of VScode re...

Detailed explanation of custom instructions for Vue.js source code analysis

Preface In addition to the default built-in direc...

How to solve the problem of zabbix monitoring causing Chinese garbled characters in the graphical interface due to PHP problems

Solve the problem of Chinese garbled characters i...

Introduction to MySQL role functions

Table of contents Preface: 1. Introduction to rol...

How to configure the My.ini file when installing MySQL5.6.17 database

I recently used the MySql database when developin...

Detailed explanation of for loop and double for loop in JavaScript

for loop The for loop loops through the elements ...

6 Ways to Elegantly Handle Objects in JavaScript

Table of contents Preface 1. Object.freeze() 2. O...

How to deploy Spring Boot using Docker

The development of Docker technology provides a m...

Detailed explanation of Vue two-way binding

Table of contents 1. Two-way binding 2. Will the ...

Vue Page Stack Manager Details

Table of contents 2. Tried methods 2.1 keep-alive...

MySQL learning notes help document

View system help help contents mysql> help con...

Detailed explanation of MySQL joint query optimization mechanism

Table of contents MySQL federated query execution...

Detailed explanation of the process of installing msf on Linux system

Or write down the installation process yourself! ...

Nginx installation and environment configuration under Windows (running nginx as a service)

The first and most important step is how to insta...