Formulário de pesquisa - Criar um formulário de pesquisa

Conte-nos o que está acontecendo:
Nesse formulário de pesquisa precisa ser igual ao do https://survey-form.freecodecamp.rocks/

Desafio: Formulário de pesquisa - Criar um formulário de pesquisa

Link para o desafio:

Oi, @DavdTheItGuy! Não. Não precisa ser igual. Basta seguir as orientações das “histórias de usuário”. Bons estudos! :smiley:

Conte-nos o que está acontecendo:
o meu quarto input não tá funcionando

Seu código até o momento

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <title>Pesquisa</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
      <h1 id="title">Lojinha tech do Gopher</h1>
      <p id="description">Dê um GO na sua casa</p>
    </header>
    <main>
      <h2>Nos ajude a melhorar nossos Go Products</h2>
      <form id="survey-form" method="post">
        <fieldset>
          <legend>Seus dados</legend>
          <p>Não se preocupe! Seus dados estão seguros conosco!<br>
          Para saber mais acesse nossa <a href="#">política de privacidade</a></p>
          <label for="name">Digite seu nome: </label>
          <input id="name" type="text" placeholder="Seu nome..." required><br>
          <label for="email">Digite seu email: </label>
          <input id="email" type="email" placeholder="Seu email..." required><br>
          <label for="number">Digite sua idade: </label>
          <input id="number" type="number" placeholder="Sua idade..." min="18" max="125">

        </fieldset>
        <input type="submit">
      </form>
    </main>
  </body>
</html>
  
/* file: styles.css */

body {
  background: linear-gradient(90deg, #151a86, #9297fd, #9297fd, #151a86);
  color: #ffffff;
  font-family: sans-serif;
}

header {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/f/f0/The_Go_Gopher.jpg);
  color: #151a86;
  font-size: 25px;
  font-family: Impact;
  width: 1200px;
  margin: 0 auto;
  text-align: center;
  border: 5px solid;
}

#description {
  padding-bottom: 50px;
}

fieldset {
  border: 7px ridge #fff;
}
fieldset p {
  margin: 2px 0;
}

a {
  color: rgb(233, 221, 252);
}

input {
  margin: 3px;
}

input[type="submit"] {
  margin: 5px 2px;
}

Informações de seu navegador:

Agente de usuário: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

Desafio: Formulário de pesquisa - Criar um formulário de pesquisa

Link para o desafio:

Oi, @DavdTheItGuy. Não funcionando, neste caso, significa não estar enviando as informações para algum lugar? Se for isso, é normal. Este é apenas um ambiente de teste. O formulário que você criou não registrará as informações colocadas nele.
O importante é que todos os testes estejam passando. Bons estudos! :smiley:

Certo, mas quando eu coloco um input do tipo number eu só consigo colocar ou apenas o min, ou apenas o max, não consigo colocar os dois, porquê o formulário fica bugado. Um exemplo:

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <title>Pesquisa</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
      <h1 id="title">Lojinha tech do Gopher</h1>
      <p id="description">Dê um GO na sua casa</p>
    </header>
    <main>
      <h2>Nos ajude a melhorar nossos Go Products</h2>
      <form id="survey-form" method="post">
        <fieldset>
          <legend>Seus dados</legend>
          <p>Não se preocupe! Seus dados estão seguros conosco!<br>
          Para saber mais acesse nossa <a href="#">política de privacidade</a></p>
          <label for="name">Digite seu nome: </label>
          <input id="name" type="text" placeholder="Seu nome..." required><br>
          <label for="email">Digite seu email: </label>
          <input id="email" type="email" placeholder="Seu email..." required><br>
          <label for="number">Digite sua idade: </label>
          <input id="number" type="number" placeholder="Sua idade..." required min="18" max="125">
        </fieldset>
        <input type="submit">
      </form>
    </main>
  </body>
</html>
body {
  background: linear-gradient(90deg, #151a86, #9297fd, #9297fd, #151a86);
  color: #ffffff;
  font-family: sans-serif;
}

header {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/f/f0/The_Go_Gopher.jpg);
  color: #151a86;
  font-size: 25px;
  font-family: Impact;
  width: 1200px;
  margin: 0 auto;
  text-align: center;
  border: 5px solid;
}

#description {
  padding-bottom: 50px;
}

fieldset {
  border: 7px ridge #fff;
}
fieldset p {
  margin: 2px 0;
}

a {
  color: rgb(233, 221, 252);
}

input {
  margin: 3px;
}

input[type="submit"] {
  margin: 5px 2px;
}

é um bug do meu código ou alguma coisa :grey_question:

Testei seu HTML aqui e não tive bugs. Pode mandar alguma imagem que mostre o bug que você menciona?

Nessa hora você pode ver na linha 26 que eu coloquei apenas o atributo min


Agora eu coloquei o atributo max

Nota: o código é o mesmo.

Basicamente o input de idade parece ficar menor quando coloco min e max. Mas algo estranho é que se eu deixar apenas um atributo (min ou max) fica normal.