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

Português HTML-CSS
1

Conte-nos o que está acontecendo:
Alguém pode me dizer se tem algum erro nas caixas de seleção

Seu código até o momento

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulario</title>
</head>
<body>
    <h1 id="title">Formulario</h1>
    <p id="description">Por favor, preencha com informações necessárias</p>
    <form id="survey-form">

        <hr>
<label for="name" id="name-label"> Por favor seu Nome</label>
<INput type="text" id="name" required placeholder="Ex: bolsonaro"> </INput>

<hr>
<label for="number" id="number-label">Por favor sua idade:</label>
<input type="number" id="number" min="10" max="100" required placeholder="Ex: 23" >

<hr>
<label for="email" id="email-label">Por favor Seu e-mail</label>
<input type="email" id="email" required placeholder="Seu melhor email">
<hr>

<label for="dropdown"> Selecione um</label>
<select id="dropdown">
    <option value="0"> Bolsonaro</option>
    <option value="1"> Lula </option>
</select>

<hr>
<input type="radio" name="radio-group " id="Bolsonaro" value="bolsonaro">
<label for="Bolsonaro"> Bolsonaro </label>
<input type="radio" name="radio-group" id="Lula" value="Lula">
<label for="Lula"> Lula </label>
<hr>

<label> Escolha um Número</label>
<input type="checkbox" value="0" id="22">
<label for="22"> 22 </label>

<input type="checkbox" value="1" id="13">
<label for="13"> 13 </label>

<textarea name="" id="" cols="30" rows="10">De sua opnião</textarea>

<input type="submit" id="submit">
</form>
</body>
</html>

/* file: styles.css */

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/107.0.0.0 Safari/537.36

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

Link para o desafio:

2

Oi, @diogenessoares56! Boas-vindas ao fórum do freeCodeCamp!

Bora lá que temos alguns assuntos a tratar :smiley: :

<INput type="text" id="name" required placeholder="Ex: bolsonaro"> </INput>

Tente sempre manter os nomes das tags em letras minúsculas (nesse caso, estamos falando de input). Não vai fazer muita diferença, mas é uma boa prática.

<input type="radio" name="radio-group " id="Bolsonaro" value="bolsonaro">
<label for="Bolsonaro"> Bolsonaro </label>
<input type="radio" name="radio-group" id="Lula" value="Lula">
<label for="Lula"> Lula </label>

Consegue ver o espaço que você deixou logo após o primeiro name de radio-group? Isso fez com que os dois name fossem diferentes. Esse atributo precisa ser igual em todos os botões de opção nos quais você quer que o usuário selecione um OU outro, por exemplo. Como está, é possível selecionar os dois.

<label> Escolha um Número</label>
<input type="checkbox" value="0" id="22">
<label for="22"> 22 </label>

<input type="checkbox" value="1" id="13">
<label for="13"> 13 </label>

As caixas de seleção, porém, não têm essa capacidade de selecionar um OU outro por padrão. Aqui, você poderá selecionar ambas as caixas. Então, para a escolha do número, seria interessante usar também um botão de opção (radio). Como opção, é possível criar uma função em JavaScript para ficar escutando a marcação de uma caixa ou outra, mas esse é um assunto que, se você está começando com o HTML e o CSS, vai preferir deixar para um pouco mais adiante :wink: .

Importante: se você vai seguir a ideia dos botões de opção, dê a esses dois um name diferente de radio-group para que o interpretador não entenda que esses dois itens sejam do mesmo grupo que os de cima.

Espero ter ajudado. Bons estudos! :smiley:

1 Like