Let us assume that you are making a website, and you want the visitor to send some information through your website. However, the information or data could be a name, numbers, and email. HTML makes it easy to collect all of these sorts of data. You can create a textbox in HTML using input elements to make it possible. Input elements are the way of interacting with the user and getting the data in various forms, It depends on the type attribute. In this article, I will create an input element that takes data in text. Moreover, we will see other attributes which can control the input from the user.
Below is a example of basic textbox in the codepen.
See the Pen Untitled by Jaspal (@jaspal9755) on CodePen.
Table of Contents
Step-1:- Wrap input elements in the form element
The form element contains all the controls in the form of input elements, and these whole elements, along with the form, represents a HTML document section. Moreover, the Form element uses a method attribute with the value of GET or POST to send the input data of a website user in different forms to the server. The code for this will be:-
<form method="post"> </form
Step-2:- Use HTML input element to make a textbox
As we have discussed before, to insert any information, we need an HTML element known as input. Moreover, I have used the label element to define the input element. This is how the code looks like:-
<form method="post"> <label for="name">First Name:</label> <input> </form>
An input element is used to write a single line text without the line break.
The input element creates a shape of textbox where a user can enter or input the data in text. The output of the above code in the browser will be like this:-
Step-3: Assign a value to the type attribute to input element
Second step, which is very important, is assigning a type attribute to the input element. This type of attribute controls the nature of the input element. In other words, it will tell the input element that input data will be in what form. There are various types of values for the type attribute, for example, email, password etc., but to make it work like a textbox, we will assign a value of text to the type attribute of the input element.
<form method="post"> <label for="name">First Name:</label> <input type="text" id="name"> </form>
By default a input element contains a value of text for the type attribute.
Step-4: Setting the maximum and minimum character length of a textbox
The input element comes with additional attributes that enhance the element’s control. I will discuss two of the most commonly used attributes, min-length and max-length. I have created a codepen example for you.
See the Pen Html textbox with min-vale and max-value by Jaspal (@jaspal9755) on CodePen.
To control the length of while inserting the data by user i have used maxlength and minlenhgth attributes.
The additional attribute maxlength of the input element has the value of 8, which stops the user to write no more than 8 characters while writing in the input element. On the other hand, I have given a value of 4 to the minlength attribute, which will pop up a message when a user writes less than 4 characters while submitting the form. In the end I have given a submit button which I made with button element.
I have taken a screenshot when I was writing less than 4 characters in the input element and tried to submit the form. You can see the pop up message about character length. This is very powerful for password requirement input field.
Wrapping up
You have seen that HTML provides a handful element known as input to use it as textbox. You have also seen that it has different attributes to accomplish the different tasks. Moreover, this element contains the attributes such as type, minlength etc which make it more powerful. You can see that a user can input the data and submit that with the help of form. Basically, it is a medium of interaction with the website user and grab the valuable information from it.
