Creating a Floating Input Placeholder/Label using HTML and CSS Tutorial

Submitted by oretnom23 on Saturday, March 4, 2023 - 14:57.

In this tutorial, you can learn how to create a Floating Input Label or Placeholder using HTML and CSS only. The main purpose of this tutorial is to provide students and beginners with a reference for learning some CSS tricks that are helpful for their current or future projects. Here, I will be providing the scripts of a sample web page that demonstrate the creation of floating input labels or placeholders using HTML and CSS only.

What is a Floating Input Placeholder/Label

The Floating Input Placeholder/Label is one of the most used UI features of websites nowadays. This feature doesn't affect any data or content of a website. It is mainly implemented just to give a better experience to the end-users while filling in the form fields. The floating input label/placeholder act as the input placeholder for unfilled or empty values input field and then converts as an input label when the field is focused and filled.

How to create a Floating Input Placeholder/Label?

The Floating Input Placeholder/Label can be easily achieved using only HTML and CSS. Using the Cascading Stylesheet (CSS) we can simply customize the input fields labels and placeholders using the CSS pseudo-elements, selectors, properties, and a little transition and animation to make it more interactive. We can use the CSS :placeholder-shown pseudo-class to detect if the input is filled or not. Check out the sample web page scripts below to understand it more.

Sample Web Form Page

Here are the scripts of a sample web application's form page that demonstrate how to create a floating input placeholder or label. The program will result in a simple form containing 3 input fields and the first input field is already filled by default or on page load.

HTML

Here's the HTML file script of the form page which contains the script of the page and form layout. It also contains the input and label elements which are the important elements for this tutorial.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>CSS - Floating Placeholders</title>
  8.     <link rel="preconnect" href="https://fonts.googleapis.com">
  9.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  10.     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
  11.     <link rel="stylesheet" href="style.css">
  12. </head>
  13. <body>
  14.     <main>
  15.         <section>
  16.             <h1 class="text-center">CSS - Floating Placeholders</h1>
  17.             <hr style="width: 50px;">
  18.         </section>
  19.         <section>
  20.             <form action="" id="sample-form" autocomplete="off">
  21.                     <div class="form-container">
  22.                         <div class="fields">
  23.                             <div class="form-field">
  24.                                 <input type="text" id="name" value="Mark Cooper" placeholder=" ">
  25.                                 <label for="name">Fullname</label>
  26.                             </div>
  27.                             <small class="text-body"><em>(Sample Filled Input)</em></small>
  28.                             <div class="form-field">
  29.                                 <input type="text" id="username" placeholder=" ">
  30.                                 <label for="username">Username</label>
  31.                             </div>
  32.                             <div class="form-field">
  33.                                 <input type="email" id="email" placeholder=" ">
  34.                                 <label for="email">Email</label>
  35.                             </div>
  36.                         </div>
  37.                     </div>
  38.             </form>
  39.         </section>
  40.     </main>
  41. </body>
  42. </html>

Page Layout Design

Here's the default page layout and design. The CSS script below does not contain the inputs, labels, and placeholder design yet.

  1. @import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');
  2. body *{
  3.     font-family: 'Rubik', sans-serif;
  4.     box-sizing: border-box;
  5. }
  6. /**
  7. Page Design
  8. */
  9. body,
  10. html{
  11.     height: 100%;
  12.     width: 100%;
  13.     margin: 0;
  14.     padding: 0;
  15. }
  16. body{
  17.     background-color: #efefef;
  18. }
  19. main{
  20.     padding: 2em 5em;
  21.     overflow-x: auto;
  22.     width: 720px;
  23.     margin: auto;
  24. }
  25. /*mobile devices*/
  26. @media (max-width:720px) {
  27.     main{
  28.         width: 100%;
  29.         padding: 2em .5em;
  30.     }
  31. }
  32. .text-center{
  33.     text-align: center;
  34. }
  35. .text-body{
  36.     color: #919191;
  37.     font-size: smaller;
  38. }
  39. .form-container{
  40.     width: 500px;
  41.     background-color: #fff;
  42.     border: 1px solid #d6d6d6;
  43.     box-shadow: 2px 2px 7px #5d5d5d;
  44.     min-height: 50px;
  45.     margin: auto;
  46.     padding:2em 1.5em;
  47. }
  48. @media (max-width:500px) {
  49.     .form-container{
  50.         width: 100%;
  51.     }
  52. }

Using the HTML and the default Stylesheet scripts that I provided above will result in something like the following image:

Floating Input Placeholder or Label using CSS

Form and Input Fields Design

Here's the script for the design of the Form Container and Input Fields.

  1. /* Form Field Styles */
  2. .form-field{
  3.     width: 100%;
  4.     position: relative;
  5.     margin-top: 1em;
  6. }
  7. .form-field input{
  8.     display: block;
  9.     width: 100%;
  10.     padding: 0.75em 0.35em;
  11.     border: none;
  12.     outline: none;
  13.     border-bottom: 1px solid #bbbbbb;
  14.     transition: all .3s cubic-bezier(0.075, 0.82, 0.165, 1);
  15. }
  16. .form-field label{
  17.     position: absolute;
  18.     top: .75em;
  19.     left: .75em;
  20.     color:#c9c9c9 ;
  21.     transition: all .3s ease-in-out;
  22. }

Floating Placeholder/Label Design and Animation

Then, here's the CSS script for the design of the input field and label/placeholder when the fields are in focus or filled.

  1. /* Form Field Filled/Focused Input Styles */
  2. .form-field input:not(:placeholder-shown),
  3. .form-field input:focus{
  4.     border-bottom: 1px solid #3e3e3e;
  5. }
  6. .form-field input:not(:placeholder-shown) ~ label,
  7. .form-field input:focus ~ label{
  8.     top: -1em;
  9.     left: 0;
  10.     font-size: small;
  11.     color:#5b5b5b ;
  12. }
  13. .form-field:has(input:focus):before{
  14.     content: "";
  15.     width: 100%;
  16.     position: absolute;
  17.     border-bottom: 1px solid #e7e5e5;
  18.     right: 0;
  19.     bottom: 0;
  20.     animation: border-reveal .3s ease-in-out forwards;
  21. }
  22.  
  23. /* Animation keyframe */
  24. @keyframes border-reveal{
  25.     0%{
  26.             width: 100%;
  27.     }
  28.     100%{
  29.             width: 0%;
  30.     }
  31. }

Note that the script above requires the input to have a placeholder attribute with at least a space value so that the application can detect if the input is filled or not.

Snapshots

Focused Input Fields

Floating Input Placeholder or Label using CSS

With Filled Input Fields

Floating Input Placeholder or Label using CSS

Demo

Floating Input Placeholder or Label using CSS

There you go! I have also provided the source code zip file that I created for this tutorial on this site. Feel free to download it by clicking the download button located below this tutorial's content.

That's it! I hope this Creating a Floating Input Placeholder/Label using HTML and CSS Tutorial will help you with what you are looking for and will be useful for your current and future web application projects.

Explore more on this website for more Tutorials and Free Source Codes.

Happy Coding =)

Tags

Comments

Submitted byAnonymous (not verified)on Mon, 03/06/2023 - 03:20

amazing
Submitted byAnonymous (not verified)on Mon, 03/06/2023 - 03:21

good parforming

Add new comment

About text formats