I have the following code:

/* Contact Form */

input[type=text],
[type=email],
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #555;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #0563bb;
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
}

input[type="text"]:focus,
input[type="email"]:focus,
#subject:focus {
  background: var(--bgFormElsFocus);
  transform: scale(1.02);
  transition: transform 0.2s ease-in-out;
}

input[type=submit]:hover {
  opacity: 0.9;
}

.contactform {
  position: relative;
  border-radius: 50px;
  background-color: #f2f2f2;
  padding: 5px;
  z-index: 2;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-top: 1%;
  width: 100%;
  animation-name: gradient;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

.contactform:hover {
  animation-name: gradient;
  animation-duration: 15s;
  animation-iteration-count: infinite;
}

.column {
  float: center;
  width: 50%;
  margin-top: 6px;
  padding: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .column,
  input[type=submit] {
    width: auto;
    margin-top: 0;
  }
}

.shakingErr {
  border-color: red;
  animation: shake 0.82s forwards;
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

<section id="contact">
  <div  data-aos="fade-up">
    <div >
      <div style="text-align:center">
        <div >
          <h2><br/>Get In Touch</h2>
        </div>
        <p>Feel Free To Reach Out To Me Through This Form! </p>
      </div>
      <div >
        <div >
          <form name="myform" action="https://formspree.io/f/xr123gjbqpq" id="my-form" method="POST" novalidate>
            <label for="firstname">First Name</label>
            <input type="text" id="first name" name="firstname" placeholder="Your First Name.." required>
            <label for="lastname">Last Name</label>
            <input type="text" id="lastname" name="lastname" placeholder="Your Last Name.." required>
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" placeholder="Your Email.." required>
            <label for="subject">Subject</label>
            <textarea id="subject" name="subject" placeholder="Lets Collaborate.." style="height:170px" required></textarea>
            <input type="submit" value="Submit">
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

I would like a text animation on the input fields. For example, I would like my expected output to be like this:

https://watch.screencastify.com/v/3mlMie2rx0UzhdymHYCR

As you can see, I would like the text such as "First Name" to be inside the input field, and when the user clicks the input field, the text should animate and be at the top. How can I achieve this task? Any suggestions?

CodePudding user response：

There are a lot of variants how to do that, one of them is to use extra-div for input & label, and role of floating text will be played by label:

.wrapper {
  padding: 20px;
}

.input-data {
  height: 40px;
  width: 100%;
  position: relative;
}

.input-data input {
  height: 100%;
  width: 100%;
  border: none;
  font-size: 17px;
  border-bottom: 2px solid silver;
  transition: border-color .4s;
  outline: none;
}

.input-data input:focus~label,
.input-data input:valid~label {
  transform: translateY(-20px);
  font-size: 13px;
  color: #4158d0;
}

.input-data label {
  position: absolute;
  bottom: 10px;
  left: 0;
  color: grey;
  pointer-events: none;
  transition: all 0.3s ease;
}

.input-data input:focus,
.input-data input:valid {
  border-color: #4158d0;
}

<div >
  <div >
    <input type="text" required>
    <label>Name</label>
  </div>
</div>

CodePudding user response：

I tried to create a Beta for you, using the video you linked as a reference

using HTML and CSS only...

the trick here is creating an Extra Div as a Parent, so we can put the label and input inside.

now set the parent to have a position: relative; so the label will be absolute

now successfully we can use TOP, LEFT, RIGHT, BOTTOM and that's it (position the label as the place-holder)

the logic

I put the logic here .input-container input:focus~label

make sure that the label is after the input in HTML, and inside the parent

delete the border on focus

remember that the input if focused it will have like a border automatically...

to delete this border use outline: none; because that border CAN'T be deleted with border: none;

that's it, test the code I write for you! and I hope this will helps

here the code

* {
  --input-height: 3rem;
  --light-black: rgba(0, 0, 0, 0.3);
  --medium-black: rgba(0, 0, 0, 0.6);
}

section {
  height: 100vh;
  width: 100vw;
  display: grid;
  place-content: center;
}

.input-container input {
  height: var(--input-height);
  width: 80vw;
  font-size: 2rem;
  border: none;
  border-bottom: 2px solid var(--light-black);
}

.input-container {
  position: relative;
  display: grid;
  place-items: center start;
}

.input-container label {
  position: absolute;
  left: 1rem;
  font-size: 1.5rem;
  color: var(--medium-black);
  transition-duration: 0.5s;
}

.input-container input:focus~label {
  position: absolute;
  font-size: 1rem;
  top: -1rem;
  left: 0;
  transition-duration: 0.2s;
  z-index: 2;
}

.input-container input:focus {
  outline: none;
}

<!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">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <section>
    <form action="">
      <div >
        <input type="text" name="" id="my-input">
        <label for="my-input">name</label>
      </div>
    </form>
  </section>
</body>

</html>