HTML 5 Forms The Component Run Down

The first step to processing forms is to understand what forms are and how they work. The HTML5 form is just form elements that work in HTML.

The Form Tag

You have to define and opening and closing form tag. Everything within this tag is what will be processed. Very simple put this is a form tag.

<form></form>

Now anything that you put inside that will be processed.

Adding a Class to the Form Tag

Sometimes we want to style a form. A good habit to get into is assigning a class to your form tag. You can add a calls to a form tag like this.

<form class="myClass"></form>

Now that we have a class assigned to the form tag we can style it later with CSS. They way we would style the form tag with CSS is target the class then style it. For example if we wanted everything i our form to be red we would do this.

<style>.myClass{background-color:red;}</style>

Adding A Method Attribute To A Form Tag

There are 2 methods that you can add to a form tag. “Get” or “POST”. When your are sending data as the “Get” method it can be cached and stored in a browser. A more secure method is to use “POST”. The data on the “POST” request is hidden and processed by the server without the risks of caching in a browser. Here are the examples of both a “Get” and “POST” method in a form tag.

<form method="get"></form>

<form method="post"></form>

Adding Action to The Form

Now you want the form to call some action when it is submitted. This could be that the form goes to a different page for processing on your website or stays on the same page for processing. If you want the form to go to another page the the form attributes would look like this.

<form action="anotherpage.php"></form>

If however you want the form to be processed on the page that you are on then you would write the “action” attribute like this.

<form method="post" action=""></form>

Adding File Upload Features to a Form

If you want to upload a file within your form you would have to have the multiport/form-data in your encoding type attribute on a form. This would look like so.

<form enctype="multipart/form-data"></form>

Combining The Attributes in a form Tag

None of the tags above will work by themselves. You will have to combine them depending on what you want to do. Mainly your will have to determine if you will have the user upload a file or not. Here is what a form tag may look like if you do not have a user uploading a file.

<form class=”myClass” method=”post” action=””></form>

Here is what a form tag would possibly look like if you were going to have a user upload  file.

<form class=”myClass”  method=”post” action=”” enctype=”multipart/form-data”></form>