0

Estou começando agora a estudar HTML, alguem sabe como faço pra colocar o formulario que criei abaixo do Header?

h1 {
  text-align: center;

}


/* caixa header */

.headerbox {
	padding: 30px;
  background: blue;
  color: white;
  text-align: center;
  position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);


}


body{
background: #396afc;  /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #2948ff, #396afc);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #2948ff, #396afc); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"/>
    	 <title>Document</title>
    	 <link rel="stylesheet" href="css/style.css">
 	</head>
 
 	<body>
     <!-- Conteúdo -->


	<header>
		<div class="headerbox">
  		<h1>Este é o título do site.</h1>
  		<p1>essa é uma chamada para o site.</p1>
 		</div>
	</header>


	<form action="/pagina-processa-dados-do-form" method="post">
    <div>
        <label for="nome">Nome:</label>
        <input type="text" id="nome" />
    </div>
    <div>
        <label for="email">E-mail:</label>
        <input type="email" id="email" />
    </div>
    <div>
        <label for="msg">Mensagem:</label>
        <textarea id="msg"></textarea>
    </div>
</form>



 </body>
</html>

1 Resposta 1

0

Primeiro você precisa abusar das semânticas HTML5 para organizar o seu conteúdo. Geralmente, a tag <header> fica no cabeçalho do site.

Pense assim numa Organização das princpais tags:

  • header: Topo do site (Onde geralmente ficam os menus e dentre outras navegações);
  • main: onde realmente vai estar o seu formulário;
  • footer: Onde é o rodapé da aplicação;
  • section: geralmente, fica dentro da main da sua página, onde pode haver várias, coloque seu formulário aqui dentro, por exemplo!
  • article: Caso tenha conteúdo de valor, jogue este conteúdo dentro do article, que também pode ter sections dentro dela. Ela fica dentro da Main.

Agora, vamos lá! Cada tag dessa, um BLOCO que vai de uma ponta da interface a outra. A não ser que você modele.

Então, seu formulário deve estar da seguinte forma:

Segue exemplo no codepen: https://codepen.io/codenome/pen/xmdpJd

<main>
  <section>
      <div class="headerbox">
          <h1>Este é o título do site.</h1>
          <p1>essa é uma chamada para o site.</p1>
    </div>
    <div class="both">
          <form action="/pagina-processa-dados-do-form" method="post">
            <div>
                <label for="nome">Nome:</label>
                <input type="text" id="nome" />
            </div>
            <div>
                <label for="email">E-mail:</label>
                <input type="email" id="email" />
            </div>
            <div>
                <label for="msg">Mensagem:</label>
                <textarea id="msg"></textarea>
            </div>
        </form>
      </div>
  </section>
</main>

Não deixe de acrescentar a classe both:

.both {
  position: absolute;
    left: 50%;
    top: 65%;
    transform: translate(-50%, -50%);
}
3
  • 1
    Obrigado! Mas eu quero colocar o formulario fora da caixa que eu criei, abaixo dela. Sabe como faço isso?
    – Márcio
    24/12/2018 às 0:21
  • Salvei lá! Verifique o link novamente, por favor. 24/12/2018 às 0:38
  • 2
    Olá. Edita a resposta e insira o código aqui no SOpt. Pois aqui é um mundo para isso. Saudações. 24/12/2018 às 1:06

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .