Step 1 – Create a basic html document with basic code
First of all let’s create a blank basic html document with basic code.
In the above screenshot you will see a basic html document with basic code. Now let’s create a textbox in this document.
Step 2 – Add textbox in html document
In the above screenshot you will see I have added an input of type text. Now let’s create a button in the document. We need a button because when a user types in input text we need the value of input which user enters in that input field.
Step 3 – Add a button in our document
Now let’s render this in our web browser to see how it is looking.
In the above screenshot you will see how nicely they both are positioned.
In this function I have got the input field by using the “querySelector” method and got input text by its name attribute that is “textInput”.
Now let’s render this in our web browser to see the console of our result. The console tab is in every web browser’s developer tools. It depends on you which web browser you are using. I am using google chrome. The short key to open developer tools is “CTRL+SHIF+i”.
In the above screenshot you will see the red highlighted text. This is why when we click on the “Get input text” button. We see that input text element in the console. That means our code is working fine. Now let’s get the value from the textbox which the user will enter.
Step 3 – Get the value of textbox that user enters
In the above screenshot you will see I have created a new variable “inputValue” and assigned the “textInput” value to our variable.
Let’s render it in our web browser and see if we get the value or not.
In the above screenshot you will see I have entered the value “input value entered” in the input field.
When I pressed the “Get input text” button. In our console tab of web browser developer tools. I got the value of my textbox.
You may also like: