Skip to content
Related Articles

Related Articles

How to specify that an option should be pre-selected when the page loads in HTML5?
  • Last Updated : 17 Mar, 2021

The <option> tag defines an option in a select list. The <option> tag is generally used with the value attribute to specify which value should be sent to the server for further processing. When a drop-down list is created using the <select> element, the first option or the first choice defined by the <option> tag is seen as the selected choice. 

Example 1: The following example demonstrates that the first option will be pre-selected.

HTML




<!DOCTYPE html>
<html>
  <head>
    <style>
      #container {
        margin: 0 auto;
        height: 300px;
        width: 650px;
        border: 5px solid black;
        background-color: rgb(104, 241, 104);
        opacity: 0.5;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
  
      .courses {
        height: 60px;
        width: 130px;
        border: 2px solid black;
        font-family: cursive;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <h1 id="heading1">
        Welcome to GeeksforGeeks
      </h1>
      <select class="courses">
        <option value="tag">Choose Course</option>
        <option value="Option A">Python</option>
        <option value="Option B">DSA</option>
        <option value="Option C">C++</option>
        <option value="Option C">Java</option>
      </select>
    </div>
  </body>
</html>

Output: The first option “Choose Course” is pre-selected by default. But this is just not limited, we can also specify that any other option should be pre-selected when the page loads in HTML5. This can be done using the “selected” attribute. This is demonstrated in the following example.

pre-selected

Example 2: The following example demonstrates pre-selecting some other option using the selected attribute.

HTML




<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
    <style>
      #container {
        margin: 0 auto;
        height: 300px;
        width: 650px;
        border: 5px solid black;
        background-color: rgb(104, 241, 104);
        opacity: 0.5;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
  
      .courses {
        height: 60px;
        width: 130px;
        border: 2px solid black;
        font-family: cursive;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <h1 id="heading1">
        Welcome to GeeksforGeeks
      </h1>
      <select class="courses">
        <option value="tag">Choose Course</option>
        <option value="Option A">Python</option>
        <option value="Option B" selected>DSA</option>
        <option value="Option C">C++</option>
        <option value="Option C">Java</option>
      </select>
    </div>
  </body>
</html>

Output: The third option “DSA” is pre-selected. This is due to the use of the “selected” attribute that has been specified in the option tag of “DSA”.  We can pre-select any option by just specifying the selected attribute in its respective option tag.




My Personal Notes arrow_drop_up
Recommended Articles
Page :