Form and HTML

HTML Forms Creation

This tutorial guide the process of creating HTML form. HTML most important Input tool is Form, HTML forms is collection of text box , checkboxes, and Command buttons. Below we discuses the complete process of creating HTML Form and how we get the value from HTML form.

<form> </form> tag is used in HTML for creating a form.

First we discus some Elements of HTML Form

HTML Method Element

Method attribute of the Form is used to define the HTTP method for sending form-data. You can send the The form data by URL variables for this purpose Get method are used. you can also send data as HTTP post transaction for this purpose Post method are used.

 Note:- When we send data with Get method then the length of a URL is limited to 3000 characters. In this method data will be visible in the URL. On the other hand with Post method data is not shown is in URL and there is no size limitations.

HTML Form<Input> element

One of the Most important element of HTML Form is Input element which is used with Input type. Where Input type are Text, Checkbox, Radio Button, color , date datetime, email file, hidden, image ,month, password, submit.

Below we take an example in which we use some of the above input type:

<input type="text" />This is Text Field <br />
<input type="checkbox" /> This is Checkbox<br />
Accept: <input type="radio" /> Not Accept: <input type="radio" /><br />
<input type="submit" value="SUBMIT" />

This is an simple Html For Example this return the following Output in Browser:

This is Text Field
This is Checkbox
Accept: Not Accept:

<Input> Name Attribute In HTML Form

Name is attribute is used to pass the value when we submit our form. This is used as a reference to that specific input.

For example

Enter Your Name: <input type="text" name="Student_Name" />

When user enter the his name in this text box then it store in Student_name . When form is submitted the we pass Student_name as reference.

<Input> Size Attribute In HTML Form

The size attribute specifies the width of Input element. for example Width of Text box.

For example

Enter Your Name: <input type="text" name="Student_Name" size="40"/>

Note: Size is specify in character.

<Input> Required Attribute In HTML Form

This attribute restrict user that must be filled out this field before submitting this form.

Enter Your Name: <input type="text" name="Student_Name" size="40" Required />

<Input> Maxlength Attribute In HTML Form

This attribute specify that how many character user enter in this field. For example if user enter the name then we restrict the user that name length not grater then 30 character.

Enter Your Name: <input type="text" name="Student_Name" size="40" Required maxlength="30" />

Complete Example of HTML Form With Different Input Type

<form method="POST" action="data.php">
<p>Enter Your Name :<input type="text" name="sname" size="20"></p><p >E-mail:<input type="text" name="mail" size="20"></p><p > Gender : Male<input type="radio" value="Male" checked name="gender">
 Female <input type="radio" name="gender" value="Female"></p>Select Subject <input type="checkbox" name="subject[]" value="ON">Web Designing
<input type="checkbox" name="subject[]" value="ON">Graphic Design
<input type="checkbox" name="subject[]" value="ON">Desktop Programming </p>
<p> <input type="submit" value="Submit[]" name="B1">
<input type="reset" value="Reset" name="B2"></p></form>

This form display as below in browser

Enter Your Name :

E-mail :

 Gender :Male Female

Select Subject Web Designing Graphic Design Desktop Programming

Now when fill the field and submit this form then value submitted to data.php an php file.

PHP Code Which Get The Data form HTML Form

echo "Your Name is=" , $_POST['sname']."<br/>";
echo "your email is" , $_POST['mail']."<br/>";
echo "your Gender is=" , $_POST['gender']."<br/>";
// Loop to store and display values of checkbox which are checked.
foreach($_POST['subject'] as $selected){
echo $selected."</br>";

When you click on Submit button then Then your data is submitted to data.php and when its proceed then the following result is displayed in explorer.

Your Name is=Tauqeer
Your email is
Your Gender is=Male
Web Designing
Desktop Programming