Learning Objectives

• Learn about the most common HTML Widgets
• Be able to use a variety of <input> elements
• Understand and use various buttons, check-boxes, radio buttons, and labels
• Be able to work with HTML widgets via DOM events

Readings

1. The native form widgets. Note that we will be using these separate from “classic” HTML forms initially.

References

• HTML5.1 Specification
• The input element

Single Line Text Fields 1

Example

<input type="text" id="InTest1" name="sample" value="I'm a text field">

What are the attributes?

Single Line Text Fields 2

• value: On getting, it must return the current value of the element. On setting, it must set the element’s value to the new value.
• name: is used when returning info from a form or setting up a “radio button group”.

Password Field 1

Example:

<input type="password" id="InTest2" placeholder="password">

• The placeholder attribute represents a short hint
• Use the value attribute to get the password.

Password Field 2

Live Example:

Other Input types

• tel
• url, email
• date, month, week, time, datetime-local
• number, range, color

Check caniuse for current support

Multi Line Input 1

Text Areas:

<textarea cols="30" rows="6"
placeholder="Your stuff here">
</textarea>

Multi Line Input 2

Live example

Other attributes wrap: values hard or soft, to prevent resizing use CSS property resize: none.

Text Input Events

• The input event fires whenever the user has modified the data of the control.
• The change event fires when the value is committed, if that makes sense for the control, or else when the control loses focus. In all cases, the input event comes before the corresponding change event (if any).

Text Input Events Example

This script was added to the end of the slide show:

function myChange(event)
    {console.log(event.target.type + " changed:" + event.target.value)}

function myInput(event)
    {console.log(event.target.type + " input:" + event.target.value)}

var textArea1 = document.getElementById("TextArea1");
textArea1.addEventListener("change", myChange);
textArea1.addEventListener("input", myInput);

Check Boxes 1

Use input with type=checkbox like so:

<input type="checkbox" checked value="Whatever" >

• checked if present makes the box checked
• value is convenient event in the non-form case to indicate the value of the selection.

Check Boxes 2

Live:

Kinda minimalistic 😦

Check Boxes & Labels 1

Checkboxes are small targets we can match one with a clickable label for easier use:

<label for="CheckTest1">Check me out &#x1F60E;</label>
<input type="checkbox" id="CheckTest1" >

Check Boxes & Labels 2

Live

Check me out 😎

Radio Buttons

Only one selection in a group maybe selected. To form a group we give all the radio buttons the same name attribute:

<style>#RadioExample input {margin-right: 2em}</style>
<div id="RadioExample">
<label for="Coffee" >Coffee</label>
<input id="Coffee" type="radio" name="BevGroup" value="Coffee">
<label for="Tea" >Tea</label>
<input id="Tea" type="radio" name="BevGroup" value="Tea" checked>
<label for="Cocoa" >Cocoa</label>
<input id="Cocoa" type="radio" name="BevGroup" value="Cocoa">
</div>

Radio Buttons Live

Checkbox and Radio Button Events

Both emit input and change events at the same time so only need to listen for one or the other. Example code:

var coffee = document.getElementById("Coffee");
var tea = document.getElementById("Tea");
var cocoa = document.getElementById("Cocoa");
coffee.addEventListener("change", myChange);
coffee.addEventListener("input", myInput);
tea.addEventListener("change", myChange);
tea.addEventListener("input", myInput);
cocoa.addEventListener("change", myChange);
cocoa.addEventListener("input", myInput);

Buttons

Two ways to specify buttons:

<button type="button">
    This an <br><strong>anonymous button</strong>
</button>

<input type="button" value="This is an anonymous button">

Buttons Live

Differences

From MDN: Buttons always behave the same whether you use a <button> element or an <input> element. There are, however, some notable differences:

• <button> elements let you use HTML content in their labels, which are inserted inside the opening and closing <button> tags.
• <input> elements on the other hand are empty elements; their labels are inserted inside value attributes, and therefore only accept plain text content.

Button types?

• button: anonymous button, no special behavior with forms.
• submit: submits a form when clicked.
• reset: resets a form to default values.

Button Events

Buttons generate click events.

var myButton = document.getElementById("ClickTest1");
myButton.addEventListener("click", ()=>alert("button clicked!"));

Misc

• Numbers
• Sliders
• Date and time picker
• File picker

What’s Missing?

• Dialog boxes (modal and non-modal)
• tabbed panes
• menu systems, drop down menus
• movable/resizable panels

How can that be? We see them all over…