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
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.
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:
This is an simple Html For Example this return the following Output in Browser:
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.
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.
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 />
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" />
This form display as below in browser
Now when fill the field and submit this form then value submitted to data.php an php file.
"; echo "your email is" , $_POST['mail']."
"; if(!empty($_POST['gender'])) echo "your Gender is=" , $_POST['gender']."
"; if(!empty($_POST['subject'])){ // Loop to store and display values of checkbox which are checked. foreach($_POST['subject'] as $selected){ echo $selected.""; } }?>
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 xyz@gmail.com
Your Gender is=Male
Web Designing
Desktop Programming
HTML Forms
HTML DECIMAL Color Code and HEX Color Code
HTML Nested Lists
Elements and Tags In HTML
4 Primary Tags In HTML
Create Your First Web Page in HTML
Attributes in HTML Tags
HTML DOCTYPE Declaration
HEAD Tag in HTML
Meta Tags in HTML
Body Tag in HTML
H1 to H6 HTML Elements
Basic HTML Elements
HTML Table Element
Basefont HTML Element
Formatting Element in HTML
Font Element In HTML
Style Element in HTML
CSS Properties
DIV in HTML Document
List in HTML
Creating Menus With HTML list
Creating Horizontal Menu With HTML list
HTML Image Tag
Hyperlinks In HTML