Thinas
New Coder
I'm newbie in CSS and need to "copy" a model as exercise. I'm having trouble "setting up" the <forms>, because I want <label> above <input>. Thanks in advance.
Expected:
my output:
my HTML code:
my CSS code:
Expected:
my output:
my HTML code:
HTML:
<form method="post">
<label for="nome">Nome do Paciente</label>
<input type="text" name="nome" id="nome" placeholder="ex: Thiago Martins Prado">
<label for="data">Data da Consulta</label>
<input type="date" name="data" id="data">
<label for="peso">Peso (kg)</label>
<input type="number" name="peso" id="peso" step="0.1" placeholder="ex: 70.6">
<label for="altura">Altura (m)</label>
<input type="number" name="altura" id="altura" step="0.1" placeholder="ex: 1.83">
<button type="submit">Confirmar</button>
<button type="reset">Limpar</button>
</form>
my CSS code:
Code:
form {
margin: 0 40px;
}
label {
font: 18px 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
input {
border-radius: 4px;
padding: 10px;
margin-bottom: 20px;
}
input#nome{
width: 100%;
}
::placeholder {
color: #ADB5B8;
}