Blazor Wave form

 

This is a pretty cool trick if you like using placeholder text but don't like that the "text" goes away once the user starts to type.  What this does is simply moves the "placeholder" text up to a label when the input gets focus.  The cool part is it will move the "placeholder" text back once the input loses focus if there is no data in the input.  We are using actual text not the placeholder attribute.  This provides it with a cute but functional visual effect.  See live demo

HTML

The HTML is just s normal log-in form.  There is a form container, a form, and 2 form controls.  Both inputs are required and the password element is of type password so it will mask the input values.  Each input element also has a label that is used to let the user know the input needed.

CSS

Most of the CSS is to just set the layout and make it look nice.  The CSS trick we are using is to have a couple of classes to handle the moving of the text,  "focusMove" and a "focusBack" .  They are just using transforms to do the move the text around.

        .focusMove {
            transform: translateY(-30px);
            transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        .focusBack {
            transform: translateY(0px);
            transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

Blazor Stuff

To handle the switching of the classes, we need to know which element is active.  We can have a variable for that.  We also need to data bind the input fields to variables as well so we can check if they have a value in them so we don't put the text back.

            int activeElement = 0;

            string email = "";

            string password = "";

On the input element, we need to add the on focus handler and the data-bind:

<input id="email" type="text" required @onfocus="@(e => activeElement = 1)" @onfocusout="@(e => activeElement = 0)" @bind="email">

On focus, we will set the active element value.  We will also add a handler for the on-focus out to set the active element to none.

For the label, we will set the CSS class based on the active element to see if the label is moving up or down.  If moving down, we will only set the class if the input value is blank.

<label class="@(activeElement == 1 ? "focusMove" : email.Equals("") ? "focusBack" : "focusMove")">Email</label>

That's all it takes.

Summary

This would make a nice addition to a UI library.  You can parameterize the labels and inputs.  Maybe we will do that in a future post.

[piggy backed on Traversy Media]

[source]