Category: Forms

Input Attributes

The HTML <input> tag provides different attributes to define its characteristics and behavior.

Input Attributes

The HTML input attributes define the characteristics and behavior of the <input> element. These input attributes are used with the different types of input fields, such as text, email, password, date, number, and so forth. Note that the input element is used to create interactive controls for the web-based forms so that it can accept data from the user.

The <input> element requires only an opening tag, and it will work only if we add it in between the <form> tags. In this tutorial, we are going to explore the attributes that are used with the <input> element.

The attributes of the <input> element are as follows −

type and name
value
size
maxlength
readonly
disabled
min and max
accept and multiple
placeholder
required
autofocus
list

The ‘type’ and ‘name’ Attributes

The type attribute indicates the type of input control, like text, password, email, and so on. The name attribute of an input element assigns an identifier to the form control that enables the server to recognize and retrieve the value.

Example

The following HTML code illustrates the use of type and name attributes:

<!DOCTYPE html><html><head><title>The type and name Attributes</title></head><body><form >
  First name: &lt;input type = "text" name = "first_name" /&gt;&lt;br&gt;&lt;br&gt;
  Last name: &lt;input type = "text" name = "last_name" /&gt;&lt;/form&gt;&lt;/body&gt;&lt;/html&gt;</pre>


The 'value' Attribute



The value attribute is used to provide an initial value inside the input control.



Example



In the following example, we are creating two input fields with initial value as " first name..." and " last name...":



<!DOCTYPE html><html><head><title>The value Attribute</title></head><body><form >
  First name: &lt;input type = "text" name = "first_name" value = "first name..." /&gt;&lt;br&gt;&lt;br&gt;
  Last name: &lt;input type = "text" name = "last_name" value = "last name..."/&gt;&lt;/form&gt;&lt;/body&gt;&lt;/html&gt;</pre>


The 'size' Attribute



The size attribute allows you to specify the width of the text-input control in terms of characters. The default size is 20 characters.



Example



In this example, the size of the text-input control is set to 40:



<!DOCTYPE html><html><head><title>The size Attribute</title></head><body><form >
  First name: &lt;input type = "text" name = "first_name" size = "40" /&gt;&lt;br&gt;&lt;br&gt;
  Last name: &lt;input type = "text" name = "last_name" size = "40"/&gt;&lt;/form&gt;&lt;/body&gt;&lt;/html&gt;</pre>


The 'maxlength' Attribute



The maxlength attribute allows you to specify the maximum number of characters a user can enter into the text box.



Example



The following example demonstrates how to set the maxlength of an input field:



<!DOCTYPE html><html><head><title>The maxlength Attribute</title></head><body><form >
  First name: &lt;input type = "text" name = "first_name" /&gt;&lt;br&gt;&lt;br&gt;
  Last name: &lt;input type = "text" name = "last_name" /&gt;&lt;br&gt;&lt;br&gt;
  Contact: &lt;input type = "text" name = "phone" maxlength = "10"/&gt;&lt;/form&gt;&lt;/body&gt;&lt;/html&gt;</pre>


The 'readonly' Attribute



The readonly attribute of an input field indicates the field as read-only. Although the content of a read-only field cannot be altered, users can still select it and copy the text. Also, the value of a read-only field is included when the form is submitted.



Example



The following example shows the use of the readonly attribute of the <input> element:



<!DOCTYPE html><html><head><title>The readonly Attribute</title></head><body><form >
  Emp. Name: &lt;input type = "text" name = " your_name" value = "your name..."/&gt;&lt;br&gt;&lt;br&gt;
  Emp. Email: &lt;input type = "text" name = "mail" value = "your email..."/&gt;&lt;br&gt;&lt;br&gt;
  Organization: &lt;input type = "text" name = "organization" value = "Tutorialspoint" readonly/&gt;&lt;/form&gt;&lt;/body&gt;&lt;/html&gt;</pre>


The 'disabled' Attribute



The disabled attribute of an input field indicates the field as disabled. Unlike readonly, the value of a disabled field will not be included when the form is submitted.



Example



In this example, the field containing the organization name is marked as disabled:



<!DOCTYPE html><html><head><title>The disabled Attribute</title></head><body><form >
  Emp. Name: &lt;input type = "text" name = "your_name" value = "your name..."/&gt;&lt;br&gt;&lt;br&gt;
  Emp. Email: &lt;input type = "email" name = "mail" value = "your email..."/&gt;&lt;br&gt;&lt;br&gt;
  Organization: &lt;input type = "text" name = "organization" value = "Tutorialspoint" disabled/&gt;&lt;/form&gt;&lt;/body&gt;&lt;/html&gt;</pre>


The 'min' and 'max' Attributes



The min and max attributes determine the minimum and maximum values, respectively, of an input field like number, date, week, and so on. If we use them together, they will allow users to enter an input within a predefined range.



Example



In the following example, we are mentioning the minimum working hours as 3 and maximum as 8 by using the min and max attributes:



<!DOCTYPE html><html><head><title>The min and max Attribute</title></head><body><form >
  Emp. Name: &lt;input type = "text" name = "your_name" value = "your name..."/&gt;&lt;br&gt;&lt;br&gt;
  Emp. Email: &lt;input type = "email" name = "mail" value = "your email..."/&gt;&lt;br&gt;&lt;br&gt;
  Organization: &lt;input type = "text" name = "organization" value = "Tutorialspoint" readonly/&gt;&lt;br&gt;&lt;br&gt;
  Working Hrs: &lt;input type = "number" name = "working_hours" min="3" max="8"/&gt;&lt;/form&gt;&lt;/body&gt;&lt;/html&gt;</pre>


The 'accept' and 'multiple' Attributes



The accept attribute specifies the types of files that the server will take in. If we use the multiple attribute, it will allow the users to upload more than one file.



Example



The following HTML code can accept multiple image files:



<!DOCTYPE html><html><head><title>The accept and multiple Attributes</title></head><body><form><input type = "file" name = "fileupload" accept = "image/*" multiple /></form></body></html>



The 'placeholder' Attribute



The placeholder attribute of an input field, like text, search, and email, briefly outlines the desired value of the field. Its predefined value is displayed in the input field until the user begins to enter their own value.



Example



In the following example, we are using the placeholder attribute for the email input field:



<!DOCTYPE html><html><head><title>The placeholder Attribute</title></head><body><form>
  Emp. Name: &lt;input type = "text" name = "your_name"/&gt;&lt;br&gt;&lt;br&gt;
  Emp. Email: &lt;input type = "email" name = "mail" placeholder = "[email protected]"/&gt;&lt;/form&gt;&lt;/body&gt;&lt;/html&gt;</pre>


The 'required' Attribute



The required attribute in an input field like text, search, password, and email signifies that the field must contain some values for the form to be successfully submitted. In other words, it indicates the mandatory field.



Example



The following example illustrates the use of the required attribute. Without filling the mandatory fields, users will not be able to submit the form:



<!DOCTYPE html><html><head><title>The required Attribute</title></head><body><form ><p>The * Star represents mandatory field</p>
  Emp. Name: &lt;input type = "text" name = "your_name" required/&gt;*
  &lt;br&gt;&lt;br&gt;
  Emp. Email: &lt;input type = "email" name = "mail" placeholder = "[email protected]" required/&gt;*
  &lt;br&gt;&lt;br&gt;&lt;input type = "submit"&gt;&lt;/form&gt;&lt;/body&gt;&lt;/html&gt;</pre>


The 'autofocus' Attribute



The autofocus attribute in an input field ensures that the field must be selected automatically once the webpage loads completely. It implies that the cursor will be positioned to the specified input field. In cases where multiple elements use the autofocus attribute, only the first element will acquire the focus.



Example



Following is the example of the autofocus attribute:



<!DOCTYPE html><html><head><title>The autofocus Attribute</title></head><body><form >
  Emp. Name: &lt;input type = "text" name = "your_name" autofocus/&gt;&lt;br&gt;&lt;br&gt;
  Emp. Email: &lt;input type = "email" name = "mail" placeholder = "[email protected]" /&gt;&lt;br&gt;&lt;br&gt;&lt;input type = "submit"&gt;&lt;/form&gt;&lt;/body&gt;&lt;/html&gt;</pre>


The 'list' Attribute



The list attribute defines a set of predefined options for an <input> element, which are defined within a <datalist> element. The <input> element uses a specific string as an ID to create a link to the corresponding <datalist> element.



