Ir para conteúdo
gomes94

Alinhar campos html

Por , em HTML e CSS

Recommended Posts

gomes94    0

gomes94
Postado

Boa tarde a todos!

 

Estou começando a estudar html e estou com uma pequena dúvida.

 

Estou tentando alinhar o label em cima do input. Porém também preciso que os campos fiquem um do lado do outro. Alguém poderia me ajudar?

 

Segue apenas um exemplo.

 

<!--<p>
                <label for="nome">Nome:</label><br><input type="text" name="nome" id="nome" placeholder="Digite aqui seu nome">
                <label for="sbnome">Sobrenome:</label><br><input type="text" name="sbnome" id="sbnome" placeholder="Digite aqui seu sobrenome">
                </p>
                <p>
                <label for="email">E-mail:</label><input type="email" name="email" id="email" placeholder="Digite aqui seu email">
                <label for="idade">Idade:</label><input type="number" name="idade" id="idade" placeholder="Digite aqui sua idade">
                <label for="cpf">CPF:</label><input type="number" name="cpf" id="cpf" placeholder="Digite aqui seu CPF">
                </p>
                <p>
                <label for="cep">CEP:</label><input type="number" name="cep" id="cep" placeholder="Digite aqui seu cep">
                <label for="endereco">Endereço:</label><input type="text" name="endereco" id="endereco" placeholder="Digite aqui seu endereço">
                <label for="senha">Senha:</label><input type="password" name="senha" id="senha" placeholder="Digite aqui sua senha">
                </p>-->

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bergs    53

Bergs
Postado

Olá gomes94

 

Você precisa criar colunas para poder alinhar os campos como deseja.

Um bom exercício para começar! 

 

Precisando estamos aqui. Boa sorte nos estudos!

 

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

marcosmarcolin    0

marcosmarcolin
Postado

Montei um exemplo básico para demonstrar, segue: 

<!DOCTYPE html>
<html>
<head>
    <title>Alinhamento</title>

    <meta http-equiv="content-type" content="text/html;charset=utf-8" />

    <style>
         * { color: #666; padding: 0; margin: 0; }
        .bloco { float:left; }  
        .bloco .box { width: 200px; display: inline block; }
        input { padding: 5px; margin-right: 5px; }
    </style>

</head>

<body>

    <div class="bloco">   

        <div="box">
            <label for="login">Login</label><br>
            <input type="text" name="login"/>
        </div>

        <div="box">
            <label for="login">Senha</label><br>
            <input type="password" name="senha"/>
        </div>
        <input type="submit" value="LOGAR" />

    </div>

</body>

</html>

Pesquise por display e float, aí entenderá bem como funciona.

Compartilhar este post

Link para o post
Compartilhar em outros sites

luisfeliperm2    4

luisfeliperm2
Postado 
<!-- 
  luisfeliperm
  
  Instrução:
  Sempre que for adicionar uma INPUT faça o seguinte
  
  Coloque-a dentro de uma DIV com CLASS="ITEM"

 -->
<div class="div-itens">
  <div class="item">
    <label for="nome">Nome:</label>
    <input type="text" name="nome" id="nome" placeholder="Digite aqui seu nome">
  </div>
  
  <div class="item">
    <label for="sbnome">Sobrenome:</label>
    <input type="text" name="sbnome" id="sbnome" placeholder="Digite aqui seu sobrenome">
  </div>
</div>

<div class="div-itens">
  <div class="item">
    <label for="email">E-mail:</label>
    <input type="email" name="email" id="email" placeholder="Digite aqui seu email">
  </div>

  <div class="item">
    <label for="idade">Idade:</label>
    <input type="number" name="idade" id="idade" placeholder="Digite aqui sua idade">
  </div>

  <div class="item">
    <label for="cpf">CPF:</label>
    <input type="number" name="cpf" id="cpf" placeholder="Digite aqui seu CPF">
  </div>
</div>

<div class="div-itens">
  <div class="item">
    <label for="cep">CEP:</label>
    <input type="number" name="cep" id="cep" placeholder="Digite aqui seu cep">
  </div>

  <div class="item">
    <label for="endereco">Endereço:</label>
    <input type="text" name="endereco" id="endereco" placeholder="Digite aqui seu endereço">
  </div>

  <div class="item">
    <label for="senha">Senha:</label>
    <input type="password" name="senha" id="senha" placeholder="Digite aqui sua senha">
  </div>
</div>

<style>
  .div-itens{
    margin:30px 10px;padding:5px;
    border:1px solid blue;
    overflow: hidden;
  }
  .div-itens .item{
    border:1px solid red;
    padding:5px;float: left;
  }
  .div-itens .item label{
    display: block;
  }
</style>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora
Ir para a lista de tópicos HTML e CSS

  • Conteúdo Similar

    • Remilton Silva
      Ativar o button somente quando todos os campos forem preenchidos.
      Por Remilton Silva
      <script> $(document).ready(function() { $("button").click(function(){ if ($(this).val() == '' ) { $("button").disabled=true; }else { $("button").disabled=false; } }); }); </script> Olá prezados,
       
      Estou pesquisando mas ainda não achei algo que me ajude com o cod.
      se alguém puder ajudar, será de grande valia.
       
      preciso que o button só seja ativado quando todos os inputs forem preenchidos, como faço isso em JavaScript?
       
      <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="corpo-form"> <h2>Cadastrar</h2> <input type="text" class="form-control" name="nome" placeholder="Nome Completo" maxlength="30"><br><br> <select class="form-control" name="gerencia"> <option value="Selecione uma Opção" selected>Selecione uma Opção.</option> <option value="GECOR">Vendas</option> <option value="GECON">Almoxarifado</option> <option value="GECIN">RH</option> <option value="DIRETORIA">DIRETORIA</option> </select><br><br> <input type="text" class="form-control" name="telefone" placeholder="Telefone"maxlength="30"><br><br> <input type="email" class="form-control" name="email" placeholder="E-mail" maxlength="40"><br><br> <input type="password" class="form-control" name="senha" placeholder="Senha" maxlength="15"><br><br> <input type="password" class="form-control" name="confsenha" placeholder="Confirmar Senha" maxlength="15"><br><br> <input type="button" class="btn btn-danger btn-outline-light btn-block" value="Entrar" maxlength="" required="required"> <br> </div> </body> </html>  
    • Robson Augusto
      Meu Site não aparece em Resultados de pesquisa no PC
      Por Robson Augusto
      Galera se alguém souber o que ocorre,  é o seguinte, não acredito que possa ser Problema de SEO, mas vamos lá meu site anuncicarbh.com, não aparece em pesquisa feitas pelo computador, com a palavra chave "seminovos bh", ele aparece na primeira oscilando para segunda pagina do bing e yahoo, fazendo a pesquisa pelo telefone, ja no pc ele nao aparace mais no yahoo, mas continua a aparecer no bing, ja no google ele teve pequenas aparições na terceira página, agora em ambas as pesquisas de pc e celular ja não aparece mais no google... So aparece atualmente no google, pesquisando pelo nome do site... Alguem saberia me dizer o por que disso? será SEO?
    • nosredna
      Múltiplos cálculos com JavaScript
      Por nosredna
      Olá amigos,
       
      tenho o seguinte código:
      <html> <script type="text/javascript"> function Soma(){ var soma = 0; var ipts = document.querySelectorAll('input[oninput="Soma()"]'); for(var x=0; x<ipts.length; x++){ var valorItem = parseFloat(ipts[x].value); !isNaN(valorItem) ? soma += parseFloat(valorItem) : null; } document.querySelector('#final').value = soma.toFixed(2); } </script> <form action=""> Total produto1: <input type="text" oninput="Soma()" value="0"><br> Total produto2: <input type="text" oninput="Soma()" value="0"><br> <br> Total todos os produtos12: <input type="text" id="final"> </form> </html> Bom...para essas duas inputs funciona corretamente.
      Porém, se eu quiser colocar mais inputs como: Total produto3 + Total produto4 = Total todos os produtos34, Total produtoX + Total produtoY = Total todos os produtosXY, ...
      e usar o mesmo código JS, é possível? alguém poderia me dar uma dica de como eu faço para fazer isso? já tentei de várias maneiras, mas não estou tendo sucesso...
       
      Fico agradecido. 
    • 4ly
      Como faço para o meu botão âncora ter uma animação de rolagem
      Por 4ly
      Olá. Bom basicamente eu tenho um botão âncora que leva até a aba de sobre do meu site, só que ele não tem animação, ele simplesmente "teleporta" para essa aba do nada isso não é legal. 
      Gostaria de saber algum código de JavaScript ou CSS para solucionar isso 
      Esse é o código : 
       
      <button id="explorer"><a href="#about">Explorar</a></button>
    • jgasper
      Transformar site em responsivo
      Por jgasper
      Boa tarde, preciso de ajuda, fiz o site para minha empresa de advocacia mas nao sei transformar em mobile, peguei template pronto e fiz modificações, nao sou bom em HTML, foi o que consegui fazer. Alguem pode me ajudar a transformar ele em responsivo? só fazendo o menu funcionar para celular?
       
      Os arquivos do site estao em: https://mega.nz/#!AEAUxa5Z!EwFVVhgaJeJg6DTFpzUfi0vnrULPzI8YI9I0-XJwaE8
       
      Agradeço desde ja.
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito