1. Form Fields
Forms were originally designed for the pre-JavaScript web to allow websites to send user-submitted information in an HTTP request. This design assumes that interaction with the server always happens by navigating to a new page.
But their elements are part of the DOM like the rest of the page, and the DOM elements that represent form fields support a number of properties and events that are not present on other elements. These make it possible to inspect and control such input fields with JavaScript programs and do things such as adding new functionality to a form or using forms and fields as building blocks in a JavaScript application.
A web form consists of any number of input fields grouped in a <form> tag. HTML allows several different styles of fields, ranging from simple on/ off checkboxes to drop-down menus and fields for text input. This book won’t try to comprehensively discuss all field types, but we’ll start with a rough overview.
A lot of field types use the <input> tag. This tag’s type attribute is used to select the field’s style. These are some commonly used <input> types:
text A single-line text field
password Same as text but hides the text that is typed
checkbox An on/off switch
radio (Part of) a multiple-choice field
file Allows the user to choose a file from their computer
Form fields do not necessarily have to appear in a <form> tag. You can put them anywhere in a page. Such form-less fields cannot be submitted (only a form as a whole can), but when responding to input with JavaScript, we often don’t want to submit our fields normally anyway.
<p><input type=”text” value=”abc”> (text)</p>
<p><input type=”password” value=”abc”> (password)</p>
<p><input type=”checkbox” checked> (checkbox)</p>
<p><input type=”radio” value=”A” name=”choice”>
<input type=”radio” value=”B” name=”choice” checked>
<input type=”radio” value=”C” name=”choice”> (radio)</p>
<p><input type=”file”> (file)</p>
The fields created with this HTML code look like this:
The JavaScript interface for such elements differs with the type of the element.
Multiline text fields have their own tag, <textarea>, mostly because using an attribute to specify a multiline starting value would be awkward. The <textarea> tag requires a matching </textarea> closing tag and uses the text between those two, instead of the value attribute, as starting text
<textarea>
one
two
three
</textarea>
Finally, the <select> tag is used to create a field that allows the user to select from a number of predefined options.
<select>
<option>Pancakes</option>
<option>Pudding</option>
<option>Ice cream</option>
</select>
Such a field looks like this:
Whenever the value of a form field changes, it will fire a “change” event
2. Focus
Unlike most elements in HTML documents, form fields can get keyboard focus. When clicked or activated in some other way, they become the currently active element and the recipient of keyboard input.
Thus, you can type into a text field only when it is focused. Other fields respond differently to keyboard events. For example, a <select> menu tries to move to the option that contains the text the user typed and responds to the arrow keys by moving its selection up and down.
We can control focus from JavaScript with the focus and blur methods. The first moves focus to the DOM element it is called on, and the second removes focus. The value in document.activeElement corresponds to the currently focused element.
<input type=”text”>
<script>
document.querySelector(“input”).focusQ;
console.log(document.activeElement.tagName);
// → INPUT
document.querySelector(“input”).blur();
console.log(document.activeElement.tagName);
// → BODY
</script>
For some pages, the user is expected to want to interact with a form field immediately. JavaScript can be used to focus this field when the document is loaded, but HTML also provides the autofocus attribute, which produces the same effect while letting the browser know what we are trying to achieve.
This gives the browser the option to disable the behavior when it is not appropriate, such as when the user has put the focus on something else.
Browsers traditionally also allow the user to move the focus through the document by pressing the tab key. We can influence the order in which elements receive focus with the tabindex attribute. The following example document will let the focus jump from the text input to the OK button, rather than going through the help link first:
<input type=”text” tabindex=1> <a href=”.”>(help)</a>
<button onclick=”console.log(‘ok’)” tabindex=2>OK</button>
By default, most types of HTML elements cannot be focused. But you can add a tabindex attribute to any element that will make it focusable. A tabindex of -1 makes tabbing skip over an element, even if it is normally focusable.
3. Disabled Fields
All form fields can be disabled through their disabled attribute. It is an attribute that can be specified without value—the fact that it is present at all disables the element.
<button>I’m all right</button>
<button disabled>I’m out</button>
Disabled fields cannot be focused or changed, and browsers make them look gray and faded.
When a program is in the process of handling an action caused by some button or other control that might require communication with the server and thus take a while, it can be a good idea to disable the control until the action finishes. That way, when the user gets impatient and clicks it again, they don’t accidentally repeat their action.
4. The Form as a Whole
When a field is contained in a <form> element, its DOM element will have a form property linking back to the form’s DOM element. The <form> element, in turn, has a property called elements that contains an array-like collection of the fields inside it.
The name attribute of a form field determines the way its value will be identified when the form is submitted. It can also be used as a property name when accessing the form’s elements property, which acts both as an array-like object (accessible by number) and a map (accessible by name).
<form action=”example/submit.html”>
Name: <input type=”text” name=”name”><br>
Password: <input type=”password” name=”password”><br>
<button type=”submit”>Log in</button>
</form>
<script>
let form = document.querySelector(“form”);
console.log(form.elements[1].type);
// → password
console.log(form.elements.password.type);
// → password
console.log(form.elements.name.form == form);
// → true
</script>
A button with a type attribute of submit will, when pressed, cause the form to be submitted. Pressing enter when a form field is focused has the same effect.
Submitting a form normally means that the browser navigates to the page indicated by the form’s action attribute, using either a GET or a POST request. But before that happens, a “submit” event is fired. You can handle this event with JavaScript and prevent this default behavior by calling preventDefault on the event object.
form action=”example/submit.html”>
Value: <input type=”text” name=”value”>
<button type=”submit”>Save</button>
</form>
<script>
let form = document.querySelector(“form”);
form.addEventListener(“submit”, event => {
console.log(“Saving value”, form.elements.value.value);
event.preventDefault();
});
</script>
Intercepting “submit” events in JavaScript has various uses. We can write code to verify that the values the user entered make sense and immediately show an error message instead of submitting the form. Or we can disable the regular way of submitting the form entirely, as in the example, and have our program handle the input, possibly using fetch to send it to a server without reloading the page.
5. Text Fields
Fields created by <textarea> tags or by <input> tags with a type of text or password share a common interface. Their DOM elements have a value property that holds their current content as a string value. Setting this property to another string changes the field’s content.
The selectionStart and selectionEnd properties of text fields give us information about the cursor and selection in the text. When nothing is selected, these two properties hold the same number, indicating the position of the cursor. For example, 0 indicates the start of the text, and 10 indicates the cursor is after the 10th character. When part of the field is selected, the two properties will differ, giving us the start and end of the selected text. Like value, these properties may also be written to.
Imagine you are writing an article about Khasekhemwy but have some trouble spelling his name. The following code wires up a <textarea> tag with an event handler that, when you press F2, inserts the string “Khasekhemwy” for you.
<textarea></textarea>
<script>
let textarea = document.querySelector(“textarea”);
textarea.addEventListener(“keydown”, event => {
// The key code for F2 happens to be 113 if (event.keyCode == 113) {
replaceSelection(textarea, “Khasekhemwy”);
event.preventDefault();
}
});
function replaceSelection(field, word) {
let from = field.selectionStart, to = field.selectionEnd;
field.value = field.value.slice(0, from) + word + field.value.slice(to);
// Put the cursor after the word field.selectionStart = from + word.length;
field.selectionEnd = from + word.length;
}
</script>
The replaceSelection function replaces the currently selected part of a text field’s content with the given word and then moves the cursor after that word so that the user can continue typing.
The “change” event for a text field does not fire every time something is typed. Rather, it fires when the field loses focus after its content was changed. To respond immediately to changes in a text field, you should register a handler for the “input” event instead, which fires for every time the user types a character, deletes text, or otherwise manipulates the field’s content.
The following example shows a text field and a counter displaying the current length of the text in the field:
<input type=”text”> length: <span id=”length”>0</span>
<script>
let text = document.querySelector(“input”);
let output = document.querySelector(“#length”);
text.addEventListener(“input”, () => {
output.textContent = text.value.length;
});
</script>
6. Checkboxes and Radio Buttons
A checkbox field is a binary toggle. Its value can be extracted or changed through its checked property, which holds a Boolean value.
<label>
<input type=”checkbox” id=”purple”> Make this page purple </label>
<script>
let checkbox = document.querySelector(“#purple”);
checkbox.addEventListener(“change”, () => {
document.body.style.background = checkbox.checked ? “mediumpurple” : “”;
});
</script>
The <label> tag associates a piece of document with an input field. Clicking anywhere on the label will activate the field, which focuses it and toggles its value when it is a checkbox or radio button.
A radio button is similar to a checkbox, but it’s implicitly linked to other radio buttons with the same name attribute so that only one of them can be active at any time.
Color:
<label>
<input type=”radio” name=”color” value=”orange”> Orange
</label>
<label>
<input type=”radio” name=”color” value=”lightgreen”> Green
</label>
<label>
<input type=”radio” name=”color” value=”lightblue”> Blue
</label>
<script>
let buttons = document.querySelectorAll(“[name=color]”);
for (let button of Array.from(buttons)) {
button.addEventListener(“change”, () => {
document.body.style.background = button.value; });
}
</script>
The square brackets in the CSS query given to querySelectorAll are used to match attributes. It selects elements whose name attribute is “color”.
7. Select Fields
Select fields are conceptually similar to radio buttons—they also allow the user to choose from a set of options. But where a radio button puts the layout of the options under our control, the appearance of a <select> tag is determined by the browser.
Select fields also have a variant that is more akin to a list of checkboxes, rather than radio boxes. When given the multiple attribute, a <select> tag will allow the user to select any number of options, rather than just a single option. This will, in most browsers, show up differently than a normal select field, which is typically drawn as a drop-down control that shows the options only when you open it.
Each <option> tag has a value. This value can be defined with a value attribute. When that is not given, the text inside the option will count as its value. The value property of a <select> element reflects the currently selected option. For a multiple field, though, this property doesn’t mean much since it will give the value of only one of the currently selected options.
The <option> tags for a <select> field can be accessed as an array-like object through the field’s options property. Each option has a property called selected, which indicates whether that option is currently selected.
The property can also be written to select or deselect an option.
This example extracts the selected values from a multiple select field and uses them to compose a binary number from individual bits. Hold CTRL (or command on a Mac) to select multiple options.
<select multiple>
<option value=”1″>0001</option>
<option value=”2″>0010</option>
<option value=”4″>0100</option>
<option value=”8″>1000</option>
</select> = <span id=”output”>0</span>
<script>
let select = document.querySelector(“select”);
let output = document.querySelector(“#output”);
select.addEventListener(“change”, () => {
let number = 0;
for (let option of Array.from(select.options)) {
if (option.selected) {
number += Number(option.value);
}
}
output.textContent = number;
});
</script>
8. File Fields
File fields were originally designed as a way to upload files from the user’s machine through a form. In modern browsers, they also provide a way to read such files from JavaScript programs. The field acts as a kind of gatekeeper. The script cannot simply start reading private files from the user’s computer, but if the user selects a file in such a field, the browser interprets that action to mean that the script may read the file.
A file field usually looks like a button labeled with something like “choose file” or “browse,” with information about the chosen file next to it.
<input type=”file”>
<script>
let input = document.querySelector(“input”);
input.addEventListener(“change”, () => {
if (input.files.length > 0) {
let file = input.files[0];
console.log(“You chose”, file.name);
if (file.type) console.log(“It has type”, file.type);
}
});
</script>
The files property of a file field element is an array-like object (again, not a real array) containing the files chosen in the field. It is initially empty. The reason there isn’t simply a file property is that file fields also support a multiple attribute, which makes it possible to select multiple files at the same time.
Objects in the files object have properties such as name (the filename), size (the file’s size in bytes, which are chunks of 8 bits), and type (the media type of the file, such as text/plain or image/jpeg).
What it does not have is a property that contains the content of the file. Getting at that is a little more involved. Since reading a file from disk can take time, the interface must be asynchronous to avoid freezing the document.
<input type=”file” multiple>
<script>
let input = document.querySelector(“input”);
input.addEventListener(“change”, () => {
for (let file of Array.from(input.files)) {
let reader = new FileReader();
reader.addEventListener(“load”, () => {
console.log(“File”, file.name, “starts with”, reader.result.slice(0, 20));
});
reader.readAsText(file);
}
});
</script>
Reading a file is done by creating a FileReader object, registering a “load event handler for it, and calling its readAsText method, giving it the file we want to read. Once loading finishes, the reader’s result property contains the file’s content.
FileReaders also fire an “error” event when reading the file fails for any reason. The error object itself will end up in the reader’s error property. This interface was designed before promises became part of the language. You could wrap it in a promise like this:
function readFileText(file) {
return new Promise((resolve, reject) => {
let reader = new FileReader();
reader.addEventListener(
“load”, () => resolve(reader.result));
reader.addEventListener(
“error”, () => reject(reader.error));
reader.readAsText(file);
});
}
Source: Haverbeke Marijn (2018), Eloquent JavaScript: A Modern Introduction to Programming, No Starch Press; 3rd edition.