From Scratch Web Games: A Beginners Guide to Game Development using HTML, CSS, and JavaScript

Chapter 5.4: Inputting Text

A form that just has buttons in it is not of much use, most often we want users to fill out forms. Forms, at a minimum, consist of labels and areas where the user enters text. For some reason, it was decided that most of the different form inputs would be grouped together into a single tag. This results in one of the more complicated, yet easy to use once you understand it, tags that you will encounter. This is the input tag, which obviously is for adding inputs to a form. We will be exploring this tag in several sections of this chapter. The idea is that any input control on the form should be an input tag, with a type attribute inside of the tag used to determine the type of the input control. For getting text from the user, you would use the “text” type. The input tag does not need a closing tag. The simplest form of this tag is:

Basic text input:

If you are placing an input tag outside of a form but want it applied to that form, you will also need the form tag. Technically, the id and name attributes are optional but you will need at least one of them to be able to access what the user enters. As mentioned in earlier chapters, id is a unique identifier used to make it easy to get a particular element when using JavaScript. The name attribute has a similar purpose but is for the server, though it is also possible to access elements in JavaScript using the name attribute as you will see later in this chapter.

There are a lot of attributes available for the input tag. Many of them are dependent on the type of input that is being specified. Some of the attributes are targeted for touch screen users, so will only do things if the user is entering text using a touch device. The autocapitalize attribute is used to aid in the capitalization of text entered into the input field when using touch keyboards. By default, it is set to none. It allows for capitalization of “characters”, “words”, or “sentences”. If your primary target audience is touch-users then this could be useful but I never bother with this attribute.

You are able to disable text using the disabled attribute and setting it to “true”. You also have a readonly attribute that makes the text readonly. While both of these options make it impossible for the user to change the text in the input box, disabled is visibly dimmed to make it clear. Remember that you can change attributes in JavaScript making it easy to disable and re-enable things on the fly.

disabled:
Read only:

Often, it is nice to have some type of placeholder text inside the prompt. This can be useful to give a sample input or other descriptive text to help further emphasize what contents should be going into the text box. This can be done by using the placeholder attribute and typically shows up in the form as grayed out text.

placeholder text:

You can also control how much text the user can enter. Setting both a maximum length using the maxlength attribute and a minimum length using the minlength attribute. The maximum length is enforced by the browser, but the minimum length is used for validation. This means that the form will not be submitted if the input length is too small. You can check the validity requirements within JavaScript by using the checkValidity() method, but in some browsers this is not always accurate as empty text fields will validate as true even if there is a minimum length requirement. If you are more concerned with the size of the text box instead of how many characters can be entered, then the size attribute can be used, with the size being specified in ems.

I absolutely, positively, without doubt hate sites that disable autocomplete. The ability for browsers to fill out forms for me is one of the handiest features of a web browser. It also has the benefit of acting as a spoofed site detector as if the autofill options to a site are not showing up, warning flags go off in my head and I scrutinize the URL to make sure the name of the site is correct. Still, there may be some reason to not allow this feature so you can control if the browser will autofill a field in a form by simply setting the autocomplete attribute, which defaults to true.

The input tag is not the only tag you can use for getting text input from the user. If you need the user to enter a large amount of text, such as for a description or explanation, then you can use a textarea tag. This is slightly different from the input tag as it requires a closing tag. Between the two tags is the default contents of the text area. The basic tag looks like this:

The text editing attributes mentioned above all work with the text area with the exception of size. Because text areas are multi-line input areas, you specify the size of the text box using the rows and cols attributes.

TextArea:
default text
Another TextArea:
default text

The text area also supports a couple of other useful attributes. The spellcheck attribute lets you enable or disable spellchecking in the text area by setting it to true or false. The wrap attribute indicates how the wrapping of text should be handled when sent to the server so is not as useful. A value of “hard” adds line breaks where the text wraps in the text area. “Soft” is the default value and only puts line breaks where there are actual line breaks entered by the user.

Before we end this section, there is one final tag I want to talk about. The label tag is used to assign labels to input components. While other text display tags, such as <p>, should work fine, the label is designed to be used by forms and should have a for attribute to indicate which input component the label is for. This is useful for aiding browsers for those with disabilities to direct them to the correct component when they are entering information.

Use of labels for all of your input components is strongly recommended, and some IDEs will even give you warning messages if you do not have a label for a component.

While we have covered getting text to the user, there are several very specialized types of text input that the user may want to enter. Some browsers will have special input methods or validation support for these. This is what we will be looking at in the next section.

The demos for this chapter are in the git repository with the demo for this section being named “TextInputDemo.html”.