1 Star2 Stars3 Stars4 Stars5 Stars (4 votes, average: 5.00 out of 5)

HTML 5 Forms The Component Run Down

HTML5-Forms-Form-Tags-A1-Tutorials

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>

 

Related Post

HTML 5 Forms The Component Run Down was last modified: March 7th, 2017 by Maximus Mccullough

Advanced Programming Made Easy

I hope you enjoyed the article. If I was able to help you please consider buying me a drink.

Drinks

Leave a Reply

Your email address will not be published. Required fields are marked *