Example



In this example, we are creating a list of cities with the help of the list attribute:



<!DOCTYPE html><html><head><title>The list Attribute</title></head><body><form >
  Emp. Name: &lt;input type = "text" name = "your_name" autofocus/&gt;&lt;br&gt;&lt;br&gt;
  Emp. Email: &lt;input type = "email" name = "mail" placeholder = "[email protected]" /&gt;&lt;br&gt;&lt;br&gt;
  Location −
  &lt;input list="location" name="cities"&gt;&lt;datalist id = "location"&gt;&lt;option value="Banglore"&gt;&lt;option value="Hyderabad"&gt;&lt;option value="Patna"&gt;&lt;option value="Delhi"&gt;&lt;/datalist&gt;&lt;input type = "submit"&gt;&lt;/form&gt;&lt;/body&gt;&lt;/html&gt;</pre>

August 16, 2025

Form Controls

HTML form controls (elements) are the elements used within the <form> element to collect the user information.

Form Controls (Elements)

The form elements create controls for the user interaction within the webpage; these elements are also termed as form controls. The form elements enable users to enter information for the server-side processing. The nature of interaction with the server can vary depending on the type of control used while creating the form. For example, radio buttons are typically used to accept gender information.

We have used several common form controls in previous discussions; we will now dive into a more detailed exploration of these elements.

There are different types of form controls that we can use to collect data using HTML form:

Text Input Controls
Checkboxes Control
Radio Buttons Control
Select Box Control
File Select Box
Button Control
Hidden Form Control
Datetime Controls
Date Control
Month Control
Week Control
Time Control
Number Control
Range Control
Email Control
URL Control

Let us look at these controls one by one −

Text Input Controls

The text input controls are further divided into three main categories −

Single-line Text Input Control
Password Input Control
Multi-line Text Input Control

Single-line Text Input Control

The single-line text input control is used for items that require only one line of user input, such as search boxes or names. They are created using the <input> tag.

Example

The following example illustrates how to take a single-line text input:

<!DOCTYPE html><html><head><title>Text Input Control</title></head><body><form >
  First name: &lt;input type = "text" name = "first_name" /&gt;&lt;br&gt;&lt;br&gt;
  Last name: &lt;input type = "text" name = "last_name" /&gt;&lt;/form&gt;&lt;/body&gt;&lt;/html&gt;</pre>


On running the above code, two single-line text input fields will be displayed.



Password Input Control



The password input control is also a single-line text input, but it masks the character as soon as a user enters it. They are also created using the HTML <input> tag, but the type attribute is set to password:



Example



In the following example, we will demonstrate how to take password input from users.



<!DOCTYPE html><html><head><title>Password Input Control</title></head><body><form >
  User ID : &lt;input type = "text" name = "user_id" /&gt;&lt;br&gt;&lt;br&gt;
  Password: &lt;input type = "password" name = "password" /&gt;&lt;/form&gt;&lt;/body&gt;&lt;/html&gt;</pre>


The above HTML code will display one text input field and one password input field.



Multiple-line Text Input Control



The multiple-line text input control is used when the user is required to give details that may be longer than a single sentence. Multi-line input controls are created using the HTML <textarea> tag.



Example



The following example demonstrates how to use multi-line text input to take item descriptions:



<!DOCTYPE html><html><head><title>Multiple-Line Input Control</title></head><body><form>
  Description : &lt;br /&gt;&lt;textarea rows = "5" cols = "50" name = "description"&gt;
     Enter description here...
  &lt;/textarea&gt;&lt;/form&gt;&lt;/body&gt;&lt;/html&gt;</pre>


The above code will produce a text area where users can provide multiple lines of text.



Checkboxes Control



Checkboxes are used when more than one option is required to be selected. They are also created using the <input> tag, but the type attribute is set to checkbox.



Example



In this HTML code, we are creating a form with two checkboxes:



<!DOCTYPE html><html><head><title>Checkbox Control</title></head><body><form><input type = "checkbox" name = "maths" value = "on"> Maths
  &lt;input type = "checkbox" name = "physics" value = "on"&gt; Physics
   </form></body></html>



On executing the above code, it will create two checkboxes.



Radio Buttons Control



