Source

PunkyBrowster / tests / pages / test_interaction.html

<html>

<head>
    <title>test_interaction</title>

    <script>
    var makeNewDiv = function(cls, text) {
        var div = document.createElement('div');

        div.setAttribute('class', cls);
        div.innerHTML = text;

        document.body.appendChild(div);
    };

    var setSelectMessage = function() {
        var span = document.getElementById('select_message');
        span.innerHTML = 'Something was selected.'
    };
    </script>

</head>

<body>

<button id="make-new-div" onclick="makeNewDiv('button-click', 'Button was clicked')">Click this button baby</button>

<br />

<a id="normal-link" href="test_interaction_2.html">Click this link to go to another page</a>

<br />

<form action="test_interaction_2.html">
    <input name="text_input" id="text_input" type="text" value="foobar" />

    <br />

    <input name="unchecked_checkbox" id="unchecked_checkbox" type="checkbox" />Unchecked checkbox

    <br />

    <input name="checked_checkbox" id="checked_checkbox"  type="checkbox" checked="checked" />Checked checkbox

    <br />

    <select name="select1" id="select1" onchange="setSelectMessage();">
        <option value="77">Salsa</option>
        <option value="88">Rumba</option>
        <option value="99">Tango</option>
    </select>
    <span id="select_message"></span>

    <br />

    <input name="mood" type="radio" value="angry" />Angry
    <input name="mood" type="radio" value="livid" checked="checked" />Livid
    <input name="mood" type="radio" value="hulk" />Hulk Smash!

    <br />

    <select multiple="multiple" id="select2" name="select2">
        <option value="apple">Apple</option>
        <option value="orange" selected="selected">Orange</option>
        <option value="pear">Pear</option>
        <option value="banana">Banana</option>
    </select>

    <br/>

    <input type="submit" value="Submit" />
</form>

</body>
</html>