How to Create HTML Forms | Video Tutorial

By | January 17, 2013

HTML forms are basically used to receive input from the users. A <form></form> tag is usually used for this  process and inside <form> tag the other single <input> tags are used. So basically, we can’t use this tag without including a scripting language for storing or catching the data from the users. Therefore, we always try to use JavaScript, PHP or ASP.NET for validating the forms and pointing the inputs somewhere we can save the inputs coming from the users. And in this tutorial, we’re learning HTML forms by watching a video tutorial below.

In this video, I’ve explained many things about Form tag and its elements, also the <input> tag which is commonly used inside the <form> tag. Let’s watch below video to learn it practically and then I’ll further explain it to you.
Having watched video tutorial Above, I can insure that would have learned creating forms in HTML and insert input types. However, in order to clear it more to you, I’ll show you some examples here.
Here is the simple example of creating a form in HTML: 

<form action=’index.php’ method=’post’>
All input tags go here
</form>

Example above is absolutely the simplest example of HTML form with two respective attributes and these are necessary while working with a form. The action=’index.php’ specifies that the action would be done on that page and method=’post’ means that the data which is being received by the form will be taken via post method. And you’ll understand the method’s types more deeply in my PHP tutorials.

Now let me insert some other tags which are used inside <form> tag, look at this example:

<form action=’home.php’ method=’post’ enctype=’multi-type/form-data’>
User Name:<input type=’text’ name=’username’><br>
Password:<input type=’password’ name=’password’><br>
Terms:<input type=’checkbox’ name=’terms’><br>
Agree:<input type=’radio’ name=’agree’><br>
User Image:<input type=’file’ name=’user_image’><br>
<input type=’submit’ name=’submit’ value=’Submit’>
</form>

In example above I’ve used all the common input tags inside the form tag, because without inserting the input tags you can’t work with a form. So basically the form is holding all the inputs and will be acting as a leader. And I’ve inserted another attribute in example above which is enctype=’multi-part/form-data’ and that is used when a data type such as images, videos or files are being received from the users. And we’re also receiving an image in example above, therefore, we added the another attribute to our parent tag.
Above coding will exactly produce this result:
User Name:
Password:
Terms:
Agree:
User Image:

This was a simple tutorial for creating an HTML form and my next video tutorials we’ll learn about HTML 5 new tags and elements. Also, we’re soon going to learn CSS3 on this blog. So stay tuned.

Speak Your Mind