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

Conte-nos o que está acontecendo:
Estou tentando colocar o "Onde você conheceu a freeCodeCamp alinhado em linha reta, ja tentei tudo e nao consigo, alguem me da uma luz por favor!!

Seu código até o momento

<!-- file: index.html -->
<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8'>
    <link rel='stylesheet' href='styles.css'/>
  <title>Formulario teste</title>
</head>
<body>
<form id='survey-form'>
  <h1 id='title'>Formulário teste freeCode</h1>
  <p class='description' id='description'> Este vai ser um formulário teste do site freeCode</p>
  <label id='name-label'>
    Nome: <input placeholder='Coloque seu nome' id='name' type='text' required>
  </input>
  <label id='email-label'>
    Email: <input placeholder='Coloque seu email' id='email' type='email' required>
  </input>
   <label id='number-label'>
    Idade: <input placeholder='Idade' id='number' type='number' min='10' max='120' required>
  </input>
  <label class='selecione' id='dropdown'>Onde você conheceu a freeCodeCamp?
  <select id='dropdown' name='dropdown'>
      <option value=''>Selecione um</option>
      <option value='1'>Pelo google</option>
      <option value='2'>Pelo youtube</option>
      <option value='3'>Por indicação</option>
      </select>

</body>
/* file: styles.css */
body {
  weidth: 100px;
  heigth: 100vh;
  font-family: Tahoma;
  margin: 0;
  padding: 2;
}
h1, p {
  padding: 5;
  weidth: 10;
  margin: 5px auto;
  text-align: center;
}
form {
  width: 80vw;
  max-width: 500px;
  min-width: 300px;
  margin: 5 auto;
  padding: 10;
}
label {
  width: 0;
  display: block;
  margin: 0.5rem 0;
  padding: 0;

.description {
  font-style: italic;
}
.selecione {
    
}

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/114.0.0.0 Safari/537.36 Edg/114.0.1823.67

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

Link para o desafio:

Oi, @caramanicomatheus ! Boas-vindas ao freeCodeCamp.
Pergunta, o que você quer dizer é isso?
image
Se a ideia é colocar toda a pergunta na mesma linha, o problema é a width que você colocou inicialmente, 0, no seletor label no CSS. Experimente aumentar o valor para, por exemplo, 400px. Espero ter ajudado. Bons estudos! :smiley:

Conte-nos o que está acontecendo:
consegui mudar para isso também, agora queria centralizar tudo, como consigo fazer ?

Seu código até o momento

<!-- file: index.html -->
<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel='stylesheet' href='styles.css'/>
  <title>Formulario teste</title>
</head>
<body>
  <div>
   <main>
<form id='survey-form'>
  <h1 id='title'>Formulário teste freeCodeCamp</h1>
  <p id='description'> Este vai ser um formulário teste do site freeCodeCamp</p>
  <label id='name-label'>
    Nome: <input placeholder='Coloque seu nome' id='name' type='text' required>
  </input>
  <label id='email-label'>
    Email: <input placeholder='Coloque seu email' id='email' type='email' required>
  </input>
   <label id='number-label'>
    Idade: <input placeholder='Coloque sua idade' id='number' type='number' min='10' max='120' required>
  </input>
  <label class='selecione' id='dropdown'>Onde você conheceu a freeCodeCamp?
  <select id='dropdown' name='dropdown'>
      <option value=''>Selecione um</option>
      <option value='1'>Pelo google</option>
      <option value='2'>Pelo youtube</option>
      <option value='3'>Por indicação</option>
      </select>
</main>
</div>
</body>
/* file: styles.css */
body {
  background-image: url(https://th.bing.com/th/id/R.9460f9e3781cc0bcdf1da80cfb544fb5?rik=o%2fiJuG%2fFHmFBkw&pid=ImgRaw&r=0);
  weidth: 100px;
  heigth: 100vh;
  font-family: Tahoma;
  margin: 0;
  padding: 2;
  color: white;
}
h1, p {
  padding: 5;
  weidth: 10;
  margin: 5px auto;
}
h1{
  opacity: 70%;
  font-size: 22
}
p {
  opacity: 70%;
  font-size: 12px;
}
div {
  background-color: #536c8d;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  max-width: 500px;
}
form {
  text-align: center;
  width: 400vw;
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
  padding-bottom: 2em;
}
input {
  margin: 1 auto 0;
  height: 23px;
  min-width: 400px;
}
.selecione {
  height: 450px;
  width: 100%;
  margin: 1;
  min-width: 500px;
}
label {
  width: 0;
  display: block;
  margin: 10px 0 0 0;
  padding: 0;
  font-size: 12;
}
p {
  font-style: italic;
}

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/114.0.0.0 Safari/537.36 Edg/114.0.1823.67

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

Link para o desafio:

Tem um problema nas palavras width e height no seletor de body no CSS. No seletor de label, você ainda está mantendo width: 0; o que está impedindo os labels de centralizar. Você pode simplesmente retirar essa linha e colocar o valor das margens laterais (o segundo valor da sequência de margin) como auto. Veja se ajuda na resolução.

deu certo sim, muito obrigado!
Se não for pedir muito tenho outra dúvida, queria aumentar o tamanho do meu elemento select e por todos os placeholders e o select também embaixo dos meus textos, como eu conseguiria fazer isso? já estou tentando a um tempo e não consegui ainda.

Você diz apenas o menu com as opções?

Sim, o nome, idade e etc… queria que onde seria a resposta ficasse embaixo do das perguntas e com o de selecionar a mesma coisa

No caso dos label, você não os fechou. Feche os labels antes de começar o input, assim:

<label id='name-label'>Nome: </label>
<input placeholder='Coloque seu nome' id='name' type='text' required>
 </input>

Importante: para garantir que o label e o input estão associados, coloque nos label o atributo for. O valor de for deve corresponder ao id do input.

Essa questão dos label sem for se repetiu por todo o projeto. Troque, se possível os id dos label por for e use como valor para for o mesmo valor que os id dos input aos quais eles correspondem.

No label do select tem um problema: ele e o select estão com o mesmo id. É preciso que se use id exclusivo. Troque o atributo id daquele label por for e isso resolve esse problema. Quanto ao tamanho do menu de select, no CSS, faça um seletor para dropdown (como é um id, não se esqueça de colocar a # antes) e aumente a largura do menu o quanto você quiser.

Espero ter ajudado. Bons estudos! :smiley:

Muito obrigado pela ajuda, eu tinha deixado como for como tinha aprendido nos tutoriais anteriores, mas na hora dos requerimentos do formulário ele pede que : " Você deve ter um elemento label com o id email-label . " isso com todos os labels, eu poderia ter no caso tanto id como for?

Sim. Sem problemas. O for serve para ligar label e input. Apenas não se esqueça de que o id precisa ser exclusivo. Label e input não podem ter o mesmo id, mas o id de input deve ser igual ao for do label. :slight_smile:

Muito obrigado pela ajuda, vou continuar com meus estudos!

1 Like