当前位置：网站首页>Educoder web exercises - interactive elements

Educoder web exercises - interactive elements

2022-06-21 12:33:00 【It's a deer】

Interaction elements

The first 1 Turn off ： Concepts related to interaction elements

Related knowledge

progress Elements

progress Element is a state interaction element . Used to indicate the progress of a task on the page .progress The element has max and value Two attributes ：

max: Indicates the total number of tasks , The default value is 1.
value: Indicates the number of completed tasks .

Application , There can be three situations . Usage examples 1： <progress max=100 value=20></progress> Usage examples 2： <progress value=0.5></progress> Usage examples 3： <progress></progress> Example 2 in , No settings max attribute , The default is 1; Example 3 in max and value None of the properties are set , Then the progress bar is in the left and right free sliding state . When the progress bar needs to change dynamically , Need to pass through JavaScript To achieve .

meter Elements

meter Element is a state interaction element . It can be used for the proportion of candidates in the voting system 、 Test score statistics, etc . meter The element has the following attributes ：

form： Regulations meter One or more forms to which the element belongs , Its value is the form label form Defined by the id name .
value： Set or get meter The current value of the element , The value must be between min and max Value .
max: Set up meter The maximum value of the element , The default is 1.
min: Set up meter The minimum value of the element , The default is 0.
high: Set too high a threshold , When value Greater than high And less than max when , Show too high color .
low： Set the threshold too low , When value Less than low And greater than min when , Show too low color .
optimum: Set the optimal value .

Usage examples ：

<!DOCTYPE html>
<html>
    <head> 
        <meta charset="UTF-8">
    </head>
    <body>
		<meter></meter> Without attributes meter<br/>
		<meter value="0.6"></meter> Only value Attribute meter<br/>
		<meter value="40" min="10" low="30" high="80" max="100" ></meter>value Be situated between low and high Between , Metering bar green <br/>
		<meter value="20" min="10" low="30" high="80" max="100" ></meter>value Less than low Of meter, The metering bar is yellow <br/>
		<meter value="90" min="10" low="30" high="80" max="100" ></meter>value Greater than high Of meter, The metering bar is yellow <br/>
		<meter value="40" min="10" low="30" high="80" max="100" optimum="90"></meter>value Be situated between low and high Between , but optimum Be situated between low and high outside , The metering bar is yellow <br/>
		<meter value="20" min="10" low="30" high="80" max="100" optimum="60"></meter>value Be situated between low and high outside , but optimum Be situated between low and high Between , The metering bar is yellow <br/>
		<meter value="20" min="10" low="30" high="80" max="100" optimum="90"></meter>value and optimum All between low and high outside , The metering bar is red <br/>
		<meter value="90" min="10" low="30" high="80" max="100" optimum="20"></meter>value and optimum All between low and high outside , The metering bar is red <br/>
	</body>
</html>

The effect of running is shown in the figure below ： meter design sketch

details/summary Elements

