From Scratch Web Games: A Beginners Guide to Game Development using HTML, CSS, and JavaScript
Chapter 5.12: Output
Output is a bit of an oddity since you use it to put output results into your form using JavaScript. This could just as easily be done with a span element which has even more power and flexibility. However, output was created for use in forms and as such allows a designer to create forms that are independent of the other HTML elements.
There is not very much to the output tag so this will be a very short section of this chapter but is presented here out of completeness. Simply put, the value of the output tag represents the text that will be shown. The idea behind this is that if you have a form that is performing some type of calculations it is possible to have those results shown to the user without requiring that the form is submitted as a preview of the submission.
Here is a simple example, where we are using our range elements with the results of the three ranges being shown using output in the form. We are going to take advantage of the fact that we are using a form to listen to the form’s input event which triggers whenever any of the forms controls are updated. Here is the HTML portion:
<label>
Strength:
<input name="strength" id="strength" type="range"
min="3" max="18" value="10" ></input>
<output id="strOut" for="strength"></output>
</label><br><br>
<label>
Intelligence:
<input name="intelligence" id="intelligence" type="range"
min="3" max="18" value="10" ></input>
<output id="intOut" for="intelligence"></output>
</label><br><br>
<label>
Dexterity:
<input name="dexterity" id="dexterity" type="range"
min="3" max="18" value="10" ></input>
<output id="dexOut" for="dexterity"></output>
</label><br><br>
</form>
By itself update does not do much but requires that its value be set before anything is displayed. This is handled by JavaScript which performs the calculations and sets the results. Here is the code for handling this:
var strength = document.getElementById("strength").value;
var intelligence = document.getElementById("intelligence").value;
var dexterity = document.getElementById("dexterity").value;
document.getElementById("strOut").value = strength;
document.getElementById("intOut").value = intelligence;
document.getElementById("dexOut").value = dexterity;
}
updateResults();
Resulting in a simple demo. While I can see using the tag to keep form content clean of HTML, with the ability to use spans and other html tags it is more of an antique element.
More modern items are dialogs. These were a recent addition to HTML5, though predate the addition by at least a decade as many developers faked dialog boxes which is what we will be looking at next.
Chapter contents
Chapter 5 Contents
5.1 Forms Cheat Sheets
This chapter's summary cheat sheet.
5.2 The client-server model
How forms are traditionally used.
5.3 The Form tag
How to set up a form in HTML.
5.4 Inputting text
Getting text input from the user.
5.5 Specialized text formats
Making your input fields more specific and semantic.
5.6 Form cosmetics
Making forms look more like printed forms.
5.7 checkboxes & radio buttons
How to use Checkboxes and Radio buttons.
5.8 Numbers and Dates
Using numbers and dates gives your user better GUI controls.
5.9 special purpose input types
The reset, button, image, color, and file input types.
5.10 Option Select
The select element lets users select options from a drop-down list.
5.11 Data Lists
The datalist elements lets you create pull-down lists for input elements.
5.12 Output
Displaying values in a form.
5.13 dialog box concepts
Built in dialog boxes and pre-dialog tag handmade dialogs.
5.14 using dialog boxes
The <dialog> tag and using it to create dialog boxes.
5.15 Validating forms
Review of validating forms in HTML.
5.16 JavaScript Validation
How to use JavaScript to prevent invalid forms from being submitted.
5.17 Project: Trivia
Chapter project: Trivia game
5.18 Trivia Project Solution
Solution for the Trivia gaame