Adding a Selection Control
In HTML you can add drop-down list to your Web page by using a selection control. You can select only one option at a time from the drop-down list. The selection control includes <select>, <option>, and <optgroup> tags. The <select> tag creates a drop-down list to accept a user input from a list of items; whereas, the <option> tag defines an option in the drop-down list. The important attribute in the <option> tag is the value attribute, which specifies the value to be sent to a Web server. The <optgroup> tag helps to group related choices, when you have a long list of option to select from the drop-down list created using the <select> tag.
Let’s do the following steps to add a selection control:
<!DOTYPE html>
<head>
<title>Adding a Selection Control</title>
</head>
<body>
<center>
<h2>Example of selection Control </h2>
<form>
<select>
<optgroup label=”Computers”>
<option value=”animate”>Animation</option>
<option value=”infotech”>Information Technology</option>
<option value=”media”> Multimedia</option>
</optgroup>
<optgroup label=”Science and Nature”>
<option value=”bio”>Biology</option>
<option value=”chem”>Chemistry</option>
<option value=”physics”>Physics</option>
</optgroup>
</form>
</center>
</body>
</html>
Save the document with the name SelectionControl.html and open on browser.
Note: In the previous section, you learned about the HTML controls. Let’s now learn about new form elements, which are introduced in HTML 5. Go through next button: