Input/Output

HTML5 Input

HTML5 introduced a variety of input types that enhance user interaction and improve data collection. Examples of input types include email, number, date, color, and range

Key attributes for input elements include:

  • type – specifies the kind of input
  • value – sets or retrieves the current value of the input field
  • id – A unique identifier for the input element
  • name – Used to identify form data when submitted

Validation

HTML5 provides built-in validation attributes to ensure that user input meets specific criteria before submission.

Validation attributes include:

  • required – Ensures the field is not left empty
  • pattern – Validates input against a regular expression
  • min/max – Sets numerical or date constraints
  • maxlength/minlength – controls the amount of characters allowed/required

Document Object Model (DOM)

The DOM allows developers to dynamically interact with and manipulate HTML elements, including input fields.

Common operations include:

  • Selecting Elements – Use methods like getElementById, querySelector, or getElementsByClassName.
  • Modifying Attributes – Use .setAttribute() or direct property assignment (e.g., element.value = “new value”;).
  • Event Handling – Attach event listeners to respond to user interactions like typing or submitting forms.

Examples

<!-- this is from adventureGame.md for div for adventureGame output -->
<div id="gameContainer">
    <div id="promptDropDown" class="promptDropDown" style="z-index: 9999"></div>
    <canvas id='gameCanvas'></canvas>
</div>

%% javascript

// this is an example of getElementById for input. This is from GameEnv.js
static setCanvas() {
    this.canvas = document.getElementById('gameCanvas');
    this.ctx = this.canvas.getContext('2d');
}