So in this video we're going to go ahead and create a solution for this registration form.
So I have a new file going to save it.
I'm just going to call this registration form that HDMI I'll use my sublime shortcut
and get our boiler boiler plate going.
So when we're faced with a project like this there's quite a few places that we could start.
And the first thing that I'm going to do is add the form Tagen and then I'm also going to add this H1
just up top here
and Louis put register.
So let's go ahead and open our registration form here and move it over.
Ok not quite there yet but at least or Each one is looking good.
So let's go back to sublime and let's stick let's start with the simplest thing should be these this
top level of inputs.
The first name and last name.
So we'll start with input.
And those are type equals text ups.
And let's give it a placeholder which looks like it should be John let's do another one placeholder
Smith and then we need to give two labels.
So we could use either syntax for labels.
I'm going to use the four.
So I'll call this first and we'll make sure we get an ID equal to first.
And then this label will say first name colon which will give us that and then we need to do the exact
same thing.
Another label for the last one of say a last name colon and then we need to give this ID equals last
.
So let's check in and see what we have.
So far so good.
There is one small thing that we're missing which is we haven't given these inputs a name so just give
it the name first and name the last great.
So let's move on to the next chunk here.
What we're actually missing one thing which is the validations.
So while we're here remember that first name and last name are not supposed to be blank.
So in order to do that it's very simple we just add the required attribute on the inputs required and
set that to be true.
So I'm going to go ahead and expand this just so that we can see a little bit clearer what we're working
on.
So the next thing if we consult the form here is the gender radio button.
So we need to have three radio buttons.
So those are input type equals radio.
Three of them.
And if we take a look with that gives us first thing you'll see is that they are in line with the other
elements which is not actually what the form that I gave you is supposed to look like.
So we have a few options to get things to behave.
We can throw them in a paragraph
like this just add some spacing.
Now we get them on a separate line.
I'm just going to use a div here.
There you go into a div.
Doesn't quite have the same spacing.
A paragraph has in the C S S video will actually talk about what that spacing is.
So now we need to go ahead and add or labels
and before we do that let's actually start give them the same name so name will be gender here.
Let's go ahead and should have used my shortcut here which is to command click multiple cursors so we
get them naming cross-gender and then let's give them each a value.
So the first one the value will be male.
Second one will be female.
The last one is either and refresh.
We don't see any of that of course because that's just behind the scenes.
So what we need to do is add in our labels.
So we're going to want three labels.
First one are going to say label four and we'll just call this male
teated we have here.
No Colon's so just mail and then Id equals mail.
Same thing.
Another label here.
This one will be female.
And then we're going to want to say Id me for you cause female.
And then you go on to say ID you cause female.
So as you can see building these forms it gets a little tedious sometimes.
You have a bunch of labels and a lot of mess things you just have to be extra careful that you have
everything corresponding correctly.
So we want for other I mean we want to do ID equals either.
So let's just check in on this see what we have.
All right.
That looks great.
We can only select one which is what we want.
Next thing we can move on to let's go ahead and add the submit button at the end just while we're here
.
So that's going to be input type equals submit.
And let's just make sure validation works.
Yes it does great in good shape.
So next up we have an e-mail and a password field.
And those are on new line as well.
So let's go ahead and add another div and we're going to do an input and this time it's type equals
e-mail.
It's not just text and the placeholder here was your e-mail which is admittedly not the best placeholder
text but we're going to stick to that image make sure we follow the assignment.
So input type is e-mail placeholder is your email and then we have another one for password
and that gives us two inputs.
Next up we can either go with name so to just say name is email here member in case you're confused
.
That name is purely used behind the scenes to figure out how to send the data what should we send the
data in the request under What's the name of it.
So in this case whatever we type in this field is going to be called e-mail.
So we don't see any impact just in case.
I do think this is one of the more confusing parts because it's not very visual.
So this one will say name was password and then let's go ahead and add or labels.
So just to mix it up here I will use the other type of label which is where we nest the data inside
the label itself.
So will say e-mail colon rather than the four and Id syntax.
They work the same way let's do email and password.
Let's be very precise.
There are colons on both of them.
Great.
But save that and there is one other thing that we should take a look at and see are validations are
in place fill this in.
No.
So one thing that we're missing is we need to require the e-mail.
So we need to go to our e-mail and add required now we refresh fill these out.
We leave e-mail blank if we type in a non-valid e-mail.
We get this error.
Great.
So so far everything looks good.
We're going to come back to the bonus password validation at the end before we get there.
Let's move on to the birthday select.
So three dropdown menus.
So again you can add another div and this time in this div we're going to add three different selects
.
So one two three.
Let's start with this first one which is four month and let's go ahead and start with the label.
There's only one label here for everything.
So you know do it like this label and put all three subjects inside and this label was going to say
a birthday and it's going to look like that.
So if we see what we get we have our three inputs are three labels and all that we need to do is add
in the correct data inside.
So that's a bunch of options.
So the first one let's go ahead and add I'm just going to do two or three here so this will be for months
.
So we'll do Jan and March.
The next one do the same thing.
Just a few options and this will be for day.
So we'll start.
Let's do double digits at 10 11 and 12.
And the last one will be the year.
Just do three again and let's do 1999 2000 2001.
Great.
And you can see we get our dropped down here.
There is one small difference though which is that our start right away with January and numbers and
the year.
But the one that I gave you starts off with month day and year.
So there's a few ways of doing that.
The simplest one is just to make the very first option say month
day
and year and by doing that HDMI will the form just picks the very first option and it decides that the
initial value.
So that's the most common way of doing that.
So now our firm looks pretty good.
We just need our final I agree to terms and conditions checkbox so we can add yet another div here and
then that's properly
final div instead of this one we're going to let's start with the label this time let's do four and
this one let's call it let's call it agreed.
I agreed to the terms and conditions
and then the next thing that we need is our input tape calls checkbox let's give it ID because I agreed
and name and also agreed.
And that's what we get looks good to me.
So one thing that we also need to add to our select tags is the name.
So let's just call this month
and this one of the day and this one will be here.
And remember that if we didn't want in January and fab and Mar to be what was actually sent through
if he wanted it to be something different like a number corresponding we would put a value here.
So for Jan we might put value 1 in this case.
I'm fine with just having Jan there.
I didn't specify how it needs to behave.
So we come back here it looks pretty good.
Everything looks the same.
The last thing we really have to discuss is the actual password validation.
So I want to just show you how you could go about finding that.
So I'm just going to open up HMO length validation and let's try that.
As you can see I've actually already been here.
This is something I had to look up recently and it looks like.
So this is Stack Overflow by the way if you haven't seen this before.
This allows someone to pose a question.
Is there any other attribute age him out there with the help of which I can set minimal length of value
for fields.
And then people provide answers and highest voted answers appear first.
So this answer says you can use the pattern attribute the required attribute is also needed.
Otherwise an input field with an empty value will be excluded from the constraint validation.
OK.
So it looks like this is all we need.
So this is an input we give it pattern equals this weird looking thing.
And then required and then this title.
So before we even ask about what this even does and what this five common 10 does.
Let's just see.
So let's go ahead find our password and this is a lot of what.
Being a developer is it's a lot of copying and pasting some things or finding some code and tweaking
it.
So we need to make this fit what we have which is an input name is password type because password.
So just going to copy these three attributes.
So now we have type his password pattern is five and 10 required.
And Title equals five to 10 characters.
So let's see what that does refresh this.
Make sure we have everything else filled out.
I click submit and it tells me please fill out this field.
Five to 10 characters and type 2 and type 3 and type more than 10 doesn't work.
But if I type five or six it does work.
So let's explore a little bit more.
Let's start with this one here.
Let's change this to be.
Password must be between five and 10 characters
and refresh.
Make sure we fill out everything else so we can get this error.
And I click submit and you can see I get that message that we set password must be between 5 and 10
characters.
So that's what this title is doing it.
It's basically the error message that is being displayed.
So then the other new part is this pattern and this is admittedly a little weird but using this syntax
we're just defining the length a range of full length that is acceptable for this input.
So if we change this to be two to three
I submit still not acceptable ones not acceptable but two is acceptable.
So this is just defining a range or pattern that we need to follow.
So there is definitely more to this you can do other things besides a minimum length or a range of lengths
but that's all I needed you to find here.
If you were unable to find that don't panic it's still very early on.
But there are going to be more opportunities for you to attempt things like that.
So I do have a full solution that I wrote up which is complete in that it has the full day and year
and month inputs and you can see it's kind of a mess.
I did not write this by hand and I did not expect you to write this by hand either.
So we'll see how to actually generate this later on in the class.
You could use javascript to do it for you so you don't actually have to write this off.
So take a look at the solution.
If you have any questions