Floating Labels Form

<!DOCTYPE html>
<title>My Example</title>

/* -- The core styles for floating labels -- */
.form-group-float {
    position: relative;
    margin-bottom: 25px;
}
.form-group-float .form-control {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    box-sizing: border-box;
}
.form-group-float .form-label {
    position: absolute;
    top: 12px;
    left: 12px;
    color: #999;
    background-color: #fff; /* Match form background */
    padding: 0 5px;
    transition: all 0.2s ease;
    pointer-events: none; /* Allows clicks to go through to the input */
}
/* 
    The main effect. When the input is focused or when the placeholder is NOT shown 
    (meaning it has content), move the label up and shrink it.
*/
.form-group-float .form-control:focus + .form-label,
.form-group-float .form-control:not(:placeholder-shown) + .form-label {
    top: -10px; /* Moves the label above the input */
    left: 8px;
    font-size: 0.8rem;
    color: #007bff;
}
/* Add the focus color to the border as well */
.form-group-float .form-control:focus {
    outline: none;
    border-color: #007bff;
}

/* --- Submit button --- */
.submit-btn {
    width: 100%;
    padding: 12px;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    color: white;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
}
</style>

<div class="floating-form-container">
    <h2>Floating Label Form</h2>
    <form action="#" method="post">
        
        <div class="form-group-float">
            <input type="text" id="float-name" name="name" class="form-control" placeholder=" " required>
            <label for="float-name" class="form-label">Your Name</label>
        </div>
        
        <div class="form-group-float">
            <input type="email" id="float-email" name="email" class="form-control" placeholder=" " required>
            <label for="float-email" class="form-label">Your Email</label>
        </div>

<div class="form-group-float">
            <input type="text" id="float-subject" name="subject" class="form-control" placeholder=" " required>
            <label for="float-subject" class="form-label">Subject</label>
        </div>

<button type="submit" class="submit-btn">Submit</button>
    </form>
</div>