Radio buttons are used when out of many options, just one option is required to be selected. They are also created using the <input> tag, but the type attribute is set to radio.



Example



In this example code, we are creating a form with two radio buttons:



<!DOCTYPE html><html><head><title>Radio Box Control</title></head><body><form><input type = "radio" name = "subject" value = "maths"> Maths
  &lt;input type = "radio" name = "subject" value = "physics"&gt; Physics
   </form></body></html>



On running the above HTML code, it will produce two radio buttons.



Select Box Control



A select box provides features to list down various options in the form of drop-down list, from where a user can select one or more options.



Example



The following HTML code illustrates how to create a form with a drop down box:



<!DOCTYPE html><html><head><title>Select Box Control</title></head><body><form><select name = "dropdown"><option value = "Maths" selected>Maths</option><option value = "Physics">Physics</option><option value = "Chemistry">Chemistry</option></select></form></body></html>



The above HTML code will create a dropdown menu with three values.



File Select Box



If we want to allow a user to upload a file to our website, we will need to use a file upload box, also known as a file select box. This is also created using the <input> element, but the type attribute is set to file.



Example



In the following example, we will create a form with one file upload box that accepts only images:



<!DOCTYPE html><html><head><title>File Upload Box</title></head><body><form><input type = "file" name = "fileupload" accept = "image/*" /></form></body></html>



Button Control



There are various ways in HTML to create clickable buttons. We can create a clickable button using the <input> tag by setting its type attribute to button.



Example



In this HTML code, we are creating a form with three different types of buttons:



<!DOCTYPE html><html><head><title>File Upload Box</title></head><body><form><input type = "submit" name = "submit" value = "Submit" /><input type = "reset" name = "reset" value = "Reset" /><input type = "button" name = "ok" value = "OK" /><input type = "image" name = "imagebutton" src = "/html/images/logo.png" /></form></body></html>



Hidden Form Control



Thehidden form controls are used to hide data inside the page, which later on can be pushed to the server. This control hides inside the code and does not appear on the actual page. For example, the following hidden form is being used to keep the current page number. When a user clicks next page, then the value of the hidden control will be sent to the web server, and there it will decide which page will be displayed next based on the passed current page.



Example



The following example shows the usage of hidden control:



<!DOCTYPE html><html><head><title>File Upload Box</title></head><body><form><p>This is page 10</p><input type = "hidden" name = "pagename" value = "10" /><input type = "submit" name = "submit" value = "Submit" /><input type = "reset" name = "reset" value = "Reset" /></form></body></html>



Datetime Controls



In HTML, the datetime control represents date and time (year, month, day, hour, minute, second, and fractions of a second) together, encoded according to ISO 8601 with the time zone set to UTC. If we use the datetime-local, it will display date and time with no time zone information.



Example



<!DOCTYPE html><html><body><form action = "/cgi-bin/html5.cgi" method = "get">
  Date and Time : &lt;input type = "datetime" name = "newinput" /&gt;&lt;input type = "submit" value = "submit" /&gt;&lt;/form&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Date Control



The HTML date control is used to specify a date (year, month, day) encoded according to ISO 8601.



Example



<!DOCTYPE html><html><body><form action = "/cgi-bin/html5.cgi" method = "get">
  Date : &lt;input type = "date" name = "newinput" /&gt;&lt;input type = "submit" value = "submit" /&gt;&lt;/form&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Month Control



In HTML, the month control is used to display a date consisting of only a year and a month encoded according to ISO 8601.



Example



<!DOCTYPE html><html><body><form action = "/cgi-bin/html5.cgi" method = "get">
  Month : &lt;input type = "month" name = "newinput" /&gt;&lt;input type = "submit" value = "submit" /&gt;&lt;/form&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Week Control



As the name suggests, the week control displays a date consisting of only a year and a week number encoded according to ISO 8601.



Example



<!DOCTYPE html><html><body><form action = "/cgi-bin/html5.cgi" method = "get">
  Week : &lt;input type = "week" name = "newinput" /&gt;&lt;input type = "submit" value = "submit" /&gt;&lt;/form&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Time Control



The HTML time control specifies the hours, minutes, seconds, and fractional seconds encoded according to ISO 8601.



Example



