Best practices

Hi everybody. 

For this first video, we will talk about traditional form design.

When you design a form, using the form element, usually you add two attributes to it:

1) first attribute called action that has for value the URL of the server side component that will process the data entered and sent when you submit the form. 

And

2) an attribute called method that will indicates the way the browser will send the data from the form to the server. 

As this course is really focused on HTML5, that is a 100% client side technology, we're not going to explain how we can process form data in PHP, in Java or in asp.NET or whatever. 

We will focus on the client-side on the new input field, the new attributes and a new validation system that is included in the browser that implements the new HTML5 features.

So, one of the good practice, this is not new with HTML5, is to group different input elements into a fieldset. 

So you can see some details about this practice in the accessible form part of the course. 

So here, we use the fieldset that generated this small bar here. 

That is a visual rendering of the group and we use the legend element inside that renders as a title in the fieldset border. 

Inside, for the sake this example, we just used two input fields of type="text ». 

We associated a label with the ‘for’ attribute that matches the ID attributes.

This is a good practice for accessibility, and if you click on the label, it gives the focus to the input field thanks to the ‘for’ and the ID attributes that match.

What we can just add is some CSS to make this a little bit nicer. 

Usually for the fieldset I add some padding. 

Padding if for the internal space; so you can see that I added some space here. 

And for separating the different lines here, I usually add some margin-bottom to the labels.

Oh sorry, with a value, 10px for example.

And in order to make this work, I use display ‘inline-block’ for the labels.

OK, I made a small mistake here, about the margin-bottom. 

And you can see that if I change the value or the length of the levels, the input fields are no more aligned. 

So in order to align the input fields, the common technique is input, float them to the right and give them a right margin. 

Let's say maybe 7px for the margin-right, and give them a width… 

Ok, like that. 

Like that, you see if I change the length of the labels the input fields are aligned. 

This is not new with HTML5.

What is new is that, okay let me just add a border-radius to the fieldset.

This makes nice rounded corners here.

Okay what is new is that some attributes like this one ‘required’ that will make the input field invalid if it's empty. 

And i can visualize this automatically, because the new input fields with HTML5 inherit a CSS pseudo class called ‘invalid’.

I use the column followed by the keyword ‘invalid’ to visualize that. 

Or « background-color:pink; »

Like this you can see that the fields are invalid because they're pink and become valid as soon as I type something inside.

If I try to submit a form with an ‘invalid’, field it pops up some bubbles with an error message.

And the message is in the language is the one of my operating system ,so here it's in French. 

So this is new.

It's called the built invalidation system and some new input fields like, for example, the email: the input type="email ».

Just change that…

This time it will become valid not when I type something but also when I type something that looks like a valid email address. 

If I remove this character the @ character here, it becomes invalid.

So, we've got some defaults rules for validating new type of input fields. 

If I want to enter an age, I can use the new age… type="number" for example.

Like this, it's an input field for entering numbers and this one has some min values like 1 year old, max value is 120 years old, and if I type something that is not valid, you can see that it’s with the pink background, meaning it is ‘invalid’.

If I type a real number, it becomes valid. 

Or if I choose a real number.

Also, particularities with this input field, is that you can use the step attribute… step=5 means <I made a  mistake> okay like this it will jump from 1 to 6. 

If the value is not a multiple of 5, it's ‘invalid’.

Starting from 0. 

Okay if I enter 20, it's valid but 21 is not.

If I add 5 you can see it jumps from one multiple of 5 to another one.

I'm going just to show you the last example but there are more input fields on that brought by HTML5, all the details will be in the course.

For example, if you want to select a birth date, there is a new input field of type="date ».

You can also indicate some constraints with attributes, but you will see that in the dedicated part of the course.

Here, you got directly without writing any JavaScript a calendar that is popping up to select your birth date… 

Let's say something that is random. 

And here you've got a birth date, and you can enter using the keyboard but if you type something that is invalid..

This is the really basics of HTML5 forms. 

There are 13 new input elements, lot of new attributes and others elements that can be used to constraint the values. 

For example, instead of having a calendar, we can have only a small set of dates to choose from. 

All these things are explained in the course, take some time to read and look at all these examples.

This is the end of this video good luck … good work !