Wed Jun 15 2022

How to Create a Floating Placeholder on Your Signup Form

CSS7715 views

A floating placeholder is a modern and sleek way to enhance the user experience in web forms. When you click on an input field, the placeholder text "floats" or moves up, creating a clear label and giving a more dynamic feel to your form. This popular effect is often seen on many modern websites and can be easily implemented using HTML and CSS without any JavaScript. In this article, we’ll follow the steps to create a floating placeholder effect using only HTML and CSS.

Step 1: Basic HTML Structure

First, let's start by creating the HTML structure. We need a simple form input with a label. To create the floating effect, the label will act as the placeholder, and when the user focuses on the input field, the label will move.

<div class="form-group">
    <input type="text" placeholder="Full Name" />
    <label class="form-label">Full Name</label>
</div>

<div class="form-group">
    <input type="email" placeholder="E-mail" />
    <label class="form-label">E-mail</label>
</div>

Step 2: CSS for the Floating Placeholder Effect

Now, add the CSS that triggers the floating effect. This will happen when the input field is focused or has content inside it.

.form-group .form-label {
            position: absolute;
            top: 9px;
            left: 0;
            font-size: 18px;
            padding: 0 10px;
            color: #acacac;
            pointer-events: none;
            transition: 0.15s all ease;
}

.form-group input:focus + .form-label,
.form-group input:not(:placeholder-shown) + .form-label {
            transform: translate(5px, -22px);
            background-color: #383838;
            font-size: 14px;
            color: #eee;
}

The input:focus + .form-label selector applies styles to the label when the input is focused.
The input:not(:placeholder-shown) + .form-label selector ensures that the label remains in the "floating" position when the input has content, even after the user moves away from the field.

Conclusion

Using just HTML and CSS, you can create an attractive and functional floating placeholder effect like this for your forms. This effect not only enhances the design but also improves user experience by making forms easier to navigate and understand. You can apply these simple techniques to make your web forms look professional and perform well without the need for complex JavaScript. Happy coding!

File Name: floating-placeholder-effect.html

<!DOCTYPE html>
<html lang="en">
<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">
    <title>Floating Placeholder Effect</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Hind&display=swap" rel="stylesheet"> 
    <style>
        * {
            margin: 0;
            padding: 0;
            outline: 0;
            font-family: 'Hind', sans-serif;
        }

        body { background-color: #383838; }

        section {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100vh;
            flex-flow: column;
        }

        .form-group {
            position: relative;
            margin: 12px 0;
        }

        .form-group input {
            padding: 8px 10px;
            font-size: 18px;
            border-radius: 5px;
            border: #acacac solid 2px;
            background-color: transparent;
            color: #eee;
            transition: 0.15s all ease;
        }

        .form-group input:focus {
            border-color: #eee;
        }

        .form-group input::placeholder {
            color: transparent;
        }

        .form-group .form-label {
            position: absolute;
            top: 9px;
            left: 0;
            font-size: 18px;
            padding: 0 10px;
            color: #acacac;
            pointer-events: none;
            transition: 0.15s all ease;
        }

        .form-group input:focus + .form-label,
        .form-group input:not(:placeholder-shown) + .form-label {
            transform: translate(5px, -22px);
            background-color: #383838;
            font-size: 14px;
            color: #eee;
        }
        
    </style>
</head>
<body>
    <section>
        <div class="form-group">
            <input type="text" placeholder="Full Name" />
            <label class="form-label">Full Name</label>
        </div>
        <div class="form-group">
            <input type="email" placeholder="E-mail" />
            <label class="form-label">E-mail</label>
        </div>
    </section>
</body>
</html>

Result Screenshot(s)

Author:Geekboots