The select tag in HTML is utilized to make a dropdown rundown of choices that can be chosen. The choice tag contains the worth that would be utilized when chosen. The default worth of the select component can be set by utilizing the ‘chose’ property on the necessary choice. This is a boolean trait. The choice that is having the ‘chose’ characteristic will be shown as a matter of course on the dropdown list. We can even set the chose property later the page is stacked with the assistance of Javascript.
HTML structures are the most generally utilized method for gathering data from a website page.
The HTML structure has various components, for example,
- Input
- choice
- name
- fieldset
- Optgroup
- textarea
- select, etc.
It additionally has a large group of properties that can be contained by any of its sub components.
Instances of such characteristics include:
- target
- strategy
- activity
- autocomplete, and that’s just the beginning.
These work together to give us the consistent capacity to accumulate information from clients of our site.
Table of Contents
What is the <select> component in HTML?
This is a component that is utilized in structures. It prompts the client to browse a bunch of choices as they wish.
Syntax:
<option value="value" selected>Option Name</option>
The <select> label utilizes the <option> tag to introduce a bunch of accessible decisions to the client. The test here is that, of course, the tag is shown on the site page with the principal choice.
Model 1: This model represents the utilization of the chose quality by indicating the pre-chosen choice that will be shown first starting from the drop list.
<!DOCTYPE html><html> <head> <title>Set the default value for <select> element</title></head> <body> <h1 style="color: green">GeeksforGeeks</h1> <b> How to set the default value for an HTML <select> element? </b> <p>The Starter option will be selected by default</p> <p>Choose your plan below:</p> <select name="plan" id="plan"> <option value="free">Free</option> <option value="starter" selected>Starter </option> <option value="professional">Professional</option> <option value="corporate">Corporate</option> </select></body> </html> |
Output:
No
Model 2: This can likewise be utilized to add messages like ‘Select an Option’ in the rundown. This choice would have the covered up and handicapped property notwithstanding chose.
<!DOCTYPE html><html> <head> <title>Set the default value for <select> element</title></head> <body> <h1 style="color: green">GeeksforGeeks</h1> <b>How to set the default value for an HTML <select> element? </b> <p>The Select an Option would be shown by default.</p> <p>Choose your plan below:</p> <select name="plan" id="plan"> <option value="none" selected disabled hidden>Select an Option</option> <option value="free">Free</option> <option value="starter">Starter </option> <option value="professional">Professional</option> <option value="corporate">Corporate</option> </select></body> </html> |
Output:
No
With HTML, you can easily create a simple drop down list of items to get user input in HTML forms. Use the <select> element for this, which is a select box, also called drop down box, with option to list down items.
Also, you can set the default value from the dropdown list of items in HTML forms. For that, add selected in the <option> tag for the value you want to preselect.
Example
You can try to run the following code to learn how to set the default value for HTML <select> element −
<!DOCTYPE html> <html> <head> <title>HTML Select Element</title> </head> <body> <p> Select any one:</p> <form> <select name = "dropdown"> <option value = "Java">Java</option> <option value = "Discrete Mathematics" selected >Discrete Mathematics</option> <option value = "Chemistry">Chemistry</option> </select> </form> </body> </html>
Also Read: How to Change Root Password in Kali Linux?