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

Conte-nos o que está acontecendo:

Os elementos checkbox: Desafios e outros
Os elementos radio: Sim, Não e Talvez

Não estão alinhados, poderiam me informar como alinhá-los?

Seu código até o momento

AVISO

O código de seed do desafio e/ou sua solução excederam o comprimento máximo que podemos transportar do desafio.

Você precisa realizar uma etapa adicional aqui para que o código que você escreveu apresente um formato de fácil leitura.

Copie e cole todo o código do editor mostrado no desafio de onde você acaba de fazer o link.

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Formulario de Pesquisa</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="box">
      <main>
    <h1 id="title">Formulário de Pesquisa</h1>
    <p id="description">Obrigado por nos ajudar a melhorar nossa plataforma</p>
    <form id="survey-form">
      <fieldset>
        <label for="name">Nome: <input id="name" name="name" type="text" placeholder="Digite seu nome" required /></label>
        <label id="name-label"> Sobrenome: <input name="name-label" type="text" placeholder="Digite seu sobrenome" value="name-label"required /></label>
        <label id="email-label">Email: <input name="email-label" type="email" placeholder="Digite seu email" value="email-label" required /></label>
        <label for="email">Confirme seu email: <input id="email" name="email" type="email" placeholder="Confirme seu email" value="email" required /></label>
        <label for="number"> Idade<input id="number" name="number" type="number" placeholder="Digite sua idade" min="16" max="120"></label>
        <label id="number-label">Digite seu telefone para receber atualizações: (Opcional) <input name="age" type="number" value="number-label" placeholder="Digite seu DDD e telefone"></label>
        </fieldset>
        <fieldset>
        <label for="dropdown">Como você avalia nossos cursos?
        <select id="dropdown">
          <option value="">Selecione</option>
          <option value="1">Muito Insatisfeito</option>
          <option value="2">Insatisfeito</option>
          <option value="3">Satisfeito</option>
          <option value="4">Muito Satisfeito</option>
        </select>
        </fieldset>
        </label>
        <fieldset>
          <label>Quais são suas áreas de interesse?</label>
          <label for="front-end"><input id="front-end" type="checkbox" name="Front-End" class="inline" value="front-end" />Front-End</label>
          <label for="back-end"><input id="back-end" type="checkbox" name="Back-End" class="inline" value="back-end"/>Back-End</label>
          <label for="desafios"><input id="desafios" type="checkbox" name="Desafios" class="inline" value="desafios" />Desafios</label>
          <label for="outros"><input id="outros" type="checkbox" name="outros" class="inline" value="outros"/>Outros</label>
        </fieldset>
        <fieldset>
          <legend>Você recomendaria nossos cursos a um amigo?</legend>
         <label id="sim"><input value="sim" type="radio" name="Avaliação" class="inline" checked/>Sim</label>
         <label id="talvez"><input value="talvez" type="radio" name="Avaliação" class="inline" />Talvez</label>
         <label id="nao"><input value="nao" type="radio" name="Avaliação" class="inline" />Não</label>
        </fieldset>
        <fieldset>
          <label for="comentario">Algum comentário ou sugestão?
          <textarea id="comentario" name="Comentario" rows="4" cols="35" placeholder="Digite uma sugestão..."></textarea>
          </label>  
  </main>
        </fieldset>
        <label for="terms-and-conditions">
        <input class="inline" id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
      </label>
        <input id="submit" type="submit" value="Enviar" />
    </form>
  </body>
  </div>
</html>

CSS:

