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:
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!
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!
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
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
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.