HTML text box | Explained

You have seen in many software and websites when you click on the text area, the cursor starts blinking there, indicating that users can start typing. This specified functionality can be included by using the HTML text box. More specifically, the text box is the common element in HTML that can control the input from the user. It is an area where users can enter any input text.

This guide will discuss:

What are the Types of HTML text boxes?
Single line HTML text boxes
Multi-line HTML text boxes

Let’s get started!

What are the Types of HTML text boxes?

There are two types of HTML text boxes:

Single line text box: This type of text box takes single line input from the user on the web page.
Multi-line text box: This type of text box takes multiple-line text input from the user on the web page.

Head towards them one by one!

How to Create Single line HTML text box?

To create single line HTML text box, follow the below-given syntax:

In the given syntax, the input tag has two attributes:

“type” represents the type of the input field which can be set according to the preferences. For instance, it could be text fields, password fields, email fields, and much more.
“name” of the <input> element that will be used as a reference in JavaScript and fetching data after submission.

Example: Creating Single line HTML text box

Let’s create two input fields using the “<input>” tag and specifying its type as “text”. Moreover, specify the name of the first input field as “user_name1” and the second one as “user_name2”:

<form>

First Name: <input type="text" name="user_name1">

Last Name: <input type="text" name="user_name2">

</form>

Currently, the web page will look like this having two single text boxes:

In the next section, we will learn how to create a multi-line textbox.

How to Create Multi-line HTML text boxes?

The HTML multi-line textbox is used in forms to gather feedback or comments from the user. It collects multiple lines of text. Moreover, the “<textarea>” tag can be utilized for creating multi-line HTML text boxes.

Syntax

Here is the syntax to create a multi-line text box in HTML:

The description of the above syntax is mentioned here:

“name” is used to specify the <input> element name so that it can be further used like in JavaScript.
“cols” and “rows” are utilized for the size of the text area by adding their values as “n1” and “n2”.

Let’s clarify this concept with the help of implementation!

Example: Creating Multi-line HTML text boxes

In the web page, add the <textarea> tag, specify its “name” as “feedback”, “id” as “f_area”, num of columns “cols” as “30”, and the number of “rows” as “10”. The default text which needs to be displayed inside the multi-line text box will be written within the opening and closing tags of the text area:

<form>

feedback area:

<br>

<textarea name="feedback" id="f_area" cols="30" rows="10">Give your feedback here!</textarea>

</form>

As you can see in the below image, the multi-line text box will be displayed on the web page:

These are the ways to create single line and multi-line text boxes in HTML.

Conclusion

HTML text boxes are commonly used elements in forms to take user inputs. There are two types of HTML text boxes: Single line text boxes and Multi-line text boxes. The “<input>” and “<textarea>” tags can be utilized to create single-line and multi-line textboxes, respectively. In this guide, we have explained what an HTML text box is and how to create single line and multi-line text boxes in HTML.