HTML Form

Published by StudyMuch on

StudyMuch.in 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-


1 Comment

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.

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *