# 
## `select` in HTML

The `select` is used to create a drop-down list in HTML. It is used with HTML forms to collect user data; the user is provided with a list of options to choose from. 

Here's an example of a drop-down list created with the `select` element:

<html>
 <head>
 </head>
 <body id="body">
    <form id="myForm">
      <label for="programmmingLang">Choose your favourite programming language:</label>
      <select name="programmmingLang" id="programmmingLang">
         <option value="">None</option>
         <option value="JavaScript">JavaScript</option>
         <option value="Python">Python</option>
         <option value="C#">C#</option>
         <option value="PHP">PHP</option>
      </select>
      
      <br><br>

      <button id="myBtn" type="submit" value="submit">Submit</button> 
    </form>

  
 </body>
</html>

let myForm = document.getElementById('myForm');

myForm.addEventListener('submit', () => {
    document.getElementById('body').style.color= 'green';
    return document.getElementById('body').innerHTML = 'You selection has been recieved';
})




codemirror

Users often fill out forms quickly and omit the select drop-down due to the rush, while some ignore it intentionally. 

To avoid this, a developer needs to make the `select` required; the user won't be able to submit the form without choosing an option from the select dropdown.

## How to make select mandatory in HTML


To make a `select` mandatory with HTML, use the `required` attribute. With the `required` attribute, the user must select a value before submitting the form; if the user refuses to select a value, then the form won't submit. 

Below is a form with a required drop-down list: 



<html>
 <head>
 </head>
 <body id="body">

<form id="myForm">
  <label for="programmingLang">Choose a programming:</label>
    <select name="programmingLang" id="programmingLang" required>
      <option value="">None</option>
      <option value="JavaScript">JavaScript</option>
      <option value="Python">Python</option>
      <option value="c++">c++</option>
      <option value="Java">Java</option>
    </select>

    <br><br>
     <button type="submit" value="submit">Submit</button> 

</form>

</body>
</html>

let myForm = document.getElementById('myForm');

myForm.addEventListener('submit', () => {
    document.getElementById('body').style.color= 'green';
    return document.getElementById('body').innerHTML = 'You selection has been recieved';
})


In **line 8**, the `required` attribute is inserted into the `select` element, which does not submit the form unless the user selects an option. 

Happy coding!

How to make select mandatory in HTML

select in HTML

How to make select mandatory in HTML

`select` in HTML