DEV Community

loading...

Today I have learned to wave the form Input

Ahtsham Ajus
Beginner. Starting my journey of Web Development.
・2 min read

This tutorial will mainly focus on how to use transitions in CSS to create a form input label wave.i used javascript to create the wave effect input label.when input is focused. Let's dive into the world of transition!

Today I have learned to wave the form input, in this I have done HTML CSS and JavaScript, also with the help of CSS, I have given the transition of the label in the input.

Here's My HTML code

<!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">
    <link rel="stylesheet" href="./style.css">
    <title>Form Input Wave</title>
</head>
<body>
   <div class="container">
       <h1>PLease Login</h1>
       <form>
           <div class="form-control">
            <input type="text" required>
            <label>Email</label>
           </div>

           <div class="form-control">
            <input type="password" required>
            <label>Password</label>
           </div>

           <button class="btn">Login</button>

           <p class="text">Don't have an account?</p>
           <a href="#">Register</a>
       </form>
   </div>

    <script src="./script.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Here's My CSS code

@import url("https://fonts.googleapis.com/css?family=Ubuntu");

* {
  box-sizing: border-box;
}

body {
  background-color: steelblue;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Ubuntu", sans-serif;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

.container {
  background-color: rgba(0, 0, 0, 0.4);
  padding: 20px 40px;
  border-radius: 5px;
}
.container h1 {
  text-align: center;
  margin-bottom: 30px;
}

.container a {
  text-decoration: none;
  color: lightblue;
}

.btn {
  cursor: pointer;
  display: inline-block;
  width: 100%;
  background: lightblue;
  padding: 15px;
  font-family: inherit;
  font-size: 16px;
  border: 0;
  border-radius: 5px;
}

.btn:focus {
  outline: 0;
}

.form-control {
  position: relative;
  margin: 20px 0 40px;
  width: 300px;
}

.btn:hover {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.4);
}

.btn:active {
  transform: scale(0.98);
}

.text {
  margin-top: 30px;
}

.form-control input {
  background-color: transparent;
  border: 0;
  border-bottom: 2px #fff solid;
  display: block;
  width: 100%;
  padding: 15px 0;
  font-size: 18px;
  color: #fff;
}

.form-control input:focus,
.form-control input:valid {
  outline: 0;
  border-bottom-color: lightblue;
}

.form-control label {
  position: absolute;
  top: 15px;
  left: 0;
}

.form-control label span {
  display: inline-block;
  font-size: 18px;
  min-width: 5px;
  transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.form-control input:focus + label span,
.form-control input:valid + label span {
  color: lightblue;
  transform: translateY(-30px);
}
Enter fullscreen mode Exit fullscreen mode

Here's My JAVASCRIPT code

const labels = document.querySelectorAll(".form-control label");

labels.forEach((label) => {
  label.innerHTML = label.innerText
    .split("")
    .map(
      (letter, idx) =>
        `<span style="transition-delay:${idx * 50}ms">${letter}</span>`
    )
    .join("");
});
Enter fullscreen mode Exit fullscreen mode

Here's output on Code pen lets see..

Discussion (2)

Collapse
adam_cyclones profile image
Adam Crockett • Edited

Nice and simple effect 👍
Here's a one liner because everyone's giving them out these days.

Array.from("hello world", (letter, i) => `<span style="transition-delay:${i * 50}ms">${letter}</span>`).join('');
Enter fullscreen mode Exit fullscreen mode
Collapse
adam_cyclones profile image
Adam Crockett

Hiya Ahtsham, me again, I spotted a bug 😩

The span labels sometimes get in the way on a mobile because they float above the input, a tap or click on the lettering then blocks the focus.
Never fear, here is one of several solutions

<span style="transition-delay:${idx * 50}ms; pointer-events: none;">${letter}</span>
Enter fullscreen mode Exit fullscreen mode

Now you can "click through" the spans as if they where ghosts 👻, spooky right?