However convenient, forms have been a nightmare for developers for a long time, because they had a very important and difficult requirement to fulfill: transferring data from the client to the server. When Javascript came to be a regular in the playground, there was one ability which made it completely establish itself: the ability to completely sidestep this “drawback” of forms. Let’s see how this applies to forms in general and textboxes in particular!
1. Creating a basic form
For those of you who haven’t ever heard of the CGI, it is the interface that makes it possible for the server and client to exchange data. There are two things forcing you to use the CGI (common gateway interface): old times and very complex forms. While that is a fact that for the moment cannot be changed, we all agree on one thing: most forms are really not that complex. So what are the usual elements of a form?
Usually a form’s most common widgets (or form control objects) are:
- Textareas
- Textboxes
- Radio Buttons
- Push Buttons
- Checkboxes
While you might know from the user’s perspective what each of them is, everybody needs a starting point to be able to create and use them successfully. We have already explained textareas, so we’ll focus now on textboxes. Let’s see how you would create a very basic structure of a form below:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TextBox Example</title>
<script src="textbox.js" type="text/javascript"></script>
</head>
<body>
<form name="myform" action="" method="get">
Enter data in TextBox: <br>
<input type="text" name="inputbox" value="">
<input type="button" name="button" value="click" onclick="showData(this.form)">
</form>
</body>
</html>
As you have noticed, we have placed the full HTML document we’re using. So let’s explain it step by step. The first part is just the structure, and providing the document with a simple optional title. After that, we have scripted into this document a Javascript file named textbox.js, which for the moment you can ignore, as we’ll use it later. Then comes the body part, which is the most important one for us in this moment, as it’ll contain our form.
What we have here is a simple <form> tag, to which we have added three attributes: name, action and method. The name attribute just helps us identify our tag, and you’ll notice that each element has this attribute specified. The action attribute would be used for us to inform the browser on how we want the CGI to handle the form, which is why we leave it empty, so it doesn’t mess with the form at all. The third attribute would define the method with which the server would get the data, but in our case using this is just a formality, since we don’t use the CGI at all.
Then we have placed the textbox. You don’t see any textbox there?! Of course you do! The <input> element with a text value of the type attribute is precisely it: a textbox! Sneaky, right? We’ll explain this element further below.
The last thing in our form is a simple push button with the value click. You’ll see that we have added an event handler to this button, which is what makes our form more than just an HTML one, as it includes Javascript in it. This handler is invisible to the browsers with no support for Javascript, so we’re able to use the same form for all browsers.
Now that we can create our own form, let’s get back to explaining all the details of a textbox, shall we?
2. Textbox Properties
Similar to textareas, textboxes were another feature that was deeply improved in HTML5. While it supports all properties and methods of input elements in general, there are a number of attributes which are specialized and make it’s usage simpler. Like textareas, these are also divided into the original ones, and the ones that were added after the standardization of HTML5.
2.1 HTML Attributes
There are a number of HTML attributes regarding textboxes, a good number of which, if not all, are shared with textareas. Some of these are:
size– which is used to set or get the size of the textbox in characters. It’s analog tocolsandrowsin textarea attributes, except in this case, you don’t need to define the number of rows, the textbox is just one big row by default.disabled-is a boolean value that shows whether or not the user can interact with the control. By default this attribute is set to 0, or otherwise inherited by the parent elementreadOnly-is a boolean value that shows whether or not the control should be read-only. The difference between this one and disabled is that it doesn’t prevent the user from selecting text or clicking in the control and allows you to submit the value of the textbox with the form.
We have also defaultValue, form, value and type as honorable mentions in the HTML attributes category, and they have the same function as they do for textareas. defaultValue sets or returns the default value of the control in case it is not completed by the user while form returns a reference to the form that contains the text area. We use value to set or return the contents of the element, and type to get the type of the form element the text area is. With that, we get on with the HTML5 attributes.
2.2 HTML5 Attributes
Now on to the attributes presented in HTML5 and beyond. There are two very important attributes: list and pattern. The first one returns a reference to the datalist that contains the text field while the second sets or returns the value of the pattern attribute of a text field. I say important because the rest of the attributes are also related to textareas (again!), and by now you know what they mean if you’ve studied them.
If you haven’t we’ll recap them in a few words. These are their mutual attributes:
autocomplete– shows whether or not the browser should automatically complete the value of the control or not.autofocus– is used to determine whether the textbox has input focus when the page is loaded. Note that only one of the input element can have this attribute set toTRUE.placeholder– is used to set or return the value of the placeholder we want in our textbox.required– determines whether it is obligatory or not for the textbox to be filled out before submitting the form.
And with that we conclude all the attributes of the Textbox object.
3. Creating a Textbox using Javascript
When we explained how to create a simple form, inadvertently we explained how to create a textbox using HTML. However, there exists another way to do so using only Javascript. You would have to write the code snippet below:
textbox.js
var createtextbox = document.createElement("INPUT");
createtextbox.setAttribute("type", "text");
As you see, we have used the function createElement() to create an input element, and then have added attributes to it, in our case we have set the attribute type to the value text, which as we’ve established, is a condition for an input element to be called a textbox and not anything else. Easy, right?
4. Getting data from a Textbox
There are at least three different ways to get the data written in a textbox, and don’t forget you can always add your own if you can, so this number is subject to change. Let’s take a look at them one by one!
4.1 By referencing the textbox
To better understand this method we will have to go back to the part where we learned how to create a simple form. It might have caught your eye that after creating the textbox we placed a button which you might have figured we wouldn’t use at all. Well, there exactly where you have to turn back to!
We have used an event handler which would invoke a function when the button is clicked. This function would be showData. The code for that function would go like below:
textbox.js
function showData (form) {
var dataRcv = form.inputbox.value;
alert ("Your Data: " + dataRcv);
}
The function is pretty easy. We have passed the form as an argument to the function by using the this keyword. Then we have passed the data entered in the textbox to a variable which we have then alerted with a simple alert() function.
The catch here would be in the way the data of our textbox is referenced. We have used the dot operator to specify the form object we want to access which in our case is form, and after that we specify the object within that form whose property we want to access. The object inside the form in our case would be inputbox, and it’s property for which we’re interested would be the value property. Notice that these are all the names of the elements that we placed before, which at first might have seemed useless to you. All this is done with barely a line of code.
4.2 Getting the element by ID
Did the title of this section ring a bell? Right! There’s an important Javascript function named like this. Exactly this function will be the one we will use to get the contents of the textbox. But first we would need to make some changes in our form. You have to add another attribute to the textbox which would be ID, in order to make it possible for us to use the function we mentioned. Let’s suppose we want to give it an id of myTextBox. The textbox element would look like this:
index.html
<input type="text" name="inputbox" value="" id="myTextBox">
All the other part of the HTML file stays the same. The Javascript code, however, would change substantially. It would look like the code snippet below:
textbox.js
function showData (form) {
var showData= document.getElementById("myTextBox");
alert ("Your Data: " + dataRcv);
}
The change is that instead of the dot operator we used before, we now use the getDocumentById() function.
4.3 By Searching through the elements of the form.
This method is very similar to the previous one. The difference is that you don’t just get to the textbox by using it’s ID but first go to the form containing it, and get the value of the textbox by searching through he elements of the form. In our case, the textbox is the second element of the form, so the code snippet would go like this:
textbox.js
var showData = document.getElementById("myForm").elements[1].value;
This method is a bit like a combination of the first and the second method as it employs both the getElementById() function and the dot operator referencing.
5. Setting a value in a Textbox
We learned how to get the value written by the user in a textbox, but how about setting it using only Javascript? Is it just as easy, or is it even possible? Of course! Let’s see how.
The attributes we used in the first example in order to get the value of the textbox, form, name and value are not only readable but also writable. That means the process we followed in that example would serve as a guide for this one, because if there we just read the value, here we can do the reverse: setting it! The code for the Javascript function would go like below:
textbox.js
function setData (form) {
form.inputbox.value = "Value to be set!"
}
Remember to place a button invoking this function with an event handler and you’re all set to go!
6. Download the Source Code
This was an example of Textboxes in Javascript.
You can download the full source code of this example here: Textboxes
