HTML5 Form Basics for Beginners

HTML5 Form Basics for Beginners

Welcome to HTML5 form basics for beginners. Think of this post as a post for HTML5 Forms for dummies. There are a lot of great tutorials out there on the web about HTML form elements. Most of them fail to tell you the basics.


Processor For HTML5 Forms

This important thing to note is that you have to have a processor for forms. If you do not have some sort of processor on your server you cannot use HTML5 forms. Some of the popular processors are:
  • PHP
  • ASP.NET
  • Cold Fusion
We prefer the PHP processor because it is open source. There is a lot of support for this computer language as well online.

The Purpose Of A Form Processor

The purpose of a form processor is to process the elements in a form. If there is no processor then all the items in a form cannot be processed.

HTML5 Form Method Tag

When you start with the form tag you must specify a method. There are only 2 methods that you can give to a form.
  1. POST
  2. GET
Here is a form tag with the POST action. 
<form method="post"></form>
Here is a form tag with the GET method. 
<form method="get"></form>
The post method hides the information being processed. The get method puts the information in a URL string. In the examples below we will be dealing with the post method. This is the most popular and more secure.

HTML5 Form Action

The next thing that you must put in a form tag is an action. Action tells the from where to go once the submit button has been pushed. You can tell the form to process on a different page or the same page that it is on. Here is an action tag that will process the form on a different page. It will take all the information in the form and process it on a page called processPage.php. 
<form method="post" action="processPage.php"></form>
This code example will process the form on the same page that the form is on. 
<form method="post" action=""></form>

Input Types in HTML5

There are several different input types that you can use in HTML5. Here are just a few.
  • input type="text"
  • input type="number"
  • input type="email"
  • input type="phone"
  • input type="password"
So how would you use input types in a form tag? 
<form method="post" action="">
<input type="text"/>
</form>

Give Input Type a Name For Processing

In order for you to process the forms you have to attach names to the input types. The name is very important if you want to be able to use the information. How to put a name in an input element. 
<form method="post" action="">
<input type="text" name="firstName"/>

Add A Submit Button To A HTML5 Form

One more essential thing that you will need is a submit button. The submit button will start the form processing. 
<form method="post" action="">
<input type="text"name="firstName"/>
<input type="submit" name="submit" value="submit"/>
</form>
The form above is ready to process the information that would be entered in it.

PHP Example for Processing the Form

In the above form we are processing the information on the same page as the form. In the code below we will print the information of the form on the page. This is what the form processing code looks like. 
<?php if(isset($_POST['submit'])){
echo 'The Name Entered is'.$_POST['firstName'];
}?>
Complete Code 
<?php if(isset($_POST['submit'])){
echo 'The Name Entered is'.$_POST['firstName'];
}?>
<form method="post" action="">
<input type="text"name="firstName"/>
<input type="submit" name="submit" value="submit"/>
</form>
 


Sign Up To Comment