<!DOCTYPE html><html><body><form action = "/cgi-bin/html5.cgi" method = "get">
  Time : &lt;input type = "time" name = "newinput" /&gt;&lt;input type = "submit" value = "submit" /&gt;&lt;/form&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Number Control



The number control accepts only numerical values. The step attribute specifies the precision, and its default value is 1.



Example



<!DOCTYPE html><html><body><form action = "/cgi-bin/html5.cgi" method = "get">
  Select Number : &lt;input type = "number" min = "0" max = "10" step "1"
     value = "5" name = "newinput" /&gt;&lt;input type = "submit" value = "submit" /&gt;&lt;/form&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Range Control



The range type is used for input fields that should contain a value from a range of numbers.



Example



<!DOCTYPE html><html><body><form action = "/cgi-bin/html5.cgi" method = "get">
  Select Range : &lt;input type = "range" min = "0" max = "10" step "1"
     value = "5" name = "newinput" /&gt;&lt;input type = "submit" value = "submit" /&gt;&lt;/form&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Email Control



The email control accepts only email value. This type is used for input fields that should contain an e-mail address. If you try to submit a simple text, it forces you to enter only an email address in [email protected] format.



Example



<!DOCTYPE html><html><body><form action = "/cgi-bin/html5.cgi" method = "get">
  Enter email : &lt;input type = "email" name = "newinput" /&gt;&lt;input type = "submit" value = "submit" /&gt;&lt;/form&gt;&lt;/body&gt;&lt;/html&gt;</pre>


URL Control



The HTML URL control accepts only URL values. This type is used for input fields that should contain a URL address. If you try to submit a simple text, it forces you to enter only a URL address, either in the http://www.example.com format or in the http://example.com format.



Example



<!DOCTYPE html><html><body><form action = "/cgi-bin/html5.cgi" method = "get">
  Enter URL : &lt;input type = "url" name = "newinput" /&gt;&lt;input type = "submit" value = "submit" /&gt;&lt;/form&gt;&lt;/body&gt;&lt;/html&gt;</pre>

August 16, 2025

Form Attributes

In HTML, each element has its own attributes that are used to define the characteristics of that particular HTML element and are placed inside the element’s opening tag. The <form> element also has attributes that provide different functionalities like redirection on other web pages and auto-completion of text.

Form Attributes

HTML form attributes provide different functionalities, such as redirection to other web pages, auto-completion of text, specifying data validation rules, controlling the behavior of form submissions, etc.

Following is a list of the most frequently used form attributes −

The action Attribute

The action attribute of the <form> element transmits the user’s input to a backend script for processing. A form is of no use unless it processes the information provided by the user. Therefore, it is important to pass the URL of a program to the action attribute. Note that the formaction attribute can override the value of the action attribute.

Example

The following example illustrates the use of the action attribute. When we click the submit button, the form will redirect us to the home page of Tutorialspoint:

<!DOCTYPE html><html><head><meta charset="utf-8"><title> The action Attribute </title></head><body><!-- Start of the form element --><form action = "https://www.tutorialspoint.com"><!-- to take input -->
  Name: &lt;input type = "text" name = "your_name" required/&gt;&lt;br&gt;&lt;br&gt;
  Email: &lt;input type = "email" name = "mail" required/&gt;&lt;br&gt;&lt;br&gt;&lt;!-- to submit the data --&gt;&lt;input type = "submit"&gt;&lt;/form&gt;&lt;/body&gt;&lt;/html&gt;</pre>


The method Attribute



The method attribute determines which HTTP method should be used by the browser while uploading the form information. The most commonly used methods are as follows:



S.No Values & Description
1 GETIt is the default method for form submission, which means if we don't specify the method name explicitly, the form will use the GET method to send data.
2 POSTIt is used to send form data inside HTTP request body. It is safer than GET method.




It is not recommended to use the GET method while sending sensitive information like credit/debit card numbers and passwords because it exposes the submitted data in the URL.




Example



The following example demonstrates how to use the method attribute of the <form> element.



