Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:11Length:1.4 hours
An introduction to styling html forms 400x277
  • Overview
  • Transcript

2.5 Positioning Form Elements

In this lesson we’ll talk about positioning form elements. You’ll probably find this straightforward because, with two exceptions, all form elements can be positioned in any way you want. So let’s see about those exceptions.

Related Links

2.5 Positioning Form Elements

Welcome back to the course. In this lesson, we're gonna talk about positioning form elements. And you'll actually have a very easy time with this because with two exceptions, all form elements can be positioned in any way you want. So now let's see about those two exceptions. I have again set up a very simple example here in CodePen. The only difference from the previous examples is that all fields are now encapsulated in a field set and we also have a legend, right? So here's the field set, and here is the legend. Now by default, the legend looks like this. And let's say that you want to move it up or down and not have it just overlap this line here. So you would go legend, and you would probably say, okay, let's add a margin-top of like 5 pixels. So that doesn't work, let's increase this. And that doesn't work either. Okay, let's try a padding, all right, padding-top, let's say 50 pixels. Okay, so that did something, it pushed it down. But it left this empty space here, so that's not good. And the truth is you can't really move this legend element, it's stuck there. And if you do move it with padding, you're left with this gap here, so there's no way around that. And you would say that okay, I'll just give it up. But legend is actually an important element for accessibility because it is being read out loud by screen readers. Right, a legend basically describes what that form is all about. So instead of just not using it, you can use it, but you can decide to hide it altogether. And to do that, you would say width 1 pixel, height 1 pixel. You would set an overflow to hidden, and you would set a position to absolute. And that will effectively hide it, but it will still be there available for screen readers to read out loud. So that's the legend, now what about the fieldset? The fieldset is relatively easy to style. You can add backgrounds to it if you want. You can add borders, paddings, or you can reset them altogether. So in my case I can do border 0. I can also do a padding 0 to get rid of this. You'll have a very easy time working with the fieldset. Now speaking of positioning and stuff, and this is something you probably noticed in the other examples I showed you. What's up with the label for this text area? Well by default, the browsers see the text area as an inline element. So that's the way they display it next to their label. But the label is positioned at the bottom. Normally, you would want it at the top, right? So a very easy fix for that is to target that text area and simply set vertical-align to top. And I'll put it in the correct position, just in case you wanna use it like this and not in a block style, so the text area beneath or under the label. If you wanted to do it like this, this is a very handy property to have. All right, so in terms of positioning, these are the two things I wanted to show you. Before we wrap up this lesson, I just wanna say this quick thing. All the techniques you saw me use here can actually be found in a very popular reset CSS file called Normalize.css. And inside CodePen you can actually add it right here. Under CSS just check Normalize, and pretty much all of these properties will be applied. Notice how these elements have suddenly changed. Well, that's the Normalize file. And if we take a look at it in a browser, you can find it simply by googling Normalize.css. You can also find a link down below. So if we look in the file itself, you'll notice that on some form elements, you'll find that font-family inherit is set, font-size 100%. And along with some other handy resets here, you can also find that on some input types, webkit or appearance is set to none with the correct prefix. So a lot of what we talked about is applied in this Normalize file. And I strongly recommend you use this in every project because it doesn't just reset the styles for the forms. It does that for pretty much all the elements in your HTML document. So that's definitely a great way of getting a clean slate every time you start a new project. All right, so I think these four lessons kind of gave you the basic necessary information you need to start styling some forms. So coming up in the next chapter, let's do just that, styles and forms. We'll begin in the next lesson where we're gonna begin styling a simple form kit that I've put together, and we'll begin with the inputs. So I'll see you in the next lesson.

Back to the top