HTML Form
HTML TUTORIAL NO: 18 (HTML Form Tutorial PART-1)
HTML Form
HTML Form is used to collect the user data from any pages where the HTML Form are available, different types of HTML Form are available in websites such as Login Form, Registration Form, Contact Us Form, School and colleges registration and admission form etc.
The HTML Form is defining <form> tag.
HTML Form Element
HTML Form element are element that inside the <form> element you will learn various types of HTML form elements including inputs, textboxes, button, checkbox, dropdown in next Part of HTML Form, (HTML Form Tutorial PART-2)
<form><!--HTML Form element will be here-->
</form>
|
HTML Form Attributes
| Attributes |
Functions |
| action | It specific the form-handler, form submit action. It is usually a php page in server-side where the data is processed. |
| Accept-charset | It defines the character set of the form. |
| autocomplete | It specific to browser to automatically complete the form element. |
| method | It defines the HTTP method to use when submitting a form. |
| enctype | It defines to encoding of the data submitted by the form. |
| onsubmit | It is used to submit the form; it takes action to the Java Script when the form is submitted. |
| novalidate | It means the form is not validate in the browser. |
| name, id, class | It is used to identify the form, for styling the HTML form. |
Example of HTML Form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML Form</title>
</head>
<body>
<form action="action.html">
<input type="text"
name="firstname" placeholder="First Name">
<input type="text"
name="lastname" placeholder="Last Name">
<input type="email" name="email"
placeholder="E-mail Address">
<br>
<textarea name="message" id=""
cols="21" rows="3"
placeholder="Message"></textarea>
<br>
<input type="submit"> </form>
</body>
</html>
|
Output of above Example
 |
To Submit the HTML Form simply user has to click the “SUBMIT” button.
When Click the Submit button the user redirects the form-header page specified by the action
attribute where the input data is processed.
The form-handler is typically a Hypertext Processor (PHP) server page that run the Java Script to process input data.
But here we not use the php, we only read here HTML and CSS.
method Attribute
The method attribute specific which HTTP method. It is used to submitting the input data to the form-handler page. It could either GET or POST method.
Difference between GET and POST method
|
GET |
POST |
| It defaults value. | Not the default value. |
| It is less secure. | It is more secure and strong security. |
| Data is written on the URL address. | Data is not written in the URL address. |
| More chance to hacking. | Less chance to hacking. |
| Must not be used when submitting personal data. | Must to used for submitting personal data. |
name Attribute
Every form element except the “submit” button must have its own unique name attribute unless the data will not be submitted to the form-handler because it is used as a reference to get the value of each element entered by the user in the HTML Form.
Input Element
Input element are the input field inside the HTML Form. There are different types of input element are used in HTML Form, from different works. We will be learning all Input Element in the Next part of this tutorial. (HTML Form Tutorial PART-2)
In this tutorial (HTML Form Tutorial PART-1) we learned the basic of HTML Form like form attributes and its functions, method attribute, name attribute, difference between GET and POST etc. I hope you all understand this Form tutorial of PART-1.
In next tutorial HTML Form PART-2 we will be learn all the attributes and all input types in HTML Form. VISIT HTML FORM PART-2
Learn Also-
2 Comments
graliontorile · August 15, 2022 at 3:46 am
Hi there, I found your blog via Google even as looking for a related matter, your website got here up, it looks great. I’ve bookmarked it in my google bookmarks.
smorter giremal · November 4, 2024 at 4:35 pm
It’s really a cool and helpful piece of information. I am happy that you just shared this helpful info with us. Please keep us up to date like this. Thank you for sharing.