CODEWITHSUNDEEP
htmlcssdropdown
alamba
alamba

Reputation: 117

Two consecutive HTML dropdown menus rendering issue

I have the following code where I am trying to create two drop down menus; one for the day of the week and other one for the category.

<!DOCTYPE html>
    <html>
    <body>
    <p>Category of the article: 
    <option value="lifestyle">Lifestyle</option>
    <option value="entertainment">Entertainment</option>
    <option value="business">Business</option>
    <option value="social media">Social Media</option>
    <option value="tech">Tech</option>
    <option value="world">World</option></p> <br>
    
    <p>Day of publishing the article: 
    <option value="monday">Monday</option>
    <option value="tuesday">Tuesday</option>
    <option value="wednesday">Wednesday</option>
    <option value="thursday">Thursday</option>
    <option value="friday">Friday</option>
    <option value="saturday">Saturday</option>
    <option value="sunday">Sunday</option></p> <br>
    
    </body>
    </html>

But the page looks like the below image. Can someone help me identify why is this happening?

Output

Upvotes: 0

Views: 102

Answers (2)

oktomus
oktomus

Reputation: 576

You forgot the <select> tag.

<!DOCTYPE html>
    <html>
    <head>
       <title>Titre</title>
    </head>
    <body>
    <p>Category of the article: 
    <select>
      <option value="lifestyle">Lifestyle</option>
      <option value="entertainment">Entertainment</option>
      <option value="business">Business</option>
      <option value="social media">Social Media</option>
      <option value="tech">Tech</option>
      <option value="world">World</option>
    </select></p> <br>
    
    <p>Day of publishing the article: 
    <select>
      <option value="monday">Monday</option>
      <option value="tuesday">Tuesday</option>
      <option value="wednesday">Wednesday</option>
      <option value="thursday">Thursday</option>
      <option value="friday">Friday</option>
      <option value="saturday">Saturday</option>
      <option value="sunday">Sunday</option>
     </select></p> <br>
    
    </body>
    </html>

This code is right in the validator but I'm not sure if you can add <select> in <p>.

See HTML select tag

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167192

Mistakes:

  1. You cannot have any block tags or anything inside <p>.
  2. You missed the <select> tags.

Corrected Code:

<!DOCTYPE html>
<html>
  <body>
    <p>Category of the article:</p>
    <select>
      <option value="lifestyle">Lifestyle</option>
      <option value="entertainment">Entertainment</option>
      <option value="business">Business</option>
      <option value="social media">Social Media</option>
      <option value="tech">Tech</option>
      <option value="world">World</option>
    </select>

    <p>Day of publishing the article:</p>
    <select>
      <option value="monday">Monday</option>
      <option value="tuesday">Tuesday</option>
      <option value="wednesday">Wednesday</option>
      <option value="thursday">Thursday</option>
      <option value="friday">Friday</option>
      <option value="saturday">Saturday</option>
      <option value="sunday">Sunday</option>
    </select>

  </body>
</html>

Upvotes: 1

Related Questions