Monday, March 3, 2014

Detailed Guide on Creating/Handling HTML Forms

In this tutorial, I'm going to give you a well-detailed guide on how you can create HTML forms easily without any help.


HTML Forms

HTML forms are used to pass data to a server. HTML forms can contain various input elements with various input values and types such as text fields, password fields, radio buttons, check-boxes, submit buttons and more. HTML forms are created with the <form> tag, which contains one or more input elements.


HTML Form Code


Here's an illustration of how a HTML form code looks like:



<!-- Starting the form -->
<form action="THE PAGE URL WHERE THIS FORM WILL BE SENT AFTER SUBMISSION" method="METHOD OF SENDING THE FORM" name="NAME OF THE FORM">
<!-- This is the first input element for this form -->
<input type="TYPE OF INPUT" value="PREDEFINED INPUT VALUE" name="NAME OF INPUT" />
<!-- This is the second input element for this form -->
<input type="TYPE OF INPUT" value="PREDEFINED INPUT VALUE" name="NAME OF INPUT" />
<!-- This is the third input element for this form -->
<input type="TYPE OF INPUT" value="PREDEFINED INPUT VALUE" name="NAME OF INPUT" />
<!-- This is the fourth input element for this form -->
<input type="TYPE OF INPUT" value="PREDEFINED INPUT VALUE" name="NAME OF INPUT" />
<!-- This is the fifth input element for this form -->
<input type="TYPE OF INPUT" value="PREDEFINED INPUT VALUE" name="NAME OF INPUT" />
<!-- Closing the form -->
</form>


Note: Texts contained in <!-- --> are HTML comments and are not necessary to use when writing your HTML codes. They are only used for explanation in the code above.


Explaining The HTML Form Code Above


The form start tag, <form>, is used to start a form.

The form action attribute, action="", specifies the web page to send the form data after submission. The web page defined in the action attribute usually does something with the received form data.

The form method attribute, method="", specifies the method that will be used to send the form data. There are two methods which are post and get. When the method is get, all form data is encoded into the URL, appended to the action URL as query string parameters. With post, form data appears within the message body of the http request. The get method is normally used for sending insensitive information such as survey answers while the post method is mainly used for sending sensitive information like passwords and credit card details.

The form name attribute, name="", lets you give a desired name to the form that would be used by the web page specified in the form action attribute when retrieving data from the form.

The input element, <input>, is used to input data into the form. A form can have many input elements for different values and types of input.

The input type attribute, type="", specifies the type of input to be used for the input element. There are various input types of which some are: text, password, radio, checkbox and submit. For more information on these input types, click here.

The input value attribute, value="", is used to set a predefined value for the input element. For text and password input types, the value will be outputted in the text field and visible to the one filling the form. The outputted value can be changed by the person filling the form if he/she wishes. For radio and checkbox input types, the value won't be outputted but can be checked/selected by the person filling the form.

The input name attribute, name="", just like the form name attribute, is used to give a desired name to the input element. This name would be used by the web page specified in the form action attribute for retrieving data from the input  element.

The input element have no closing tag, it is closed in the start tag by adding a forward slash (/) before the closing angled bracket (>).

The form end tag, </form>, is used to close the form.


Input Types

Like I said earlier, there are different input types that determine the type of data to be entered in the input element. The most used input types are: text, radio, password, checkbox and submit.


Text Input Type

In text input type, a single line text field is provided  for the one filling the form and the input will be visible (shown in the text field) as he/she types.

Below is an example of a text input type:

The Code:
<form>
<input type="text" />
</form>

The Output:




Password Input Type

The password input type is similar to the text input type except that the input won't be visible to the one typing, rather asterisk (*) symbols will be shown in place of the inputted text in the text field.

Below is an example of a password input type.

The Code:
<form>
<input type="password" />
</form>

The Output:




Radio Input Type

In a radio input type, you provide selectable options for the one filling the form. Only one option can be selected out of various options provided for a given input name. All options provided should contain the same input name but different input values.

Below is an example of a radio input type.

The Code:
<form>
<input type="radio" value="male" name="sex" />Male
<input type="radio" value="female" name="sex" />Female
</form>

The Output:


Male Female


Check box Input Type

The checkbox input type is similar to that of radio but in this case, more than one option can be selected/checked by the one filling the form.

Below is an example of a checkbox input type.

The Code:
<form>
<input type="checkbox" value="programmer" name="career" />Programming
<input type="checkbox" value="webmaster" name="career" />Webmastering
</form>

The Output:


Programming Webmastering


Submit Input Type

The submit input type is normally used for the last input element in a form and this is used for submitting all information provided in the form to a the form action URL.

Below is an example of a submit input type.

The Code:
<form>
<input type="submit" value="Submit" />
</form>

The Output:




Creating a Registration and Login Form


Now you've learned all you need to know about HTML forms and how to create them, it's now time for practice. Let's create a registration and login form for websites.


Registration Form Example



Registration Form Code:



<form action="register.php" method="post" name="registration">
Username:<br />
<input type="text" name="username" /><br />
Password:<br />
<input type="password" name="password" /><br />
Email:<br />
<input type="text" value="@" name="email" /><br />
Phone:<br />
<input type="text" value="+234" name="phone" /><br />
Sex:<br />
<input type="radio" value="male" name="sex" />Male<br />
<input type="radio" value="female" name="sex" />Female<br />
Your Career:<br />
<input type="checkbox" value="programmer" name="career" />Programming<br />
<input type="checkbox" value="webmaster" name="career" />Webmastering<br />
<input type="submit" value="Register" />
</form>


Registration Form Output:



Username:

Password:

Email:

Phone:

Sex:
Male
Female
Your Career:
Programming
Webmastering


Login Form Example



Login Form Code:



<form action="login.php" method="post" name="login">
Username: <input type="text" name="username" /><br />
Password: <input type="password" name="password" /><br />
<input type="submit" value="login">
</form>


Login Form Output:



Username:
Password:


Finally, we've come to the end of this tutorial. By now you should be able to create a simple HTML form on your own without any help.

Don't learn alone, share this tutorial with your friends using the share buttons on this page.

2 comments:

  1. i am aware of all of above mentioned tags which is very necessary and also basic ones to make a simple or complex sign up form...
    great sharing.From this post you are gonna teach others...
    Must Read :Affordable Health Insurance Plans

    ReplyDelete

Drop your questions, suggestions, complaints and appreciations here.