Creating a form with dynamic labels
The more modern a form is, the more engaging it is. In this article, let's see how to create dynamic labels for a form that will increase the engagement of your forms and make your users want to fill them out.
You can find the entire tutorial on our Instagram account.
Step 1
To create a form with dynamic labels, you need to have a form! So let's create an HTML form, wrapping each of our inputs in a input-form class.
<div class="input-form">
<input type="email" name="email" id="email"
placeholder=" " />
<label for="email">Email Address</label>
</div>
<div class="input-form">
<input type="password" name="password" id="password"
placeholder=" " />
<label for="password">Password</label>
</div>
<div class="submit-form">
<button type="submit">Login</button>
</div>
Step 2
Style the form and its email and password fields.
.input-form {
display: flex;
flex-direction: column-reverse;
margin: 1.2em 0;
}
input, label, button {
transition: .3s;
}
label {
transform: translate(10px, -15px);
cursor: text;
transform-origin: left top;
position: absolute;
}
input {
padding: 10px;
border: none; outline: none;
border-bottom: 2px solid grey;
}We will directly use flexbox to center an input with its label, which will then allow us, thanks to the translate property, to position the label directly on the input.
Step 3
Now let's style the button of our form.
button {
border: 0; padding: 10px 15px;
cursor: pointer; color: white;
background-color: #ff9234;
}
button:focus, button:hover {
background-color: #d92027;
}
.submit-form {
text-align: right;
}
Step 4
Now we just need to add the dynamic behavior to the labels. For this, we will use the placeholders of our inputs, and specifically the default behavior they have with the browser.
We will hide the placeholder using opacity: 0, which means it is present but not displayed.
We use this trick to position the form label depending on whether the placeholder is completely hidden or not (which means the user has entered a value or has clicked on the input).
All this is achieved using the CSS sibling selector ~, which allows us to select the label that follows the input (and thus not select all labels).
input::placeholder {
opacity: 0;
}
input:focus,
input:not(:placeholder-shown) {
border-bottom: 2px solid red;
}
input:not(:placeholder-shown) ~ label,
input:focus ~ label {
transform: translate(10px, -30px) scale(.8);
padding-left: 0;
color: black;
}