Question 207581 in Html Question posted in
Some basic documentation can be found here.

how can I make a drop-down menu in html

By using the <select> and <option> tags I am finding it extremely difficult to make this example drop down list/menu in my HTML SoloLearn intro course

It’s asking me to :

  1. Add a drop-down menu using the <select> tag to offer your customers more than one <option>. Insert the drop-down menu inside the form container tag, right below the h2 heading.

My initial code was this :

<!DOCTYPE html>

<head>
  <title>Product Name</title>
</head>

<body>
  <h1>New Awesome Product</h1>
  <img src="https://blob.sololearn.com/courses/np.png">
  <!-- explanation of the core product-->
  <p>Introducing our <strong>latest product</strong>, designed to make your life <em>easier</em> and <u>more efficiant.</u></p>
  <ul>
    <li>Feature 1</li>
    <li>Feature 2</li>
    <li>Feature 3</li>
  </ul>
  <form>
    <h2>Order now!</h2>

    <label>Name:</label>
    <input type="text" id="nm"><br>
    <br>
    <label>Email:</label>
    <input type="text" id="em"><br>
    <br>
    <button>Submit</button>
  </form>
</body>

</html>

I tried using ChatGPT and I ask for some html code that includes a drop list list menu using the <select> and <option> tags. then I asked it to Make a drop down menu in html that lets users know about sizes and colors and then I finally asked it to include the <form> </form> tags and now my html code is :

<!DOCTYPE html>
<html>
<head>
  <title>Product Name</title>
</head>

<body>
  <h1>New Awesome Product</h1>
  <img src="https://blob.sololearn.com/courses/np.png">
  <!-- explanation of the core product-->
  <p>Introducing our <strong>latest product</strong>, designed to make your life <em>easier</em> and <u>more efficiant.</u></p>
  <ul>
    <li>Feature 1</li>
    <li>Feature 2</li>
    <li>Feature 3</li>
  </ul>
  <form>
    <h2>Order now!</h2>
    <label for="size">Size:</label>
    <select id="size" name="size">
      <option value="small">Small</option>
    </select>

    <label for="color">Color:</label>
    <select id="color" name="color">
      <option value="red">Red</option>
    </select><br>
    <br>
    <label>Name:</label>
    <input type="text" id="nm"><br>
    <br>
    <label>Email:</label>
    <input type="text" id="em"><br>
    <br>
    <button>Submit</button>
  </form>
</body>

</html>
Tags:

2

Answers


  1. 0

    You just need to use <select> and <option> tag for that.

    Snippet for using and 

    <!-- All of your options would be inside the select tag -->
<select> 
<!-- Add you options in option tag -->
<option value="option1"> Option 1 </option>
<-- here value can be used to capture particular option provided -->
<option value="option2"> Option 2 </option>
</select>

    Checkout this code:

      <label for="features">Choose a feature:</label>
  <select name="features">
    <option value="feature1">Feature 1</option>
    <option value="feature2">Feature 2</option>
    <option value="feature2">Feature 3</option>
  </select>

    For more reference, visit w3schools or MDN

    The complete code would be

    <!DOCTYPE html>

<head>
  <title>Product Name</title>
</head>

<body>
  <h1>New Awesome Product</h1>
  <img src="https://blob.sololearn.com/courses/np.png">
  <!-- explanation of the core product-->
  <p>Introducing our <strong>latest product</strong>, designed to make your life <em>easier</em> and <u>more efficiant.</u></p>
  <ul>
    <li>Feature 1</li>
    <li>Feature 2</li>
    <li>Feature 3</li>
  </ul>
  <form>
    <h2>Order now!</h2>
    <label for="features">Choose a feature:</label>
    <select name="features">
      <option value="feature1">Feature 1</option>
      <option value="feature2">Feature 2</option>
      <option value="feature2">Feature 3</option>
    </select>
    <label>Name:</label>
    <input type="text" id="nm"><br>
    <br>
    <label>Email:</label>
    <input type="text" id="em"><br>
    <br>
    <button>Submit</button>
  </form>
</body>

</html>

    The complete code would be

    Login or Signup to reply.
  2. 0 
    To create a dropdown use simply <select> and <option>

`<select name="document-list">
      <option value="pan">PAN Card</option>
      <option value="aadhar">Aadhar Card</option>
      <option value="dl">Driving License</option>
</select>`

This will simply create a dropdown for you and can style the way you want.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search