html

HTML Form Textbox

“A web form is the most common way of collecting online data these days. From individual survey questionnaires to huge marketing campaigns, these web forms prove to be a very helpful source of getting the audience’s perspective. An important component of an HTML form is a textbox, and in this article, we will walk you through the purpose of this HTML element as well as the method of creating text boxes in HTML forms.”

Purpose of a Textbox in HTML Forms

A textbox or a text field in an HTML form is used to collect single-liner textual data from the user. Generally, whenever you want to give your user the liberty to enter the text by typing rather than by selecting it from a pre-defined list, you always make use of an HTML textbox or text field. The following section will describe the procedure of creating a textbox in an HTML form.

Creating Textboxes in HTML Forms

For learning the creation of text boxes in HTML forms, you can consider the two examples explained below:

Example # 1: Creating Simple Textboxes in HTML Forms

In this example, our goal is to create simple text boxes in HTML forms for collecting some specific information. However, we do not want to take any further action after that. We have designed the following HTML script for creating simple textboxes within HTML forms:

You can see that in this script, we have first provided a heading for notifying the user about the purpose of this HTML script. Then, within the “form” label (since we are creating an HTML form), we have defined three different textboxes with labels “Name,” “Age,” and “Gender” for collecting the name, age, and gender of the user respectively. All of these labels, as well as the associated text boxes, will appear in separate lines. The user will be allowed to enter whichever information he wishes to within these textboxes. However, he will not be able to take any further action after entering this information.

When we executed our HTML script, the web page that appeared on our browser is shown in the image below. This web page contains all three of our text boxes.

Now, you are free to enter any random information within these textboxes, as shown in the following image:

Example # 2: Creating Textboxes With an Action Button in HTML Forms

In this example, we will slightly modify the HTML script that we have created above. We want to make this modification to introduce an action button within our HTML form. You will have to look at the HTML script shown below to grasp this modification:

This HTML script is almost the same as we have shared above; however, before closing the “form” label, we have created a “Submit” button in this form as well so that the user can press this button after entering the relevant information into the form. However, we have not created any action page. Therefore, clicking on this button will not navigate you to any new page.

The modified web page according to this HTML script is shown in the following image:

Now, we will enter some information into each of these text boxes, as shown in the image below:

After entering this information, when we pressed the “Submit” button, only the URL of our web page changed, showing the name, age, and gender that we had just entered. This is shown in the following image. However, after doing this, we were simply redirected to a blank HTML form since we did not create any action page in the first place.

Conclusion

This article was written keeping in mind the need for using text boxes in HTML forms. Therefore, it first explained the purpose of this HTML element, followed by the method of creating text boxes in HTML forms. Once you learn this method, it will be a piece of cake for you to create as many textboxes in your HTML forms as needed.

About the author

Ayesha Sajid

Ayesha Sajid has secured a Bachelor's degree in Computer Sciences and a Master's degree in Information Security. She is a technical content writer by profession who has around four years of experience in working with Windows and different flavors of the Linux operating system. She also has a keen interest in exploring the latest technology trends.