details Element is used to describe the details of a document or part of a document . In a specific browser ( Such as Chrome、 Safari ） It can produce the interactive effect of unfolding and folding like an accordion .summary Elements are usually used as details The title part of the element , Nested in details Elements in . When applied ,details The title content in the element is visible , When you click the title, it will display / hide details Details in the element . meter The main attribute of an element is open:

open: Used to control the details Whether the element is displayed , The value is true when , The child elements inside the element are expanded and displayed , When open The property value is false when , Its internal child elements are shrunk and do not show . Default not to show . Usage examples ：
```
<details> 
 <summary> Click to display / Hide details </summary>
 Here is a detailed introduction details The knowledge involved in the element 
</details>
```

Usage examples ：

menu Elements

menu Element is used to create context 、 Toolbars and pop-up menus . Current browsers only support creating context menus .menuitem Element is used to define menu items menu Element mainly has the following two attributes :

label: Used to set the visible label of the menu .
menu： Used to set the type of menu , The value is context Represents the context menu , The value is toolbar Represents the toolbar , The value is popup Represents a pop-up menu . Usage examples ：
```
 Right click 
<menu type="context" id="myMenu">
 <menuitem label=" Click on the " onclick="alert(' You clicked on me ')" ></menuitem>
</menu>
```
command Elements
command Element is used to define various types of command buttons . Use the marked icon Property to add a picture , And realize the picture button effect ; in addition , Change the... In the tag “type” Property value , You can also define button types . command Elements mainly have the following attributes ：
icon: Specified to represent command The image of the element .
label： Set regulations command The visible label of the element .
type： Set up command Type of element , Can take checkbox（ check ）、radio（ The radio ）、command（ Operate the button ）. Default access “command”.
radiogroup： Set up radio Group name of type button .

Usage examples ：

<command onclick="alert(' You clicked on me ')">   Please click on the  </command>

At present, mainstream browsers can't support menu Elements and command Elements , That is to say FireFox The browser can support partial display .

Customs clearance knowledge

1、 In the following options , The element used to display the progress effect is （A）.
A、progress
B、meter
C、details 
D、datalist

2、 In the following options ,（C） No meter Attribute of element .
A、form
B、value
C、open
D、max

3、 About meter Attribute of element , The following statement is correct （B）.
A、high Used for setting up meter The maximum value of the element .
B、max Used for setting up meter The maximum value of the element .
C、low Used for setting up meter The minimum value of the element .
D、optimum Used for setting up meter The current value of the element .

4、< details > The element is HTML5 New elements , Used to describe the details of the document .（A）
A、 correct 
B、 error 

5、 In a container ,< command > Element is used to create context 、 Toolbars and pop-up menus .（B）
A、 correct 
B、 error

The first 2 Turn off ：progress Elements

Related knowledge

Setting of progress bar

HTML5 Interaction elements in progress A progress bar can be displayed in the web page , This element has two attributes , attribute max Indicates the total number of tasks , attribute value Indicates the current number of tasks .

Programming requirements

In the editor on the right Begin - End Supplement code in the area , The specific requirement is ：

Application HTML5 Design a progress bar for the interaction elements in (<progress>).
progress The description text between labels is “ Progress display ”.
The total number of tasks is set to 100, The current number of tasks is 30.

Customs clearance code

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <title>progerss Use of elements </title>
 </head>
 <body>
 	 Download progress ：
   <!-- ********* Begin ******* -->
    <progress max="100" value="30"> Progress display </progress>
   <!-- ********* End ********* -->
 </body> 
</html>

The first 3 Turn off ：meter Elements

Related knowledge

meter Elements and attributes

HTML5 Interaction elements in meter The measurement bar can be displayed in the web page , The main attributes of this element are ：

value： Current value
max: Maximum
min: minimum value
high:： High threshold
low： Low threshold
optimum: optimal value

Programming requirements

In the editor on the right Begin - End Supplement code in the area , The specific requirement is ：

Application HTML5 Two measurement bars are designed for the interaction elements in (<meter>).
The current value of the first measurement bar is 60, The maximum value is 100, The minimum value is 0
The current value of the second measurement bar is 30, The maximum value is 100, The minimum value is 0, High threshold is 90, The low threshold is 50
The first measurement bar and the second measurement bar are displayed in two lines .

Customs clearance code

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <title>meter Use of elements </title>
 </head>
 <body>
 	 Display measures ：<br/>
   <!-- ********* Begin ******* -->
    <meter value="60" max="100" min="0"></meter>
    <br>
    <meter value="30" max="100" min="0" high="90" low="50"></meter>
   <!-- ********* End ********* -->
</html>

The first 4 Turn off ：details/summary Elements

Related knowledge

details/summary Element settings

HTML5 Interaction elements in details You can describe the details of a document or part of a document in a web page ,summary Element can be set details The title content you see when folding .

Programming requirements

In the editor on the right Begin - End Supplement code in the area , The specific requirement is ：

Application HTML5 Design a page effect with folded and expanded content .(<details>).
details When elements are folded , The title displayed is “ The third chapter ”(<summary>)
details When the element is expanded , The details consist of three paragraphs , The first paragraph reads “3.1 Structural elements ”; The second paragraph reads “3.2 Page node ”; The third paragraph reads “3.3 Interaction elements ”.()

Customs clearance code

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <title>details/summary Elements </title>
 </head>
 <body>
   <!-- ********* Begin ******* -->
    <details>
      <summary>
         The third chapter 
      </summary>
      <p>3.1 Structural elements </p>
      <p>3.2 Page node </p>
      <p>3.3 Interaction elements </p>
    </details>
    <!-- ********* End ********* -->
 </body> 
</html>