I am super, super excited about this section because here we're going to turn our focus away from actually
creating and structuring web forms, to styling forms.
And by styling forms, of course, I just mean using CSS and pseudo classes and pseudo elements.
We've seen already a lot of examples of using these throughout the course.
And I'll just say off the bat that historically styling forms has been rather difficult, and form controls
vary greatly in how easy they are to customize with CSS.
But the good news, my dear students, is that it's getting a lot easier now because all the browsers
are kind of retiring and the modern browsers give us more features to use.
So as I mentioned, we've already looked at all the HTML you need to create awesome forms.
We started off at the very basics looking at the actual form wrapper itself, and then we turned our
attention to the most important and perhaps complex HTML element when it comes to forms, and that is
the input element.
And of course the type attribute is so unique when it comes to inputs because it defines the look and
feel of the widget we are creating.
We looked at the default type of text, but that wasn't all, was there?
We had password, checkboxes, files, submits,
etc
etc.
There are a ton of them and we did not stop there.
We looked at non-input form controls.
These are just elements that are commonly used in forms.
We looked at the textarea, select, datalist, output elements, and we didn't even stop there.
We looked at the progress bars, meter bars, we looked at option elements, optgroup elements ...
man, my mind is blown ðŸ¤¯.
We've done a lot.
But in this section, as I said, we're going to look at how to use CSS to style your forms.
And as I briefly mentioned, form controls do vary greatly in how easy they are to manipulate with CSS.
And this is true even today.
There are many form controls that are tricky to manipulate with CSS.
But if you're anything like me, you want to know why?
Why is it difficult to style with CSS?
Well, that is a very good question.
So let's separate out form controls versus CSS.
Firstly, form controls.
Form controls were added to HTML in the HTML 2 specification all the way back in 1995.
Isn't that old school! CSS, however, wasn't released until late 1996 and it wasn't supported very well
by browsers for a few years after that.
And this just meant that browsers relied on the underlying operating system to manage and render form
controls.
And even with CSS available to style, the HTML browser vendors have historically been reluctant to
make form controls stylable because they were thinking that users were so accustomed to their visual
appearance of their respective platforms.
But the good news, as I mentioned, is that time has changed and website owners want form styles that
fit in with the overall site design more than ever today, and the web has changed to make this possible.
But nevertheless, we still have these nuances even today.
So although we've come a long way, we still have the good, the nasty and the bad.
What are some of the good form widgets we have?
And by the good, I just mean these are elements that can be styled with few if any problems across
different platforms.
So things like the form, fieldset, some input controls, buttons, labels ...
these are very, very easy to style.
But of course we don't only have the good, we also have the bad.
These elements are more difficult to style.
They require more complex CSS and some maybe specific tricks.
Things like input where type attribute is set to search, checkboxes, radio buttons,
we've seen examples of these in the course where we had to kind of hide the default appearance and create
our own new one from scratch.
We've seen this and then of course we've got the nasty.
Here, these are just elements that really are difficult to style through CSS.
These include things like input where its type is set to color.
Remember that color picker? We can't really manipulate at all the visual appearance of that color picker.
We've got input of type file which is also very, very nasty. Range, select elements,
and remember those progress and meter bars?
Yes, we can target the, you know, the webkit pseudo classes.
Remember those?
But it's not well supported across browsers.
And for that reason they are nasty to style with CSS.
I guess what I'm trying to say is the real problem with the bad and the ugly controls is that they have
a very complex structure, and beyond some basic styling,
and by basic styling I mean such as changing the width or margin of the control,
you generally don't have the ability to style the controls internal components, for example, the
date picker calendar.
We can't change the actual style of
the calendar.
Or what about the button on the select element that causes the option list to display?
We can't style the look and feel of that button making up those widgets.
So you can see why I'm saying these are bad and ugly controls.
If you want to thoroughly customize these widgets, you'll have to create your own using HTML, CSS
and JavaScript.
Anyway, we've got a lot more to cover when it comes to CSS.
I just wanted to kind of give a high level summary before we continue.
Can't wait to see you in the next lecture.