How to leave label on top of input

Question

How to leave label on top of input

Asked 3 years, 9 months ago

Viewed 247 times

0

The thing is, I’m making a form and I want the label to be on top of the input, but I couldn’t get it because I used the float: left to leave the inputs side by side, but I want instead to look like this:

Keep the label "Enter your name ..." for example, on top of the input "Enter your name" and so on

This is my comic 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;
 }

My 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>

Guys, I’ll adjust the position of the div better actionCard and take that yellow background later, just put it so I can see better.

2 answers

-1

Maria Eduarda, this layout world is very complex due to the number of devices and existing browsers, so there are frameworks that make your life easier, but as a study to make this basic model you should think about the grouping of objects in the form.

In the past the TABLE tag was used a lot for this type of form, but today to be more flexible we use the DIV

I’m putting a basic template below just so you have an idea of how you can align your Abels above the field

<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>

you could tell me why there’s room in class form-col form-col-3 and the name of it, I want to search to understand better, because when I create a class I don’t use space, I don’t understand why people use without space I want to see on Youtube to see if I understand it better

– Dakota

2021/02/01 at 17:14
I answered wrong to you by rereading your question... in the assignment of class in objects you can add several classes for that you must use space between them, then the reference "form-col form-col-3" informs that the object will inherit properties of 2 classes, could be more or less classes, already the character "-" is a matter of nomenclature, you could use Formcol3 or formcol3 but note that the form we write can facilitate the visualization.

– Marcelo

2021/02/01 at 17:35

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.

by Lucas Nascimento • 1 point · Answer 1 · 2021-02-01T08:11:00+00:00

Good morning, I recommend you use Bootstrap. Once you get the basic notion it makes your life a lot easier, not to mention that in design/appearance matters it looks very beautiful too. I left an example in Jsfiddle for you to have an idea.

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

Another thing is that I find unnecessary this label on top, since in the input placeholder it says practically the same thing, I would leave only in the placeholder, but I don’t know what your need, so it’s up to you, thanks!