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

Detailed graphic explanation of mysql query control statements

mysql query control statements Field deduplicatio...

Example of how to quickly build a Redis cluster with Docker

What is Redis Cluster Redis cluster is a distribu...

Several methods of deploying multiple front-end projects with nginx

I have summarized 3 methods to deploy multiple fr...

How to purchase and initially build a server

I haven't worked with servers for a while. No...

How to implement Vue timer

This article example shares the specific code of ...

Detailed explanation of the idea of ​​achieving the point-earning effect with CSS animation

In the recent project, we need to create an effec...

Vue+axios sample code for uploading pictures and recognizing faces

Table of contents Axios Request Qs processing dat...

Sample code for making desktop applications with vue + Electron

1.vue packaging Here we use the vue native packag...

Summary and examples of vue3 component communication methods

The communication modes of vue3 components are as...

What knowledge systems do web designers need?

Product designers face complex and large manufactu...

Use of Linux read command

1. Command Introduction The read command is a bui...

Solve the problem of docker container exiting immediately after starting

Recently I was looking at how Docker allows conta...

Tutorial on downloading, installing and deploying Tomcat to IDEA (with two hot deployment setting methods for IDEA)

Table of contents Tomcat Download Tutorial Tomcat...

A brief discussion on the construction and operation mechanism of the real-time computing framework Flink cluster

Table of contents 1. Flink Overview 1.1 Basic Int...

Mysql5.7.14 installation and configuration method operation graphic tutorial (password problem solution)

This article mainly involves solutions to problem...