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:
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|
|action||This defines the location/file where the form data will be submitted|
|target||It is used to display the response after form submission|
|_top||Full frame of the current 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|
|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|
|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.
The code provided below creates an HTML form using the form element alongside input and label elements.
<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">
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.
For a better understanding of the output, we have highlighted the area where the label, input, textarea, and submit buttons are created.
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.