Details Example

Controls Example -- Source Code

HTML Page -- index.htm

<!DOCTYPE html>

<!-- Illustration of common HTML controls -->

<html lang="en">
    <head>
        <link rel="stylesheet" href="styles.css">
        <script src="script.js"></script>
    </head>

<body>
<h2>Controls Example</h2>

    <label for="name">Text Field, Enter Name:</label><br>
    <input type="text" id="name"><br><br>

    <label for="age">Number Field, Enter Age:</label><br>
    <input type="number" id="age" value="0"><br><br>

    <label for="fulltime">CheckBox, Fulltime Student?</label>
    <input type="checkbox" id="fulltime"><br><br>

    <label for="gender">Radio Button, Gender:</label><br>
    <label for="female">Female</label>
    <input type="radio" id="female" name="gender" 
           value="F"> &nbsp;
    <label for="female">Male</label>
    <input type="radio" id="male" name="gender" 
           value="M"><br><br>

    <label for="year">Select Control, Enter Year:</label>
    <select id="year">
        <option value="1">Freshman</option>
        <option value="2">Sophomore</option>
        <option value="3">Junior</option>
        <option value="4">Senior</option>
    </select><br><br>

    <!-- Horizontal Rule -->
    <hr>

    <button id="btn">Get and Display Info</button><br><br>

    <p id="output"></p>
</body>
</html>

CSS Page -- styles.css

/* Controls Example
   Source code file: styles.css
   Illustration of common HTML controls */

* { font-family: Helvetica, Arial, sans-serif; }
body { background-color: #E0E0FF; 
color: #000050; }
input#name { width: 150px; height: 20px; }
input#age { width: 150px; height: 20px; 
      text-align: right; }
input#fulltime,input#female, input#male 
    { width: 20px; height: 20px; }

Script Page -- script.js

// Illustration of common HTML controls

function getAndDisplayInfo( ) {
    'use strict';

    // Obtain objects for controls.
    var txtName = document.getElementById("name");
    var txtAge = document.getElementById("age");
    var chkFullTime = document.getElementById("fulltime");
    var genders = document.getElementsByName("gender");
    var selYear = document.getElementById("year");
    var paraOutput = document.getElementById("output");

    // Get values out of controls:
    var name = txtName.value;
    var age = txtAge.value;
    var fullTime = chkFullTime.checked;
    var gender = genders[0].checked ? 
    genders[0].value : genders[1].value;
    var year = selYear.value;

    // Construct output:
    var output = "Outputs from controls:<br>\n" +
        `Name: ${name}<br> Age: ${age}<br>\n` +
        `FullTime: ${fullTime}<br> Gender: ${gender}<br>\n` +
        `Year: ${year}`;
    paraOutput.innerHTML = output;
}

function init( ) {
    'use strict';
    var button = document.getElementById("btn");
    button.addEventListener("click", getAndDisplayInfo);
}

window.addEventListener("load", init);