how to use float label in web page?

What is float label?

Float label means that when we click or type on any form fields as input, textarea then it’s label move anywhere as Up Down Left Right. This is possible with CSS and jquery. CSS work with some limited features as it’s working with valid property. And jquery working good but many times you can use your requirements. 

Float label example with CSS.

<style>

.formfloat .form-control { position: relative; width: 100%; border-bottom: 1px solid #ddd; padding-top: 23px; padding-bottom: 10px; }

.formfloat input,  .formfloat textarea { display: block; width: 100%; border: 0; outline: 0; resize: none; }

.formfloat input + label,  .formfloat textarea + label { position: absolute; top: 10px; transition: top 0.7s ease, opacity 0.7s ease; opacity: 0; font-size: 13px; font-weight: 600; color: #ccc; }

.formfloat input:valid + label,  .formfloat textarea:valid + label {opacity: 1;top: 3px;}

.formfloat input:focus + label,  .formfloat textarea:focus + label { color: #0bf; }

</style>

<div class="formfloat">

        <form>

                <div class="form-control">

                  <input type="text" placeholder="Name" required />

                  <label>Name</label>

                </div>

                <div class="form-control">

                        <input type="email" placeholder="Email Id" required />

                        <label>Email Id</label>

                      </div>

                <div class="form-control">

                  <input type="password" placeholder="Password" required />

                  <label>Password</label>

                </div>

                <div class="form-control">

                  <textarea placeholder="Message" required></textarea>

                  <label>Message</label>

                </div>

              </form>

            </div>

Float label example with Jquery.

<style>

        .smoothFrm { max-width: 500px; margin: 50px auto; padding: 20px; background: #eee; font-family: Arial, Helvetica, sans-serif; }

        .frmGroup { position: relative; margin-bottom: 10px; }

        .form-control { padding: 5px; border: 0; border-bottom: 3px solid #ccc; font-size: 16px; margin: 10px auto; background: transparent; outline: none; margin-bottom: 10px; }

        /* For moving placeholder */

        .smoothFrm input:focus ~ span.smoothLabel, .smoothFrm input.hasValueFrm ~ span.smoothLabel, .smoothFrm select:focus ~ span.smoothLabel, .smoothFrm select.hasValueFrm ~ span.smoothLabel, .smoothFrm textarea:focus ~ span.smoothLabel, .smoothFrm textarea.hasValueFrm ~ span.smoothLabel { top: 0; font-size: 11px; line-height: 12px; padding: 2px 5px 0; color: #000; left: 0; }

        .smoothFrm span.smoothLabel { /* -webkit-transform: translateY(-50%); */

        -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; position: absolute; top: 49%; left: 0px; color: #000; font-weight: normal; cursor: text; pointer-events: none; z-index: 99; width: auto; }

        /* This is hack for the other browsers */

        ::i-block-chrome, .smoothFrm span.smoothLabel {top: 10%;}

        ::i-block-chrome, .smoothFrm input:focus ~ span.smoothLabel { top: -10px;}

        ::i-block-chrome, .smoothFrm input.hasValueFrm ~ span.smoothLabel { top: -10px;}

        ::i-block-chrome, .smoothFrm select:focus ~ span.smoothLabel { top: -10px;}

        ::i-block-chrome, .smoothFrm select.hasValueFrm ~ span.smoothLabel { top: -10px;}

        ::i-block-chrome, .smoothFrm textarea:focus ~ span.smoothLabel { top: -10px;}

        ::i-block-chrome, .smoothFrm textarea.hasValueFrm ~ span.smoothLabel { top: -10px;}

            </style>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <script>

        $(function () {

            $('input, textarea').each(function () {

                var valls = $(this).val();

                if (valls != "") {

                    $(this).addClass("hasValueFrm");

                } else {

                    $(this).removeClass("hasValueFrm");

                }

            });

            $(".placeholderfrm").change(function () {

                if ($(this).val() !== "") {

                    $(this).addClass("hasValueFrm");

                }

                else {

                    $(this).removeClass("hasValueFrm");

                }

            });

        });

    </script>

<div class="smoothFrm">

        <form>

            <div class="frmGroup">

                <input type="email" ng-model="Email" name="Email" class="form-control placeholderfrm" required=""

                    id="email" aria-invalid="true" value="sheo">

                <span class="smoothLabel">Email</span>

            </div>

            <div class="frmGroup">

                <input type="password" ng-model="Password" class="form-control placeholderfrm" id="password" required=""

                    aria-invalid="true" value="Sagar">

                <span class="smoothLabel">Password</span>

            </div>

        </form>

    </div>