HTML Learning Summary 8

1. Create a list

For situations that involve a lot of options, you can consider the list and also become a menu. The list can contain as many options as possible, and only takes up a small amount of space on the form.

To create a list, you can start with a double-sided <select> marker. In which you use the <option> tag for each selection. The text you want to display in the list is placed between the start and end <option> tags. For example, you might look like this:

<p>color:<select name= "Colors" size= "1" >

<option>Red</option>

<option>Blue</option>

<option>Green</option>

<option>Yellow</option>

</select></p>

By default, the form result returns the selection text, and if you want to return different content, you can include the Value property in the Start option tag.

To display the list as shown, you can enclose a set of options in the <optiongroup> tag, and for each option group, you can use the Label property to define the text of the header file. The following is the code for the list shown:

<p>select Your printer model:

<select name= "Printers" size= "1" >

<optgroup label= "Inkject" >

<option>superjet 1400</option>

<option>superjet 1405</option>

<option>superjet 1405</option>

</optgroup>

<optgroup label= "Laser" >

<option>superlaser Value edition</option>

<option>superlaser pro</option>

<option>superlaser plus</option>

</optgroup>

</select></p>

2. HTML5 added input type

HTML5 provides some input types that make the form more aesthetically pleasing. If the user's browser does not support these types, they will be displayed as text areas, so you can use them freely for these types without worrying about the upward compatibility issue.

The spin box is used to increase the value of the number:

　　

　　

The previous spin box was created using the following code

<input type= "Number" name= "copies" min= "0" max= "" "step=" 1 "value=" 1 ">

Min and Max control the minimum and maximum respectively, and the Step property specifies that the value is incremented or decreased each time the user clicks the up or down arrow button. The Value property defines the default value.

The slider is a slider you can swipe from one side to move to the other side. Its type is range, and its properties are almost the same as the rotation box.

　　

<input type= "Range" name= "copies" min= "1" max= "4" step= "1" value= "1" >

For a standard date, use type= "date". This allows the user to select a specified date from the calendar. You can also use any of the following types to select a different date or time-related selection

　　　

HTML Learning Summary 8