7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 33Length: 4.8 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

5.1 Floating Form Labels

Floating form labels are a popular way to use subtle animations to make forms more usable, especially on mobile devices. In this lesson, you will create the initial styles for a pair of floating labels for your inputs that will animate over the text field when the input is activated.

Related Links

5.1 Floating Form Labels

Hello and welcome back to Practical Web Animation. In this lesson, we're gonna get started with a new effect and this is another very subtle animation that we're gonna be creating here. And the particular effect that we're going for is called the floating label effect. And this is an effect you might have seen on some mobile apps or maybe on some mobile websites, where you have a form with some text fields and those text fields have some placeholder text in them. But when you click in that text field or tap on that text field if you're using a mobile phone to start editing it, the placeholder text will disappear but that same text will animate in above the text field. So that even when you're typing in or inputting your value, you can still see the context of what's supposed to be in that field above it. And in order to achieve this effect, we're gonna need more than just HTML and CSS, we're actually gonna be using JavaScript as well. So the URL for the starting pen for this lesson can be found in your course notes. Once you open that up, go ahead and click on Fork to create your own copy of it and we'll get started. So as you can see, we have our form element here and inside that form element we have to divs this with a class name of input group. In that input group we have a label, and then we have an input field. Now the input field has placeholder text and the placeholder text has the same text as the label Itself. And that's no accident. Right now, we can see both of them in our document but we're not going to keep both of them there by default. Initially, we just wanna see the placeholder text and then when we click in the text field, we want that placeholder text to disappear and we want the label to animate in. So as you can see, I've already done a couple of small styling changes in our CSS. For all of our elements, I've set box size and the border box. For a body of set the text color to a medium gray and our font family to Helvetica. And for this input group container which is these divs that contain our labels and inputs, I've set the width to 340 and centered them in the document. So we're using a top bottom margin of 50 pixels to give a little space between them, and then our left right margin is set to auto so that it will center itself. So the first thing I wanna do is I wanna style the inputs themselves. You'll notice that when we click on these inputs it has that bright blue focus on it, and I wanna get rid of that first of all. So I'm gonna go into our inputs colon focus and we're just gonna turn off that outline. We're gonna set outline equal to none, so that now when we click in those we don't get that bright blue outline. Then I'm gonna jump into the input element itself without the focus on it. And we're gonna make some changes here. First of all, I'm gonna turn off the border. I'm gonna set border to none so that the default border will go away. And then I'll just wanna put a bottom border on it. So we're gonna set the border-bottom property to one pixel solid and I'm gonna set it to a color of #888 or light gray color. And there we go. So, now we see that bottom border in our text field. I'm gonna bump up the font size a little bit. Let's bring that up to 20 pixels. And then I'm gonna set the width here to 290 pixels and so that gives us a nice large text field to work with. And now we can get a hint of what this is gonna look like once we get done. Initially we're just gonna see the placeholder text here and we won't see this label text above it. But when we click in the text field, the placeholder text will disappear and then the text that we see now above it will animate into place. So the next thing I wanna is I wanna animate the label. So let's go past our, let's go to the very bottom here past our input focus, skip a couple lines and let's create a rule for our label class. Now if you have a bunch of form fields and not all your labels are gonna do the same thing, you might wanna be more specific than just pointing to the label element. But that will be dictated by what's on your page. For now i just wanna point to every label on our page since we only have two here. So for our label class I'm gonna brighten up the color a little bit. It's still gonna be gray but it's gonna be a lighter gray. And then I also wanna set the positioning here to absolute. And you'll see that that kind of takes it out of the flow of things. Once we set our position to absolute, the other items on the page are no longer going to flow around it. Instead they'll just pretend like that element isn't there. So, since it's pretending like that labels not there it's just going where that label would be In the first place. So for now, if I were to set, for example, the left position to zero and the top position to zero, we're gonna have a little bit of a problem because they're gonna jump all the way up to the top left corner of the page. I don't want that, I want them relative to their parent, which is gonna be these input groups. So we're gonna scroll back up to our input group class and we're gonna set its position to relative. And that should get our labels back where they started a moment ago. But now that our position is at the absolute, it will be a little easier to position them where we want them. So initially this is actually where i want them to be. They're gonna be invisible, initially, but i want them to be here. And then when we animate them, we're going to move them up to a top position of negative 20 pixels, and then that will show up above the text that we're entering in. So at any point in time, whether we are just looking at the page when it first loads, or whether we're entering in our own values, we'll still be able to see what's supposed to be in that text field. But again for now, I'm gonna set the top value to zero. So once we have that in its initial position, I just wanna add one more property here, and that's gonna be our opacity property and we're gonna set that to zero. So now we've got a good starting point for our animation and in the next lesson we'll jump in and make this animation happen. So thank you for watching and I'll see you in the next lesson.

Back to the top