What Is HTML Form | HTML Form Tutorial

  • Post category:HTML
  • Post author:
  • Post last modified:June 14, 2021
  • Reading time:6 mins read
You are currently viewing What Is HTML Form | HTML Form Tutorial

What Is HTML Form?

HTML form creates a section in your HTML document which are used to collect information from a user using form elements. HTML form collects contact address, payment details, user reviews, etc.

HTML Form – Syntax

HTML form starts with <form> tag and ends with </form> tag.

<form>
<label>User Name:</label> <input type="text">
<br>
<label>Password:</label> <input type="password">
<br>
<button type="submit">Log In</button>
</form>

HTML Form -Attributes

An HTML form contains attributes, attributes are specifying extra information about the form. Here is the list of form attributes.

  • action – the action attribute specifies the action page URL to be performed when the form is submitted.
  • method – the method attribute specifies the HTTP method when the form is submitted.
  • target – the target attribute specifies how the submitted result will be shown.
  • novalidate – the novalidate attribute specifies that the form will be not validated when submitted.
  • enctype – the attribute specifies how the form data encoded when submitted on the server.
  • name – the name attribute used to declare the name of the form.
  • autocomplete – this attribute specifies that the form should autocomplete or not.

Action Attribute

The action attribute contains the action page URL. This means when the form is submitted where the form data will be performed.

<form action="action_page.extensions">
Form Elements...
</form> 

Method Attribute

The method attribute specifies what form method will be used get or post.

<form action="action_page.extensions" method="post">
Form Elements...
</form>

Target Attribute

The target attribute specifies how the submitted result will be open. Its value can be _self, _blank, _parent, or _top.

<form action="action_page.extensions" method="post" target="_self">
Form Elements...
</form>

Novalidate Attribute

The novalidate attribute defines that when the form is submitted it will be not validated. This attribute does not contain any value, by default form is validated when it is submitted. You will learn about form validation in JavaScript.

<form action="action_page.extensions" novalidate>
Form Elements...
</form>

Name Attribute

The name attribute gives a name to the form which used in JavaScript.

<form action="action_page.extensions" name="contact_form">
Form Elements...
</form>

Autocomplete Attribute

The autocomplete attribute specifies that the form should autocomplete or not. Its value can be on or off.

<form action="action_page.extensions" autocomplete="off">
Form Elements...
</form>

Autocomplete means the browser automatically completes input values based on user-entered before.

HTML Form Elements

HTML form element helps you to take input form user.

Here is the list of HTML form elements

  • label – The label element print a label for other form elements.
  • input – The input element helps you to take input from the user.
  • select – The select element create a dropdown list.
  • option – The option element adds an option list.
  • textarea – The textarea element creates a multi-line text input field.
  • button – The button element creates a button.
  • datalist – The datalist element creates a list under the list input field.
  • fieldset – The fieldset element group the above from elements.
  • legend – The legend element represents the caption for the fieldset element.

Ashim Khatua

Professionally Web Developer since 2015, And also a Blogger. I am the founder of SiteCodings.com. I love to share my knowledge, which I earned the past few years. I want to share my knowledge with you through my Blog. Keep Reading.

Leave a Reply