0

Galera é o seguinte, estou fazendo um formulário e quero que a label fique em cima do input, porém não consegui isso porque usei o float: left para deixar os inputs um do lado do outro, porém eu quero que ao invés de ficar assim:

inserir a descrição da imagem aqui

Fique com o label "Insira seu nome ..." por exemplo, em cima do input "Insira seu nome" e assim por diante

Esse é meu códico css:

 .form{
  width:80%;
  height:750px;
  border-radius:4px;
  border:2px solid #fff;
  background:#fff;
  margin-top:150px;
  color:black;
 }

 .form .navbar_form {
  width:100%;
  height:60px;
  background:#a0a0a0;
 }

 .form .navbar_form img{
  width:50px;
  height:50px;
  border-radius:50%;
  object-fit:cover;
  float:left;
  margin-top:5px;
  margin-left:20px;
 }

 .form .navbar_form h1{
  padding:10px;
  color:#fff;
  letter-spacing:2px;
  text-transform:uppercase;
  font-family:Arial;
 }

 .form input[type="text"]{
  position:relative;
  margin:10px;
  top:15%;
  left:8%;
  border:none;
  outline:none;
  border-bottom:1px solid red;
  background:transparent;
  width:40%;
  height:30px;
  float:left;
 }

 .form button{
  float:right;
  margin-right:40px;
  width:35%;
  border:none;
  outline:none;
  height:40px;
  color:#fff;
  background:#fb2525;
  font-size:18px;
  border-radius:20px;
 }

 .form #action_Card {
  position:relative;
  top:60%;
  display:inline-block;
  width:100%;
  height:40px;
  background:yellow;
 }

Meu html:

<center><form action="/cad" method="POST">
<div class="form">                                             
 <div class="navbar_form">
  <img src="/img/logo.jpeg">
  <h1>Cadastro de usuarios</h1>
 </div>
 <label>Insira seu nome:*</label>
 <input type="text" name="nome" placeholder="Insira seu nome"/>
 <label>Insira seu sobrenome:*</label><br>
 <input type="text" name="sobrenome" placeholder="Insira seu sobrenome"/>                                                    <label>Insira seu nome de usuario:*</label><br>               <input type="text" name="username" placeholder="Insira seu usuario"/>                                                       <label>Insira seu email:*</label><br>                         <input type="text" name="email" placeholder="Insira seu email"/>                                                            <label>Insira sua senha:*</label><br>                         <input type="text" name="password" placeholder="Insira sua senha"/>                                                         <label>Confirme sua senha:*</label>
 <input type="text" placeholder="Confirme sua senha"/>
 <div id="action_Card">
  <button type="button">Criar conta</button>
 </div>
</div>

Gente, vou ajustar melhor a posição da div actionCard e tirar esse background amarelo depois, só coloquei pra mim poder ver melhor.

2 Respostas 2

-1

Maria Eduarda, esse mundo do layout é bem complexo devido ao numero de dispositivos e navegadores existentes, por isso existem frameworks que facilitam sua vida, mas a título de estudo para fazer esse modelo básico você deve pensar no agrupamento de objetos no form.

Antigamente usava-se muito a tag TABLE para este tipo de formulario, mas hoje para ficar mais flexível usamos o DIV

Estou colocando um modelo básico abaixo só para você ter uma ideia de como pode alinhar seus labels acima do campo

<html>

<head>
    <title>TESTE DE ALINHAMENTO</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }

        fieldset {
            border: 0;
        }

        .form-group {
            width: 100%;
            margin: 8px;
        }

        .form-col {
            float: left;
            padding: 6px;
        }

        .form-col-1 {
            width: 8.33%;
        }

        .form-col-2 {
            width: 16.66%;
        }

        .form-col-3 {
            width: 25%;
        }

        .form-col-4 {
            width: 33.32%;
        }

        .form-control {
            width: 100%;
        }
    </style>
</head>

<body>
    <form>
        <fieldset>
            <div class="form-group">
                <div class="form-col form-col-3">
                    <label for="nome">Nome</label>
                    <input type="text" id="nome" name="nome" value="" class="form-control">
                </div>
                <div class="form-col form-col-3">
                    <label>Email</label>
                    <input type="text" id="email" name="email" value="" class="form-control">
                </div>
                <div class="form-col form-col-3">
                    <label>Celular</label>
                    <input type="text" id="celular" name="celular" value="" class="form-control">
                </div>
            </div>
        </fieldset>
        <fieldset>
            <div class="form-group">
                <div class="form-col form-col-3">
                    <label>Web Site</label>
                    <input type="text" id="website" name="website" value="" class="form-control">
                </div>
                <div class="form-col form-col-2">
                    <label>Nascimento</label>
                    <input type="text" id="nascimento" name="nascimento" value="" class="form-control">
                </div>
            </div>
        </fieldset>
    </form>
</body>

</html>

2
  • poderia me informar porque tem espaço na classe form-col form-col-3 e o nome disso, quero procurar pra entender melhor, porque quando eu crio uma classe eu não uso espaço, não entendi porque o povo usa sem espaço quero ver no YouTube pra ver se entendo isso melhor
    – Dakota
    1/02/2021 às 17:14
  • Respondi errado pra você, relendo sua pergunta... na atribuição de classe nos objetos você pode adicionar varias classes para isso você deve usar espaço entre elas, então a referencia "form-col form-col-3" informa que o objeto herdará propriedades de 2 classes, poderia ser mais ou menos classes, já o caracter "-" é questão de nomenclatura, você poderia usar FormCol3 ou formcol3 mas perceba que a forma que escrevemos pode facilitar a visualização.
    – Marcelo
    1/02/2021 às 17:35
-6

Bom dia, recomendo que utilize o Bootstrap. Depois que você pega a noção básica ele facilita muito sua vida, sem falar que em questões de design/aparência ele fica muito bonito também. Deixei um exemplo no JSFiddle para você ter uma ideia.

Demo: https://jsfiddle.net/g5m6x3k1/

inserir a descrição da imagem aqui

Outra coisa é que acho desnecessário essa label em cima, já que no placeholder do input ele diz praticamente a mesma coisa, eu deixaria apenas no placeholder, mas não sei qual a sua necessidade, então fica a seu critério, valeu!

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