Before we talk about widgets, the input tags, fieldsets, etc etc,
I want to first clarify something from the very, very beginning.
I want us to look at generally the form structure. And by form structure, I just mean I'm going to look
at the way you design a form. Beyond the structures specific to web forms,
it's just good to remember that form markup is just HTML.
That's all it is.
Forms are just HTML markup.
There's nothing more to it.
And this means that you have all the power of HTML to structure and design your own forms.
There are few rules, though.
We know that we have to wrap our form within a <form> tag, but from there you can pretty much go wild.
Wild ðŸ¥´.
(music playing)
Not that kind of wild ðŸ¤£.
What I mean, is you just have a lot of flexibility. As we've already seen in some of our examples,
it's common practice to wrap a label, or certain widgets within a <div> tag to define sections.
But it's also common to see <ul>s and <li> tags within forms.
And what's the difference between using unordered list tags, and list items versus divs?
What's the difference?
Well, very little.
Don't believe me?
That's fine.
Let me hop over to the console and let me show you. Very quickly,
here is a blank index.html file, and I want to prove the fact that it doesn't really matter how we
structure a form, it doesn't affect the visual appearance in any way.
Okay.
In many cases.
So here we go.
Here's HTML. What I want to do is create a form.
We don't need an action.
I'm not even going to do anything with this form.
I just want to show you the styling.
The first thing I want to do is I want to wrap,
okay,
well, let me do a comment here.
Let's use a <div> tag to create a name and email input form.
Right.
As I just said, let's wrap everything within a <div>.
Let's do a label for name,
Name, and you can see how quickly it is to create a form
once you know, you know, the general flow and what to do. It's very, very easy. For input type
we can have text, and the name we can have is name, the ID is name.
You know, in our instance, we don't even need to define a name attribute because we're not even submitting
this.
I just want to show you what it looks like.
So there we go.
That's the name.
Let's just copy this entire block, paste another one, and let's do email.
Email.
There we go.
I guess the type of this input will be email.
Is that right?
And of course, let's open this up on Live Server and zoom in.
There we go.
Name and email.
I don't even have a submit button, but who cares!
I just want to show you this is how it looks when we wrap it in a <div> tag.
Now let's go here, and you guessed it, let's use a <ul> and <li>
tag, to style our form.
These are commonly used.
But remember, we have to remove default styling, because with lists and all that, we get default styling.
So I just want to remove the default styling.
Just remind me.
We must, must not forget before we, before we do this.
Yeah.
As I mentioned, instead of using divs, let's use the <ul> tag now. And let's wrap each kind of section
of our form in <li> tags.
Very, very straightforward.
Same thing.
Label for name.
Name.
Input type can be text.
We don't need a name attribute.
The ID can be "name", because we have to match the name value for that "for" attribute,
right?
We've said that the "for" attribute's name is "name" and it has to match the ID of our input.
You know what,
I can just copy,
let me just copy and paste these two above.
And,
paste it here.
Hope you're following along.
Very simple.
If we look at this now, right, in our browser, they should be exactly the same.
Ahhhh man ðŸ™ˆ!
I asked you to remind me that we have to remove this default styling.
So let's go here to the top.
And before we get to the <body>, let's just create a <head> element. Within the <head>, a <style> element
and here we can just grab the ul and the li, and we can remove styling ... list-style:none,
none,
padding-left
zero.
Save this.
Go to our browser, and BOOM SHAKALAKA ðŸ’¥!
There you go.
Proof that it does not matter how we style a form, it's up to us as developers.
If you're feeling more comfortable using the unordered lists and list items approach, go for it.
If you're more comfortable using divs, go for it.
It depends what you enjoy and what you like.
It's like art. But as you can see, it makes no difference to the visual representation to the user.
So there we go.
We've just seen there's very little difference, actually there's zero difference between using ul
and li's, versus using div tags.
Just FYI, often li elements are used, especially if you have multiple checkboxes or radio buttons.
But again, you don't have to - it depends what your style of coding is.
And because we have the power of HTML at our disposal, we don't have to limit ourselves to using divs
either.
In other words, divs and ul tags are not the only options available to you.
It's also common practice to use the fieldset elements, H1, H2 tags and even sections to structure
complex forms.
We even saw when we were looking at Mailchimp's form that they had a whole lot of fieldsets in there,
didn't they?
So what I'm trying to say is that there's not only one right way to structure and design a form.
It's like art ðŸ–¼.
It's up to you to find a comfortable coding style that suits you.
But as we'll see, there are certain nuances.
There are certain kind of conventions in the development industry that kind of veer us to stick with
conventions.
And I'm going to be talking about those as we go through some of these elements.
So I guess this will be a good place to stop.
But before we start talking about widgets in more detail, I want to quickly talk about this fieldset
element in some more detail.