Why aren't my buttons showing up?

HTML-CSS
1 
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<!DOCTYPE html>
<main>
  <style scoped>
    h1 {
      text-align: center;
      color: red;
    }
    p {
      text-align: center;
      color: black;
    }
    input text  {
      text-align: center;
      color: blue;
    }
</style scoped>
    <h1 style="color: red;">Survey Form</h1>
    <p>Let us know who your favorite band is!</p>
  <p>Band Name</p>
    <form action="/submit-band-name">
    <input type="text" required placeholder="submit-band-name" id="text">
    <button type="submit">Submit</button></form>
</html>
2

You don’t have a closing <main> tag.
The buttons showed up for me. try closing your page and see if it works.

3

Not the issue, but this is invalid HTML.

Don’t put the attirubtes in the closing tgg – invalid html :wink:

You also don’t have an opening html tag, and nothing should be before the doctype :wink:

4

thank you, i’ll see if it works

5

what do you mean by attributes in the closing tag?

6

you close a tag with </style>, not </style scoped>.

Also, scoped is not an HTML attribute. It’s a vuejs attribute.

7

Try This And Please Never use scoped or inline css!

<!DOCTYPE html>
<html>
<head>
  <title>Survey Form</title>
<style>

main{
  text-align:center;
}

h1 {
      text-align: center;
      color: red;
    }

p {
      
      color: black;
    }

button{
    margin-top:5px;
}

input {
    text-align: center;
}



</style>
</head>

<body>

<main>
 <h1>Survey Form</h1>
  <p>Let us know who your favourite band is!</p>
  <p>Band Name</p>
    <form action="/submit-band-name">
    <input type="text" required placeholder="submit-band-name" id="text">
      <br>
    <button type="submit">Submit</button>
</form>
   </main>
</body>
  
</html>
8

<html> is still not opened

9

You’ve got a good eye Thank you.

10

thank you! this code works with no errors!

1 Like