Label dentro do input!

Front-end
#1

Oi auguem sabe me explicar como eu faço esse input porque não tenho nem idéia!
Captura de tela 2022-04-05 204429

#2

Simples:

<label class="input-label">
    <input id="meuinput">
    <span>Label</span>
</label>

CSS:

.input-label{
    position: relative;
}

#meuinput + span{
    position: absolute;
    top: 0; /*Ajuste conforme o necessário*/
}

Tem também aquele efeito do label mudar para essa mesma posição ao focar o input, esse é um pouquinho mais complexo:

HTML:

<label class="input-label">
    <input id="meuinput" placeholder=" "> <!-- IMPORTANTE! Definir um espaço como placeholder -->
    <span>Label</span>
</label>

.input-label{
    position: relative;
}

#meuinput:focus + span, #meuinput:not(:placeholder-shown) + span {
    position: absolute;
    top: 0; /*Ajuste conforme o necessário*/
    transition: all ease-out .2s; /*Ajuste conforme o necessário*/
}
1 curtida
#3

Não deu eu fiz alguma coisa errada?

.input-label{
    position: relative;
}

#meuinput:focus + span, #meuinput:not(:placeholder-shown) + span {
    position: absolute;
    top: 0; /*Ajuste conforme o necessário*/
    transition: all ease-out .2s; /*Ajuste conforme o necessário*/
}

header {
    text-align: center;
    margin-top: 4%;
    margin-left: 25%;
    width: 59%;
}

h1 {
    border-bottom: 1px solid;
    text-align: center;
    width: 80%;
}

li {
    display: inline;
    margin-left: 19%;
}

.listas {
    margin-right: 27%;
}

.input-label {
    position: relative;
}

#meuinput:focus+span,
#meuinput:not(:placeholder-shown)+span {
    position: absolute;
    top: 0;
    /*Ajuste conforme o necessário*/
    transition: all ease-out .2s;
    /*Ajuste conforme o necessário*/
}
#4 
<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="normalize.css">
    <title>formulario de contato</title>
</head>

<body>
    <header>
        <h1>
            Check Out
        </h1>
        <ul>
            <div class="listas">
                <li>1Shopping</li>
                <li>2Billing</li>
                <li>3Confirm</li>
            </div>
        </ul>
    </header>
    <main></main>
    <form action="">

        <label class="input-label" for=""><span>nome</span> <input type="text" name="" id="meuinput"></label>
        <label class="input-label" for=""><span>telefone</span> <input type="tel" name="" id="meuinput"></label>
        <label class="input-label" for=""> <span>email</span> <input type="email" name="" id="meuinput"></label>

    </form>
    </main>
    <footer>
        <button>enviar</button>
    </footer>
</body>

</html>
#5

Repara que aqui no meu exemplo eu coloquei a tag span depois do input. No seu código vc colocou antes, basta arrumar isso ai

#6

Olha como ficou, séria isso?

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="normalize.css">
    <title>formulario de contato</title>
</head>

<body>
    <header>
        <h1>
            Check Out
        </h1>
        <ul>
            <div class="listas">
                <li>1Shopping</li>
                <li>2Billing</li>
                <li>3Confirm</li>
            </div>
        </ul>
    </header>
    <main></main>
    <form action="">
        <label class="input-label" for=""><input type="text" name="" id="meuinput"><span>nome</span> </label>
        <label class="input-label" for=""><input type="tel" name="" id="meuinput"><span>telefone</span></label>
        <label class="input-label" for=""><input type="email" name="" id="meuinput"><span>email</span></label>
    </form>
    </main>
    <footer>
        <button>enviar</button>
    </footer>
</body>

</html>

header {
    text-align: center;
    margin-top: 4%;
    margin-left: 25%;
    width: 59%;
}

h1 {
    border-bottom: 1px solid;
    text-align: center;
    width: 80%;
}

li {
    display: inline;
    margin-left: 19%;
}

.listas {
    margin-right: 27%;
}

.input-label {
    position: relative;
}

#meuinput:focus+span,
#meuinput:not(:placeholder-shown)+span {
    position: absolute;
    top: 0;
    /*Ajuste conforme o necessário*/
    transition: all ease-out .2s;
    /*Ajuste conforme o necessário*/
}
#7

Nos inputs, troca o id por class.
Coloca isso no css:

.input-label span{
  position: absolute;
  left: 0;
  pointer-events: none;
  transition: all ease-out .2s;
}

.meuinput:focus+span,
.meuinput:not(:placeholder-shown)+span {
    top: -1rem;
}

e não esquece de colocar placeholder nos inputs:

<input type="text" name="" class="meuinput" placeholder=" ">
#8

deu certo obrigado!