Buttons: The HTML button element

<button onclick="alert('Hello!');">Click me!</button>

• button's text appears inside button tag
• JS onclick event handler specifies button's behavior

The DOM innerHTML property

<button id="b1" onclick="myFunction('I did it!');">Click me!</button>
<p id="target">This text will be replaced.</p>

function myFunction(text) {
    var p = document.getElementById("target");
    p.innerHTML = text;
}

This text will be replaced.

• innerHTML refers to the HTML text inside of an element:
  <p>this is the innerHTML of the p tag</p>
• event handler can modify the innerHTML of another element

Another button example

<button id="b1" onclick="addText();">Click me!</button>

function addText() {
    var button = document.getElementById("b1");
    button.innerHTML += " narf";
}

• also acceptable in this case:
  <button onclick="this.innerHTML += ' narf';">Click me!</button>

Text boxes: textarea (DOM)

<textarea rows="4" cols="20">
Type your comments here.
</textarea>

• initial text placed inside textarea tag (optional)
• optional readonly attribute means text cannot be modified
• DOM properties: disabled, readOnly, value (text inside textarea)

Practice problem: Shuffle

• Write the HTML and Javascript code to shuffle the lines of text within a text area whenever a Shuffle button is clicked.
• shuffling algorithms

Combo boxes: select (DOM), option (DOM)

<select>
<option>Jerry</option>
<option>George</option>
<option>Kramer</option>
<option>Elaine</option>
</select>

• option element represents each choice
• select optional attributes: disabled, multiple, size
• attach onchange handler to select to cause behavior on each selection
  • <select onchange="alert('You chose ' + this.value);">

Using select for lists

<select multiple="multiple" size="3">
<option value="Jerry">Jerry</option>
<option value="George">George</option>
<option value="Kramer">Kramer</option>
<option value="Elaine">Elaine</option>
<option value="Newman">Newman</option>
<option value="Susan">Susan</option>
</select>

• DOM properties: disabled, length, multiple, name, selectedIndex, size, value (selected item text)
• DOM methods: add(option, index), remove(index)

Option groups: optgroup

<select>
<optgroup label="Major Characters">
<option value="Jerry">Jerry</option>
<option value="George">George</option>
<option value="Kramer">Kramer</option>
<option value="Elaine">Elaine</option>
</optgroup>
<optgroup label="Minor Characters">
<option value="Newman">Newman</option>
<option value="Susan">Susan</option>
</optgroup>
</select>

• what should we do if we don't like the bold italic?

Input fields: input

<input type="text" /><br />
<input type="password" size="12" />

• creates many different types of input controls, depending on its type attribute
• always empty; contains attributes only
• attributes: accept, alt, disabled, maxlength, name, readonly, size, src, type, value
• DOM properties for type="text" and type="password": disabled, maxLength, readOnly, size, value (text in field)

Radio buttons (DOM)

<input type="radio" name="creditcards" id="visa" />
    <label for="visa">Visa</label><br />
<input type="radio" name="creditcards" id="mastercard" />
    <label for="mastercard">MasterCard</label><br />
<input type="radio" name="creditcards" id="amex" />
    <label for="amex">American Express</label><br />

• grouped by (required) name attribute
• button's text is a label element with for attribute set to button's id
• DOM properties: checked, defaultChecked, disabled

Checkboxes (DOM)

<input type="checkbox" name="toppings" value="lettuce" id="lettuce" />
    <label for="lettuce">Lettuce</label><br />
<input type="checkbox" name="toppings" value="tomato" id="tomato" />
    <label for="tomato">Tomato</label><br />
<input type="checkbox" name="toppings" value="pickles" id="pickles" />
    <label for="pickles">Pickles</label>

• name attribute is required
• DOM properties: checked, defaultChecked, disabled

Grouping input: fieldset, legend

<fieldset>
<legend>Credit cards:</legend>
<input type="radio" name="creditcards" id="visa" />
    <label for="visa">Visa</label><br />
<input type="radio" name="creditcards" id="mastercard" />
    <label for="mastercard">MasterCard</label><br />
<input type="radio" name="creditcards" id="amex" />
    <label for="amex">American Express</label><br />
</fieldset>

• groups related input fields; legend supplies an optional caption

Practice problem: Colored text

• Write the HTML and Javascript code to present a text area and three on/off options for red, green, and blue.
• When the user checks each box, it will add or remove that color from the text area's text.