Página html sem poder visualizar totalmente

Front-end HTML
,
#1

Olá, pessoal, tudo bem?
estou desenvolvendo uma página html que consiste em um formulário.
não consigo visualizar o formulário até o fim.
gostaria de saber o que é que está faltando nessa página.
agradeço desde já.

segue o código html e css:

https://dontpad.com/lanyguj/html

https://dontpad.com/lanyguj/css

segue a aparencia:

image
image1366×768 57.5 KB

#2 
html, body {
    height: 100%;
    background-color: #152733;
    overflow: hidden; /* seu problema está aqui */
}

Em tudo que houver overflow o navegador vai “esconder”. Não sei qual foi seu objetivo com isso.
Além disso, há alguns problemas estruturais no seu documento, por exemplo, a tag link para associar os arquivos css normalmente é colocada dentro da tag head. Outra coisa, quebras de linha são feitas usando a tag br dessa forma <br/>. Não vi o restante, foquei no seu problema e nessa questão das quebras de linha pq apareceram várias.

1 curtida
#3

Olá ! Muito obrigada pela ajuda.

Estive acessando sites como o Learn Robo www.learningrobo.com para treinar desenvolvimento de formulário, usando códigos preexistentes. Sou uma desenvolvedora nuttella, control c + control v. Espero evoluir a ponto de entender o código do início ao fim.

Muito obrigada!

1 curtida
#4

Uma dica que posso te dar é : Mesmo assistindo as videos aulas, ao final de cada vídeo-aula ou exercicio. Tente criar um “problema” que a solução seja o que você acabou de assistir/aprender e dai, você tenta desenvolver sem copiar e colar. No máximo consultando, desde de que você tenha uma noção do que estará fazendo.

1 curtida
#5

Vou te passar um checklist bem direto + um exemplo de estrutura correta. Mas se não der certo eu sugiro que voce use a IA de code do Google, o anti gravity que reolve varios desses bugs, eu criei um site de imóveis inteiro em HMTL com ele

  1. Coisas de HTML que normalmente “cortam” a página

Dá uma olhada se não tem:

  1. Tags não fechadas
  • <form> sem </form>
  • <div> sem </div>
  • </body> ou </html> faltandoQuando alguma dessas tags não fecha, o navegador pode “engolir” parte do conteúdo e o comportamento fica estranho (como não rolar até o final).
  1. Estrutura básica incompleta

Garante que o HTML comece e termine assim:
Formulário ``` ```

Erros comuns:

  • Esquecer <body> ou </body>
  • Colocar o <form> fora do <body>
  1. Coisas de CSS que podem “cortar” o formulário

No CSS, os vilões clássicos para isso são:

  1. overflow: hidden; em body, html ou no container do formulário
body {
  overflow: hidden; /* Isso impede a rolagem! */
}

Se tiver algo assim, troca por:

body {
  overflow: auto;   /* ou simplesmente remove */
}
  1. Altura fixa da página ou do container
body {
  height: 100vh;      /* às vezes prende o conteúdo na altura da tela */
  overflow: hidden;
}

.container {
  height: 400px;
  overflow: hidden;
}

Em muitos casos, o ideal é não definir height fixa, deixar o conteúdo crescer naturalmente:

body {
  min-height: 100vh;  /* se quiser garantir altura mínima */
}

.container {
  /* sem height fixa, sem overflow hidden */
}
  1. position: fixed em algum container grandeSe o formulário inteiro está dentro de algo assim:
.formulario {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
}

Ele fica travado no tamanho da tela e não rola. Melhor usar position: static (padrão) ou relative e deixar a página rolar normalmente.

  1. Exemplo simples de página com formulário “rolável” até o fim

Você pode comparar com o seu e ver o que está diferente:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Formulário de Exemplo</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Cadastro</h1>

  <form action="#" method="post">
    <label for="nome">Nome:</label><br>
    <input type="text" id="nome" name="nome"><br><br>

    <label for="email">E-mail:</label><br>
    <input type="email" id="email" name="email"><br><br>

    <!-- Repete vários campos só pra testar a rolagem -->
    <label for="msg">Mensagem:</label><br>
    <textarea id="msg" name="mensagem" rows="8"></textarea><br><br>

    <button type="submit">Enviar</button>
  </form>
</body>
</html>

/* style.css */
html, body {
  margin: 0;
  padding: 0;
  /* NÃO usar overflow: hidden aqui */
  font-family: Arial, sans-serif;
}

body {
  padding: 20px;
}

Se isso funcionar e o seu não, é quase certo que é:

  • alguma height fixa,
  • algum overflow: hidden,
  • ou tag não fechada.