html

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

<label> name </label>

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:

<input attribute1="value1", attribute2="value2">

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.

About the author

Adnan Shabbir