<!DOCTYPE html><html><head><meta charset="utf-8"><title> The method Attribute </title></head><body><!-- Start of the form element --><form action = "https://www.tutorialspoint.com" method = "post"><!-- to take input -->
  Name: &lt;input type = "text" name = "your_name" required/&gt;&lt;br&gt;&lt;br&gt;
  Email: &lt;input type = "email" name = "mail" required/&gt;&lt;br&gt;&lt;br&gt;&lt;!-- to submit the data --&gt;&lt;input type = "submit"&gt;&lt;/form&gt;&lt;/body&gt;&lt;/html&gt;</pre>


On clicking the submit button, the user will be redirected to the home page of Tutorialspoint.



The target Attribute



The target attribute determines the target window or frame where the result of the script will be displayed after submitting the form. The default target is the current window. The target attribute accepts the following values:



S.No. Values & Description
1 _selfIt opens the response in the same frame as it was clicked.
2 _blankIt opens the response in the new window or tab.
3 _parentIt opens the response in the parent frame.
4 _topIt opens the response in the full body of window.
5 framenameIt opens the response in the named iframe.



Example



In the following example, we will use the target attribute with the value _self. The response will be open in the current window:



<!DOCTYPE html><html><head><meta charset="utf-8"><title> The target Attribute </title></head><body><!-- Start of the form element --><form action = "https://www.tutorialspoint.com" target = "_self"><!-- to take input -->
  Name: &lt;input type = "text" name = "your_name" required/&gt;&lt;br&gt;&lt;br&gt;
  Email: &lt;input type = "email" name = "mail" required/&gt;&lt;br&gt;&lt;br&gt;&lt;!-- to submit the data --&gt;&lt;input type = "submit"&gt;&lt;/form&gt;&lt;/body&gt;&lt;/html&gt;</pre>


The novalidate Attribute



The novalidate is a Boolean attribute that indicates the form does not need any kind of validation. The term validation refers to the process of verifying the correctness of user input based on predefined conditions. This attribute, when applied, exempts the form from such checks, allowing user inputs to bypass these conditions.




If Boolean attributes like novalidate are present on an HTML element, it specifies true, and in the case of absence, false is assumed. They do not accept any values.




Example



In the previous examples, the form redirected us to a new web page when we entered our name and email. For this example, we will use the novalidate attribute, which will allow the redirection without entering any information:



<!DOCTYPE html><html><head><meta charset="utf-8"><title> The novalidate Attribute </title></head><body><!-- Start of the form element --><form action = "https://www.tutorialspoint.com" target = "_blank" autocomplete="off" method = "get" novalidate><!-- to take input -->
  Name: &lt;input type = "text" name = "your_name" required/&gt;&lt;br&gt;&lt;br&gt;
  Email: &lt;input type = "email" name = "mail" required/&gt;&lt;br&gt;&lt;br&gt;&lt;!-- to submit the data --&gt;&lt;input type = "submit"&gt;&lt;/form&gt;&lt;/body&gt;&lt;/html&gt;</pre>


The autocomplete Attribute



The autocomplete attribute of HTML predicts and suggests the subsequent input based on the initial characters entered in the input field. This attribute primarily has two states, namely on and off.



S.No. Values & Description
1 onBy default, the autocomplete attribute is set to on, enabling the autocomplete functionality.
2 offThe autocomplete attribute can be toggled to off to disable this feature as per the requirements of the web application.



Instance



<form action = "https://www.tutorialspoint.com" target = "_blank" autocomplete="off" method = "get">



The enctype Attribute



We use the enctype attribute to specify how the browser encodes the data before it sends it to the server. Its possible values are −



S.No. Values & Description
1 application/x-www-form-urlencodedThis is the standard method most forms use in simple scenarios.
2 mutlipart/form-dataThis is used when you want to upload binary data in the form of files like images, Word files etc.
3 text/plainIt only encodes the spaces into + symbol.



Instance



<form action = "https://www.tutorialspoint.com" target = "_blank" autocomplete="off" method = "get" enctype = "text/plain">

S.No	Values & Description
1	`GET`It is the default method for form submission, which means if we don't specify the method name explicitly, the form will use the GET method to send data.
2	`POST`It is used to send form data inside HTTP request body. It is safer than GET method.

S.No.	Values & Description
1	`_self`It opens the response in the same frame as it was clicked.
2	`_blank`It opens the response in the new window or tab.
3	`_parent`It opens the response in the parent frame.
4	`_top`It opens the response in the full body of window.
5	`framename`It opens the response in the named iframe.

S.No.	Values & Description
1	`on`By default, the autocomplete attribute is set to on, enabling the autocomplete functionality.
2	`off`The autocomplete attribute can be toggled to off to disable this feature as per the requirements of the web application.

S.No.	Values & Description
1	`application/x-www-form-urlencoded`This is the standard method most forms use in simple scenarios.
2	`mutlipart/form-data`This is used when you want to upload binary data in the form of files like images, Word files etc.
3	`text/plain`It only encodes the spaces into + symbol.

August 16, 2025

Forms

An HTML form is a webpage section usually used for collecting data from the users and then sent to a server for further processing.

HTML Forms

HTML forms are collections of interactive controls and various input types, such as text, numbers, email, password, radio buttons, checkboxes, buttons, etc., that collect user information. HTML forms are created by using the HTML <form> tag. All user input-related tags are placed inside the <form> tag.

The <form> Element

The HTML <form> element defines a form to collect user information in the HTML document.

Syntax

The <form> element has the following syntax; you can place any input-related element inside it:

<form><!-- Form elements--></form>

The following syntax contains all necessary elements:

<form action="url" method="method_type" target="target_value" enctype="enctype_value"><!-- Form elements--></form>

Why Use HTML Forms?

HTML forms are used to collect user information from the webpage and send it to the server. The common uses for HTML forms are:

Creating registration forms so that users can sign up with their information and authenticate further to access the functionalities of the websites/web applications.
Collect data through the different types of surveys, feedback, etc.
Uploading the images, resumes, or any other type of files.

Creating an HTML Form

To create an HTML form, use the <form> element along with the other required elements based on the information you want to collect, such as input boxes, buttons, radio buttons, checkboxes, etc. These elements are known as form controls (form elements).

Example

The following is an example of an HTML form having some required elements:

<!DOCTYPE html><html><head><title>HTML Form Example</title></head><body><h1>HTML Form Example</h1><form><!-- Text Input --><label for="name"><strong>Name:</strong></label><input type="text" id="name" name="name" placeholder="Enter your name" required><br/><br/><!-- Radio Buttons --><label><strong>Gender:</strong></label><input type="radio" id="male" name="gender" value="male"><label for="male">Male</label><input type="radio" id="female" name="gender" value="female"><label for="female">Female</label><br/><br/><!-- Checkboxes --><label><strong>Hobbies:</strong></label><input type="checkbox" id="reading" name="hobbies" value="reading"><label for="reading">Reading</label><input type="checkbox" id="traveling" name="hobbies" value="traveling"><label for="traveling">Traveling</label><input type="checkbox" id="sports" name="hobbies" value="sports"><label for="sports">Sports</label><br/><br/><!-- Submit Button --><button type="submit">Submit</button></form></body></html>

HTML Form with Redirection

In the previous example, we designed a form that accepts user input but doesn’t process the data. In this example, users will be redirected to Tutorialspoint’s HTML Tutorial upon form submission. The redirection only happens if both the first name and last name fields are filled out; otherwise, the form prompts the user to provide the required information.

Example

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Sample HTML Form</title></head><body><!-- Start of the form element --><form action="" method="post"><!-- Form controls --><label for="first_name">First Name:</label><input type="text" id="first_name" name="first_name" required /><br><br><label for="last_name">Last Name:</label><input type="text" id="last_name" name="last_name" required /><br><br><input type="submit" value="Submit"></form></body></html>

Note:

The HTML form tag’s action attribute specifies the URL to which form data will be submitted or where the user will be redirected after submitting the form. You can specify the file name that is accepting the user information for the further processing. For an example, the file name is process.php; use the action attribute like this:

<form action="/process.php" method="post">

Form Elements

There is a list of elements that can be used within the form element. All the elements are briefly described below:

1. The <form> Element

HTML <form> tag is used to create the <form> element. This element is the container for all other form elements. The form element does not create the form; it’s the container that holds the other form elements.

Example

<form>.....</form>

2. The <input> Element

HTML <input> tag is an essential element of form control for gathering user input from websites. We can use this tag to create an input element.

Example

<input type = ".."/>

3. The <label> Element

HTML <label> tag is used to create a label element that represents a caption for an item in a UI (user interface), or to add labels to a form control like text, textarea, checkbox, radio button, etc.

Example

<label>.......</label>

4. The <legend> Element

HTML <legend> tag is the element’s first child and specifies the caption or title for the <fieldset> tag.

Example

<legend>.......</legend>

5. HTML <select> Element

HTML <select> tag is used to create the dropdown in HTML forms. We can use this tag to create a dropdown anywhere we want.

Example

<select>....</select>

6. The <button> Element

HTML <button> tag is an interactive element used to create a button in HTML.

Example

<button>Button</button>

7. The <fieldset> Element

HTML <fieldset> tag is used to group several controls within a web form. By using the <fieldset> tag and <legend> tag, a form can be much easier for users to understand.

Example

<fieldset>....</fieldset>

8. The <datalist> Element

HTML <datalist> tag contains a set of <option> elements that represent recommended options available to choose from among others.

Example

<datalist>....</datalist>

9. The <output> Element

HTML <output> tag is a flexible and underused component that enables programmers to dynamically show the outcomes of calculations or scripts inside the content.

Example

<output> Results... </output>

10. The <option> Element

HTML <option> tag defines either the elements of the data list for autocomplete, specified by the <datalist> tag, or the items of a drop-down list, defined by the <select> tag.

Example

<option>.....</option>

11. The <optgroup> Element

HTML <optgroup> tag is used in the <select> element to group together relevant <option> elements.

Example

<optgroup><option>..</option>
 .
 .
</optgroup>

12. The <textarea> Element

HTML <textarea> tag is used to represent a multiline plain-text editing control.

Example

<textarea>.......</textarea>

Form Attributes

HTML form attributes provide specific functionalities, such as redirection to other web pages, auto-completion of text, etc.

The below table lists out some of the common form attributes:

Attribute	Description
`action`	It is used to specify a URL that processes the form submission.
`method`	It is used to define which HTTP method to use when submitting the form.
`target`	It is used to specify where to open the linked document.
`autocomplete`	It allows you to set whether the autocomplete for the form should be on or off.
`enctype`	It is used to specify how the form input data should be encoded before sending it to the server.
`novalidate`	It defines that while submitting the form, the form data should not be validated in an HTML document.

Styling HTML Forms

You can customize the appearance of HTML forms and their elements by using the CSS to match your website theme or to make it more appealing.

Example

The following is an example of an HTML form with CSS:

<!DOCTYPE html><html><head><title>HTML Form</title><style>
        body {
            font-family: 'Segoe UI', Arial, sans-serif;
        }
        form {
            width: 100%;
            max-width: 400px;
            background-color: #e8f5e9;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        legend {
            font-size: 1.2rem;
            font-weight: bold;
            margin-bottom: 10px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-size: 0.9rem;
        }
        input[type="text"],
        input[type="email"],
        input[type="password"],
        textarea {
            width: 100%;
            padding: 8px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        textarea {
            resize: none;
        }
        input[type="submit"] {
            width: 100%;
            padding: 10px;
            font-size: 1rem;
            color: #fff;
            background-color: #04af2f;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        input[type="submit"]:hover {
            background-color: #039325;
        }
    &lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;form&gt;&lt;fieldset&gt;&lt;legend&gt;Registration Form&lt;/legend&gt;&lt;label for="firstName"&gt;First Name&lt;/label&gt;&lt;input type="text" id="firstName" name="FirstName" /&gt;&lt;label for="lastName"&gt;Last Name&lt;/label&gt;&lt;input type="text" id="lastName" name="LastName" /&gt;&lt;label for="email"&gt;Email ID&lt;/label&gt;&lt;input type="email" id="email" name="email" /&gt;&lt;label for="password"&gt;Enter Your Password&lt;/label&gt;&lt;input type="password" id="password" name="password" /&gt;&lt;label for="confirmPass"&gt;Confirm Your Password&lt;/label&gt;&lt;input type="password" id="confirmPass" name="confirmPass" /&gt;&lt;label for="address"&gt;Address&lt;/label&gt;&lt;textarea id="address" name="address"&gt;&lt;/textarea&gt;&lt;input type="submit" value="Submit" /&gt;&lt;/fieldset&gt;&lt;/form&gt;&lt;/body&gt;&lt;/html&gt;</pre>

August 16, 2025