1. Select option list
The drop-down list is also a selection type element. The drop-down list can save space on the web page. By default, only one option is displayed. Multiple options will be displayed only when the drop-down button is clicked. For example, it is used when selecting the address below. drop-down list.
The select element in HTML can create a drop-down list, and the options of the drop-down list are implemented by the option element. option is select< A child element of /code>, an option represents an option.
The select element has two commonly used attributes, namely:
multiple: Multiple selections possiblesize: Display several options
option Common attributes include:
selectd: selected by default
Create an HTML page and use select and option to implement a drop-down list. The specific code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<select name="fruits" id="">
<option value="banana">Banana</option>
<option value="apple">Apple</option>
<option value="grape">Grape</option>
</select>
</body>
</html>
Use LiverServer to open the HTML page, the effect is as follows:
By default, only one of the options can be selected, but we can select multiple options by setting the Boolean attribute multiple. The specific code is as follows:
<select name="fruits" id="" multiple> <option value="banana">Banana</option> <option value="apple">Apple</option> <option value="grape">Grape</option> </select>
Refresh the page and select multiple options at the same time. The effect is as follows:
In addition to setting multiple selections, you can also set the number of displayed options through the size attribute. The size attribute is a KV attribute and needs to be specified. The number of options displayed, the specific code is as follows:
<select name="fruits" id="" multiple size="2"> <option value="banana">Banana</option> <option value="apple">Apple</option> <option value="grape">Grape</option> </select>
Refresh the page, the specific effect is as follows:
You can see that two options are displayed by default. Of course, we can also use the selected Boolean attribute to set an option that is selected (displayed) by default on the page. The specific HTML code is as follows:
<select name="fruits" id="" multiple size="2"> <option value="banana">Banana</option> <option value="apple" selected>Apple</option> <option value="grape">Grape</option> </select>
Refresh the page and you can see that the options with the selected attribute set are displayed on the page:
It should be noted that the checked Boolean attribute is used in radio or multi-select boxes to implement the default selected options. The specific code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="/abc">
<div>
Hobby:
<label for="basketball">
<input type="checkbox" id="basketball" name="hobby" value="football"> football
</label>
<label for="football">
<input type="checkbox" id="football" name="hobby" value="basketball"> Basketball
</label>
<label for="reading">
<!--Use checked to indicate the option that is selected by default -->
<input type="checkbox" id="reading" name="hobby" value="reading" checked> Reading
</label>
</div>
<input type="submit" value="Submit button">
</form>
</body>
</html>
Open using LiverServer, you can see that the Read option is selected by default.
2. Use of form elements
We have used the form element many times before. form is usually used as the parent element of the form element; form can treat the entire form as a whole. to perform operations; such as resetting the data of the entire form or submitting the data of the entire form
Common attributes of form are as follows:
action: Request URL for submitting form datamethod: request method, get and post, the default is gettarget: Where to open the URL, the usage is the same as thetargetattribute of the a element
Create an HTML page and use the form element to design a form. The specific code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<div>
<label for="username">
User: <input type="text" id="username" name="username">
</label>
</div>
<div>
<label for="password">
Password: <input type="password" id="password" name="password">
</label>
</div>
<div>
<label for="sex">
<input type="radio" id="sex" value="male" name="sex">Male
</label>
<label for="sex">
<input type="radio" id="sex" value="femle" name="sex">Female
</label>
</div>
<div>
<label for="baskedball">
<input type="checkbox" value="baskedball" id="baskedball" name="hobby">Basketball
</label>
<label for="football">
<input type="checkbox" value="football" id="football" name="hobby">Football
</label>
<label for="reading">
<input type="checkbox" value="reading" id="reading" name="hobby">Reading
</label>
</div>
</form>
</body>
</html>
Open the HTML page in LiverServer, the effect is as follows:
Of course, if we want to reset or submit the form, we need to add Reset and Submit buttons, and add buttons at the bottom of the form form. HTML code, as follows:
<button type="reset">Reset</button> <button type="submit">Submit</button>
Refresh the page, the effect is as follows:
In addition to buttons, we also need to execute the address of our data submission through the attribute action of form. The specific code is as follows:
<form action="/abc"> <!--The intermediate code remains unchanged--> </form>
Refresh the page and click the submit button:
If method is not specified, the default is GET request. You can see the specific data we submitted from the address bar, as shown below:
The differences between GET requests and POST requests are as follows:
Of course, we can also use method to specify the request method used, and use target to decide whether to open a new page. The specific code is as follows:
<form action="/abc" method="post" target="_blank"> <!--The intermediate code remains unchanged--> </form>
Refresh and submit. You can see the specific data we submitted from Network in the browser inspection tool, as shown in the figure below:
