22 Input Elements

In the last few chapters, you learned a little bit about how input, processing, and output works in a client-side JavaScript app.

• Input can, so far, come from events such as mouse clicks and movements.
• Processing happens in response to events.
• Output consists of changes to the Document Object Model.

This is a good start, but to create more useful apps, we would need to be able to collect more detailed input from the user. HTML input elements fill this gap.

HTML contains input elements for text, numbers, colors, dates, and so on. The exact details of how each input element behaves is controlled by the browser, but every input element has a value attribute that (in most cases) can be set by the user as they interact with it. When keyboard or mouse events happen, JavaScript event listeners can retrieve the values set by the user. Most web apps use input elements in some way.

Later in this book, we will also introduce the form element, which can be used along with input elements to send data to the server for processing. But for now, we are only operating on the client side, so we will not use form elements in this chapter.

A Very Basic Input Element

We’ve already seen how to use an input element to create a button. But by changing the type, an input element can take a number of different forms. Here’s an simple pair of input elements that could be used together to get a string from the user.

<input type="text">
<input type="button" value="Submit">

The first input element creates a simple text box . The second, which we have seen before, creates a button.

Styling Input Elements

You can use the input tag selector along with id and class selectors to write CSS rules to style input elements however you like. The default styles tend to be very basic, so you will probably want to override them. There is also a CSS attribute selector that can be useful when you want to style all elements of one input type in the same way.

For example, you can use the selector input[type=text] to select just text boxes (watch the spacing). Here’s a rule that makes the textboxes look a bit better:

input[type=text] {
    font: sans-serif;
    font-size: 24px;
    background-color: paleturquoise;
    color: royalblue;
    border: 3px solid royalblue ;
    border-radius: 4px;
}

Retrieving the Input

In order to get anything from an input element, you need to be able to pull it out of the DOM. You can do this in all the same ways you would retrieve any other DOM element, for example by assigning an id attribute and using document.getElementById. Once you have the element, its contents will be contained in the value attribute.

<input type="text" id="myinput">

let e = document.getElementById("myinput");
e.value;
typeof e.value;

<input type="text" id="myinput" value="some text">

document.getElementById("myinput").addEventListener("input", function(event) {
    console.log(this.value);
});

More Input Types and Attributes

To create a good user interface for the user, it’s a good idea to use input attributes to constrain the user where possible.

The type Attribute

Here are some other possibilities for the type attribute of an input element that will help to constrain user input.

• password: Usually masks user input.
• number, range: Usually restricts the user to numeric input.
• date, time: Usually restricts the user to pre-formatted date and time strings.
• color: Usually restricts the user to an HTML color code.
• image: This is a button type that can be used to create a button with an image on it instead of text.

In addition, there are some other specialized input types that operate a little differently, such as drop-down lists, check boxes, radio buttons, and text areas.

No matter what the type of the input element, the value attribute always contains a string. If the string represents a number you will have to use parseInt or parseFloat to convert it. If it’s a date or a time, you may have to do some string processing to interpret it effectively.

Here are a few other attributes you can use to further constrain and prompt the user.

The placeholder Attribute

For text input elements, this creates a “ghost” value in the text box that disappears when the user types something. It can add an extra level of prompting. In the example below, the text box will show “userid” greyed out until the user enters something.

<input type="text" placeholder="userid">

maxlength: For text and similar input elements, this sets a maximum input size. The example below restricts the input to 5 characters at most.

<input type="text" maxlength="5">

The max, min, and step Attributes

For number and range input elements, these attributes put limits on what the user can enter using the arrow controls. The default step size is 1. If you set it to 2, the user can only go up and down by 2’s. If you set it to 0.1 they can enter floats with 1 decimal place accuracy. The example below restricts the user to multiples of 5 between 0 and 100.

<input type="number" min="0" max="100" step="5" value="0">

You can also use min, max, and step with date and time input elements. Use the format “YYYY-MM-DD” for a date and “HH:MM” for a time. The step value specifies number of days for a date and number of seconds for a time.

The autofocus Attribute

This attribute does not require a value. If it is present, the input element will automatically get focus when the page is loaded. For example, if you put autofocus on a text input element as in the example below, the user can start typing as soon as the page loads. They don’t have to click on the element first.

<input type="text" autofocus>

The readonly and disabled Attributes

These attributes do not require a value (but you can optionally set disabled to true or false in JavaScript). The readonly attribute prevents the user from changing the value.

<input type="text" readonly>

The disabled attribute  greys out the element and prevents it from getting focus.

<input type="text" disabled>