HTML Form Attributes

HTML Formsare used to collect data from users on a web page. Forms allow users to input data, such as text, number, or selections and submit it to a server for processing.

Forms are made up of different HTML elements, such as input fields, buttons labels, and other form controls.

By default this data sending causes the page to reload after the data is sent, but using JavaScript you can alter this behavior (not going to explain how in this book).

These elements are combined to create a user-friendly interface that makes it easy for users to enter data and submit it to the server.

In addition to the form controls themselves, HTML forms also include a number of attributes that can be used to configure various aspects of the form, such as its method (i.e. how the data is submitted), its action (i.e. where the data is submitted), and various other settings.

"action" Attribute:

"action"attribute specifies the URL where the form data will be sent to. This attribute is required for a form to work properly.

<form>...</form>

In this example, when the form is submitted, the data will be sent to the URL submit-form

"method" Attribute:

"method"attribute specifies the HTTP method that will be used to submit the form data. The two methods that can be used are "GET" and "POST".

<form method="POST">...</form>

In this example, the form data will be submitted using the HTTP method POST

"name" Attribute:

"name"attribute is used to identify the form data that is being submitted. This attribute is used in conjunction with the "value" attribute.

<input type="text" name="username" value="John">

In this example, the form data being submitted is the value John associated with the name username

"value" Attribute:

"value"attribute is used to specify the initial value of an input element.

<input type="text" name="username" value="John">

In this example, the input element will have an initial value of John.

"required" Attribute:

"required"attribute is used to specify that a form field must be filled in before the form can be submitted.

<input type="text" name="username" value="John"required>

In this example, the requiredfield must be filled in before the form can be submitted.

"autocomplete" Attribute:

"autocomplete"attribute is used to specify whether or not a form should have autocomplete enabled.

<form action="/submit-form" method="POST" autocomplete="on">...</form> 

In this example, autocompleteis enabled for the form.

enctype Attribute:

enctypeattribute is used to specify the encoding type that should be used when submitting the form data.

<form action="/submit-form" method="POST" enctype="multipart/form-data">...</form> 

In this example, the encoding type multipart/form-datais used when submitting the form data.

target Attribute:

targetattribute is used to specify where the form data should be displayed when it is submitted.

<form action="/submit-form" method="POST" target="_blank">...</form> 

In this example, the form data will be displayed in a new window or tab when it is submitted.

Now that you learn most of the form attribute that you need in order to start working with forms. now let learn what is Form Elementsin the next chapter.