HTML Form Attributes Tutorial

  • Post author:
  • Post category:HTML

In this section, we will learn what the form attributes are and how to use them in HTML.

Note: we’re assuming you’re already familiar with the HTML form in general.

Attributes of Form in HTML

So far, we know that the <form> element is used to create a form in an HTML document in order to take inputs from users and send those inputs to a server. But the <form> itself is just a container! The actual elements of a form are created using other HTML elements! Now the question is, then what’s the reason for using the <form> element if it’s nothing but a container? Why not replacing it with another container element like <div> then?

Well, this is because the <form> element has special attributes that handle how the entered data should be sent to a server! For example, one of these attributes is called `action` which we use to define the receiver of the entered data after submitting it. Or it has another attribute called `method` by which we define the method that should be used to send data to a server. Or even it has an attribute that controls how the response from the server should be displayed on the browser (Like if the response should be displayed on a new tab or a new window or if it should be in the window that the current page is using it)!

So it’s the attributes of the <form> element that handle lots of tasks related to form data and the process of sending them to a server, thus making this element special.

Alright, now let’s move on and see the attributes that are used in a <form> element.

List of Form Attributes

Here’s the list of attributes supported in form.

Name

Description

accept-charset

This attribute is used to specify what character encoding should be used for form submission.

action

This attribute specifies where the form data should be sent after submitting.

autocomplete

This attribute specifies if the form should set autocomplete on or off

enctype

This attribute specifies how the form data should be encoded when it is being submitted to the server.

Use this attribute when using the HTTP POST method for sending data to a server.

method

This attribute specifies what HTTP method should be used when submitting form data to a server.

Possible values are POST and GET

name

With this attribute, we can set a name for the target form element.

novalidate

We use this attribute if we don’t want the form data to be validated first before being submitted to a server.

rel

This attribute specifies the relation between a linked resource and the current document.

target

With this attribute, we can specify where the response from the server should be displayed.

Note: we receive a response from a server after submitting from data first.

HTML <form> Method Attributes

The method attribute defines how the data of a form should be sent to a server. For example, if we want to put this data at the end of the URL of a server, we can use the value `GET`.

Note that the value GET has its own limits! For example:

– First of all, it’s not secure! Meaning, everyone can see what you’re sending to a server.

– The amount of data we can send using this method cannot be greater than 3000 characters, which might not be enough if the data is a lengthy one.

But in short, if the data that we want to send to a server is not big enough and also we don’t care about the security of the data, then we can use the GET method for sending the form data to a server.

The other method of sending data to a server is by setting the value of the method attribute to POST. We use this value when:

  • The length of data is greater than 3000 characters.
  • The data is sensitive (like username and passwords).

But there’s one problem with this method and that is, you can’t bookmark the data of a form with POST method.

Example: using <form> method attribute in HTML

See the Pen using <form> method attribute in HTML by Omid Dehghan (@odchan1) on CodePen.

HTML <form> target Attribute

When sending a data to a server, usually it responses with a message (For example, a success or a failure message). Now we use the target attribute to define on what place this message should be displayed. For example, we can set the value to be in a new browser tab or window.

Here are the values we set for this attribute:

Name

Description

_blank

Open the linked document on a new tab or window.

_self

Open the linked document on the window of the current document.

_parent

Open the linked document on the parent frame

_top

Open the linked document on the full body of the window

framename

Open the linked document on the specified iframe.

Example: using <form> target Attribute in HTML

See the Pen using <form> target Attribute in HTML by Omid Dehghan (@odchan1) on CodePen.

Here the value of the target attribute is set to _blank meaning after submitting the form’s data to a server, the response should appear on a new tab or window.

HTML <form> action Attribute

The action attribute specifies the address of the server that the data must be sent to after submitting. The value of this attribute could be either an absolute or a relative URL (depending on the server and if it’s the same or an external server).

In the examples above, we’ve set the receiver of the form data to `/submit` which is a relative URL and it’s equal to : https://enjoytutorials.com/submit

Leave a Reply