body {
font-family: Poppins-Regular;
padding: 10px;
height: 100%;
background-image: url(https://cdn.pixabay.com/photo/2020/02/24/18/05/background-4876988_1280.jpg);
}

h1 {
  font-size: 30px;
  margin-top: 10px;
  margin-bottom: 15px;
  text-align: center;
  
}

p {
  font-size: 20px;
  font-style: italic;
  text-align: center;

   
}

.box {
  width: 80%;
  background-color: white;
  border-radius: 10px;
  margin-left: auto;
  margin-right: auto;
  padding: 15px;
  max-width: 500px;

}

fieldset {
  border: none;
}

label {
  display: block;
  margin: 0.5rem 0;
  text-align: center;
  font-family: Poppins-Medium;
  font-weight: bold;
  

}


.inline {
  width: unset;
  margin: 0 0.5em 0 0;
  vertical-align: middle;
}

legend {
  font-weight: bold;
  text-align: center;
}

input,
textarea,
select {
  margin: 10px 0 0 0;
  width: 100%;
  min-height: 2em;
  border-radius: 3px;
}

input[type="submit"] {
  display: block;
  width: 30%;
  margin: 1em auto;
  height: 2em;
  font-size: 1.1rem;
  color: white;
  background-color: #708090;
  border-color: white;
  min-width: 3px;
}

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 OPR/102.0.0.0

Informações do desafio:

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

Desejo que fiquem perfeitamente alinhados, um abaixo do outro, no momento estão assim:
imagem_2023-10-27_122834249

I would suggest removing text-align: center from the label elements. Centering the label text just makes it harder to read and use the form.

But if you really want those elements centered, one option is to add a container and use grid.

Example code
<fieldset>
  <label>Quais são suas áreas de interesse?</label>
  <div class="interests">
    <label for="front-end"><input id="front-end" type="checkbox" name="Front-End" class="inline" value="front-end" />Front-End</label>
    <label for="back-end"><input id="back-end" type="checkbox" name="Back-End" class="inline" value="back-end" />Back-End</label>
    <label for="desafios"><input id="desafios" type="checkbox" name="Desafios" class="inline" value="desafios" />Desafios</label>
    <label for="outros"><input id="outros" type="checkbox" name="outros" class="inline" value="outros" />Outros</label>
  </div>
</fieldset>
.interests {
  display: grid;
  justify-content: center;
}

.interests label {
  text-align: unset;
}
2 Likes

Conte-nos o que está acontecendo:

Todas as caixas de seleção dentro de #survey-form devem ter um atributo value e um valor.

Não estou encontrando a caixa de seleção sem valor, alguém poderia me ajudar?

Seu código até o momento

AVISO

O código de seed do desafio e/ou sua solução excederam o comprimento máximo que podemos transportar do desafio.

Você precisa realizar uma etapa adicional aqui para que o código que você escreveu apresente um formato de fácil leitura.

Copie e cole todo o código do editor mostrado no desafio de onde você acaba de fazer o link.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Formulario de Pesquisa</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="box">
      <main>
    <h1 id="title">Formulário de Pesquisa</h1>
    <p id="description">Obrigado por nos ajudar a melhorar nossa plataforma</p>
    <form id="survey-form">
      <fieldset>
        <label for="name">Nome: <input id="name" name="name" type="text" placeholder="Digite seu nome" required /></label>
        <label id="name-label"> Sobrenome: <input name="name-label" type="text" placeholder="Digite seu sobrenome" required /></label>
        <label id="email-label">Email: <input name="email-label" type="email" placeholder="Digite seu email" required /></label>
        <label for="email">Confirme seu email: <input id="email" name="email" type="email" placeholder="Confirme seu email" required /></label>
        <label for="number"> Idade<input id="number" name="number" type="number" placeholder="Digite sua idade" min="16" max="120"></label>
        <label id="number-label">Digite seu telefone para receber atualizações: (Opcional) <input name="age" type="number" value="number-label" placeholder="Digite seu DDD e telefone"></label>
        </fieldset>
        <fieldset>
        <label for="dropdown">Como você avalia nossos cursos?
        <select id="dropdown">
          <option value="1">Selecione</option>
          <option value="2">Ótimo</option>
          <option value="3">Bom</option>
          <option value="4">Regular</option>
          <option value="5">Insuficiente</option>
        </select>
        </fieldset>
        </label>
        <fieldset>
  <label>Quais são suas áreas de interesse?</label>
          <div>
    <label for="front-end"><input id="front-end" type="checkbox" name="Front-End" class="inline" value="front-end" />Front-End</label>
    <label for="back-end"><input id="back-end" type="checkbox" name="Back-End" class="inline" value="back-end" />Back-End</label>
    <label for="desafios"><input id="desafios" type="checkbox" name="Desafios" class="inline" value="desafios" />Desafios</label>
    <label for="outros"><input id="outros" type="checkbox" name="outros" class="inline" value="outros" />Outros</label>
        </div>
        </fieldset>
        <fieldset>
          <label>Você recomendaria nossos cursos a um amigo?</label>
         <label id="sim"><input type="radio" name="Avaliação" class="inline"  value="sim" checked/>Sim</label>
         <label id="talvez"><input type="radio" name="Avaliação" class="inline" value="talvez" />Talvez</label>
         <label id="nao"><input type="radio" name="Avaliação" class="inline" value="nao" />Não</label>
        </fieldset>
        <fieldset>
          <label for="comentario">Algum comentário ou sugestão?
          <textarea id="comentario" name="Comentario" rows="4" cols="35" placeholder="Digite uma sugestão..."></textarea>
          </label>
        </fieldset>
        <label for="terms-and-conditions">
        <input class="inline" id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
      </label>
        <input id="submit" type="submit" value="Enviar" />
    </form>
    </main>
  </body>
  </div>
</html>

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 OPR/102.0.0.0

Informações do desafio:

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