Hello and welcome.
In this lecture we are going to begin create seeing are many projects where we'll create a simple form
in this lecture.
We'll start by creating the structure of the four.
To begin create a folder on your desktop.
If you own the windows you just right click and go new folder and just call the forms are anything you
like.
I just called Mine project
projects form.
Okay.
Then once you've got your for the created open your text editor.
I am using Notepad plus bloss for this lecture.
So once you've got your text editor open do a file save as and then select the folder you've just created
on your desktop.
That's mine there done double click and inside here is called file name.
Name your document are com mine form and their ways got save as type drub down.
Select a tier Mount maytree a document is saved as a dot hastier mail extension I click safe.
So now we have a blank page hastier mail document.
So create another folder another file inside your text editor call file new if you are using Notepad
plus Barnes and afanasy.
That's a look at the same for the case and this time you save the name as the dots here says file.
So to our mine mind I'll make choices as a dot see.
So sledded drag down and go to see a says cascade install it so make sure your file is safe with the
DOT says extension to a safe.
So now we've got a CML file.
We've also got half blank.
This far in your form editor.
Make sure you have your code like this.
This is the basic structure of hastier mill document.
So make sure you have the beginning of the code is called the dock tie and then made sure you got the
hastier mail.
Make sure all your tags are paid properly and as clicks see.
So on the right here is the blank weps website here without any form or content.
Lousy blank weeks is which is represented by this code here.
This cool little responsible for this.
So make sure you have your team old tags matched up properly.
If possible try and invent your code.
So this is this troxell after Doc I may tell you how much in hastier mill tanks.
And then the next tree.
Make sure you have your head tags that match.
And then in between the head tags make sure you have your link to your style sheet and make sure the
name is correct.
I have named mine stargardt's here says this is my stash it is them the moment it's in the same directory
as the hastier email for hands I've named it stalled gutsier says.
So make sure you've got this link correct.
Okay.
Mitchell is in the head section makes you make sure your body tag is paired up properly between your
body tags is where you create the form right.
Major oil tags and match top and then will start creating the form using a form tag.
Next you create a form tag.
I come down here from tagus highlighted the font tag wall enclose all the form elements in the Albany
tag of the form.
I have specified a couple of attributes.
The first attribute here is the idea of giving the form an idea with a name count.
I also specified an action.
An action is another attribute.
Why that is when you submit the form you need to specify the action that will happen.
What I've done has specified the hash symbol here which means the form will post the information to
itself.
That means nothing will happen.
If this was a live environment you then this value here you would place the location to a back end server.
Normally when you saw me to form the back end server processes the information and performs performs
some action but because we are not wire in this form to have back end server.
We're just going to limit hash there to submit to itself.
There are two methods of submission of send in a font you can send it by post or you can use it.
Get the post is a more secured way.
If you're sending sensitive data but they get it's not that secure.
When you sues it get the information you send in is displayed in the browser window.
So that's a different and then this line here.
I have enclose a fieldset tag in between.
This tag is where will put all the information for the form or the other elements like MC import tag.
It's where there will be a submit button and raid your button.
Everything will be enclose in between this tags here.
I have added some more lines of code here.
I have created a head in tag so this will be the title for your form.
I have created a break tag here.
What this will do is create a break in space between the heading that elements of the form.
In this line I have specified and input element.
So this is what the anything that's an input element that moves the visitor has to enter some information
so to create the input element.
You use it input tag I give it a class and the value of the class is sieber are the type of text of
implicit text you specify the value of text using the type attribute.
Giving it another attribute which is name your form must have a name and a giving in the value of email
and then we've got another attribute which is a value the value specified is email.
So this is what will be inside the form.
I have created a break tag to create some space between this impulse and another input's create a double
break.
Ted is here to give me a lot of space.
So in this input here same as that one given in the same class the value this password because I want
to use the visit or to enter some password details so I have specified password as the value to type
and then specify another attribute which is the name and I'm given in the name of password and the value
is password.
This is well when the user sent own a password.
This where it will not reveal the text the user types in it will just show up as a dot or a blob in
the peak in the input section.
This would prevent the user's information or password being revealed as they typed here.
And they have created a break just to give it a break space before the other takes.
If you are using Notepad plus bars we could have a look and see what the form looks like.
I will run lunch in Chrome.
All right so this is what the phone looks like at the moment.
We are making progress.
This is one of the input field and this is the other reason.
This is like this and because we have specified password as a value only type of attribute and also
given in name hence is called the Dot dot dot.
He hides the password entered.
I have created a few more tags here.
I have created a check box so that users will check if they want the form to remember their name and
password.
To do that you did the input type will be check box then this attribute value would be remember the
value would be details.
And then this text next to the check box will be remember named password next created to input tag.
It to rig your buttons with the type of radio which indicates the type of input they will have to make
a selection between the two.
The value of its name here name attribute is sex value is female and then this is a text that will be
revealed the same pier it gets revealed will be male so there need to choose between you read a button.
If there are male or female.
And then finally include a submit button.
This is the very end when all the information has been imported on the form the user visits are one
click submit so to create a suddenly button you don't input.
I've given this one and a deal with the value of logging type would be submit.
Value would be logging so you can give your values any name as long as you specify the type of input.
So give in.
Created some class here for my input and also giving this input for logging this summit but in giving
it an aid.
So the ADA class and other elements will use when we are stylin our form.
So we have now completed the structure of the form.
Let's have another look and see what this looks like launching Chrome.
So this is what the form looks like.
So our farm is ready and in the next lecture will will begin to style the form.
So in this lecture we have created the basic structure for a simple form and give in needs some class
in some of the elements some of them one on one.
One of them or two of them will give you an idea.
Attributes that we will use during this time.
Thank you so much for watching and see in the next video.
Bye for now.