Drop-down lists are also another way to allow people to choose only one choice from a number of alternatives. Since the default option is usually the first item on the list, using the drop-down list can be a safe choice if you know that one option is always preferred over the others. The drop-down list can only be used when the user must pick between choices since it does not provide the user with the option of not selecting something. In HTML 5, the name attribute defines the name of a drop-down list. After a form has been entered, the name attribute in JavaScript is used to refer to elements or form data.
Syntax:
<select> <option value=””>option1</option> <option value=””>option2</option> </select>
<select> is a tag used to construct a dropdown list, as seen in the above code. The <option> tag, which is embedded in the select tag, is an attribute value or attributes for the selection list, with the value representing whether the option is chosen, disabled, or has certain other properties. We can use CSS to show our selection list effects and set positions like this.
Attributes: The following are some of the attributes that are included in the <select> tag
- Name: This attribute is useful for naming a control that will be sent to the server to be detected and to receive necessary value.
- Multiple:The user will pick several values from the selector list if the attribute is set to “multiple.”
- Size: The Size parameter determines the size of the scrolling box that covers the Dropdown list. It’s also useful for highlighting multiple choices from a list.
- Value: This attribute indicates whether a choice in the selection list has been chosen.
- Selected: Selected attributes allow the display of already selected list items from the list at the very beginning of page loads.
- Label: Label attribute works as another approach for labeling options value.
- Disabled: If we want a drop-down list with a disable option, we can use the disabled attribute in the HTML select list.
- onChange:When a user selects a choice from a dropdown list, an event is triggered on item selection.
- onFocus: When the user hovers the mouse over a selection list option to pick it, an event is triggered to select the object.
- Form: This attribute is used to specify one or more similar types to the select field.
- disabled: With the support of this attribute, we will keep our drop-down list hidden from the user.
- required: When filling out a form, we want to make it clear that this field allows the user to choose some value from a list before submitting the form, so in this situation, we define that the user must choose any value from the list.
Examples 1: Below is the code that illustrates a drop-down list with a name attribute.
<!DOCTYPE html> <html>
<body style="text-align:center;">
<h1>GeeksForGeeks Practice</h1>
<h2>GFG Courses</h2>
<form action="/action_page.php">
<label for="course">
Select a course from drop-down list :
</label>
<select name="course" id="course">
<option value="1">
Getting Started with C
</option>
<option value="2">
DSA Self-Paced
</option>
<option value="3">
Complete Interview Preparation
</option>
<option value="4">
Java Collections
</option>
<option value="5">
30 Days Of Code
</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
|
Output:
Output
Example 2:
<!DOCTYPE html> <html>
<head>
<style>
body{
background-color: lightblue;}
h1{
color: green;
text-align: center;
}
h2{
color: yellow;
text-align: center;
}
p{
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<h2>GFG Contest</h2>
<h3>"Coding Question of the Day"</h3>
<p>
Given a sorted deck of cards numbered 1 to N.<br>
1) We pick up 1 card and put
it on the back of the deck.<br><br>
2) Now, we pick up another card,
it turns out the deck..<br><br>
</p>
<form action="/action_page.php">
<label for="course">
Choose a Programming Language :
</label>
<select name="course" id="course">
<option value="1">C++</option>
<option value="2">C</option>
<option value="3">JAVA</option>
<option value="4">Python</option>
<option value="5">C#</option>
</select><br><br>
<input type="submit" value="Select">
</form>
</body>
</html>
|
Output: