HTML Forms

Forms in HTML are used to collect information from users (on a web page) and to process that data. For instance, you would have encountered sign-in/sign-up forms that collect the credentials and process them for singing-in or creation of an account. The fundamental inforamtion regarding HTML forms is provided in this article. Additionally, we have also described an example to create HTML forms.

Fundamentals of HTML forms

Here, we will look for the building blocks of HTML form elements and their respective attributes. So, let’s dig into them:

HTML form element

This tag is the base of HTML forms and is used to take the first step for creating HTML forms. The following syntax refers to the form tag:

<form>
elements-of-form
</form>

The elements of form would be discussed in the upcoming sections. Here, we present the attributes table supported by the HTML form element.

Attributes of HTML Form element
Attributes	Value(s)	Description
action		This defines the location/file where the form data will be submitted
target		It is used to display the response after form submission
	_self	Current window
	_top	Full frame of the current window
	_parent	Parent frame
	_blank	New window
Method		Defines the HTTP method of submitting the form
	GET	It is the default method used to request data from the server
	POST	Used to send data to the server
Autocomplete	on	Reusing the form will autofill the fields
Novalidate		The form data will not be validated on submission

The above table has summarized all the attributes supported by the form element. Let’s explore elements of HTML forms.

HTML label element

This element defines the label for HTML form elements to show the purpose/description of that element on the user’s screen. Although it is not a necessary element for creating HTML forms, however, it is recommended to add this element as it assists in guiding the users.

The syntax of label tag is described below

The name represents the value that would be displayed on the user’s screen and it accepts an attribute named for that contains the reference to the id attribute of the input element.

HTML input element

The input element is considered as the core element of an HTML form. The syntax provided below refers to the input element:

The functionality of the input tag depends on the attributes and their values. We have listed down the important attributes of the HTML input element.

Attributes of input element
Attributes	Value(s)	Description
id		Sets the identifier for recognition
Value		Specifies initial value of the input field
Name		used to submit the data of input element
readonly		Used to restrict the text field to read-only
maxlength		Used to define the maximum number of characters in an input field
min		Used to set the minimum value of number, date, range, month etc.,
max		The maximum value of number, date, range, month, etc.,
multiple		This attribute allows to enter multiple email addresses or to attach multiple files
required		Must be filled before submission
placeholder		The dummy characters that are already present in the input field
type		Used to insert data depending on the values
	text	Single text field to insert data
	button	Create a button
	password	Set a password field
	submit	Submit button to submit the form
	reset	Reset button to reset all values
	radio	To create a radio button
	checkbox	To create a checkbox
	color	To set a color of the text field
	date	Create a date field
	email	To create a text field to get email address
	file	A file-select field would be created to get the file
	hidden	A field that is only visible to the developer
	month	To select month and year
	number	Creates a field that accepts numeric values
	tel	To insert a telephone number
	url	Used to create a field that contains url

The attributes provided in the table depict that the input element has a key role in creating HTML forms.

HTML textarea element

The input element allows you to insert a single-line text field. However, if you want to create multi-line text fields, you have to use <textarea> tag by using the following syntax:

This element accepts three attributes, rows, cols, and name. The rows and cols attribute to set the height and width of the attribute whereas the name attribute is used to recognize the textarea by the server.

From the above discussion, you would have gone through the building blocks of HTML forms. Let’s practice them to create a sample HTML form.

How to create an HTML Form

This section practices a few examples that create HTML forms in various scenarios.

Example
The code provided below creates an HTML form using the form element alongside input and label elements.

<form>
<label for="name"> Enter Your Name: </label> <br>
<input type="text" name="name"> <br>

<label for="email"> Enter your Email Address: </label> <br>
<input type="email" name="email"> <br>

<label for="intro"> Introduction </label> <br>
<textarea rows="10" cols="50" name="introduction"> Introduce yourself </textarea> <br>

<input type="submit" name="submit" value="Submit">
</form>

The description of the code is as follows:

A form element is declared to start the body that is followed by the label, input, and text area elements.
Two label elements refer to two input elements that are supposed to get the name and email of the user. Moreover, the last label element represents the textarea field.
Lastly, a button is created using the submit type of the input element.

Output

For a better understanding of the output, we have highlighted the area where the label, input, textarea, and submit buttons are created.

Conclusion

Forms in HTML are used to collect data from the user. It can be for any purpose such as customer information, registration, feedback, comments, etc. An HTML form may comprise various text fields, radio buttons, checkboxes, email fields, and many more. We have provided the fundamental elements of HTML forms and latterly these elements are used to create an HTML form as well.