DONT ADD ANYTHING HERE!

  1. input elements of type range let the user specify a numeric value which must be no less than a given value, and no more than another given value
  2. The precise value, however, is not considered important
  3. This is typically represented using a slider or dial control rather than a text entry box like the number input type

Example

Browser

Audio Settings
Server Output

Code

html
<form id="form_one">
    <fieldset>
        <legend>Audio Settings</legend>
        <div>

            <input 
                type="range" 
                id="volume" 
                name="param1" 
                min="0" 
                max="100" />

            <label for="volume">Volume</label>

            <output id="out-volume"></output>

        </div>

        <div>

            <input 
                type="range" 
                id="cowbell" 
                name="param2" 
                min="0" 
                max="100" 
                value="90"
                step="10" />

            <label for="cowbell">Cowbell</label>

            <output id="out-cowbell"></output>
        </div>
        <input type="submit" value="submit">
    </fieldset>
    <fieldset>
        <legend>Server Output</legend>
        <div><output id="server-out-volume"></output></div>
        <div><output id="server-out-cowbell"></output></div>
    </fieldset>

</form> 
JavaScript

async function sendData() {

    const formData = new FormData(form_one);

    try {
        const response = await fetch("https://php.tomgdow.com", {
            method: "POST",
            body: formData
        });

        let result = await response.text();
        console.log(result);
        let responseArray = result.split('&');
        document.getElementById('server-out-volume').value = responseArray[0];
        document.getElementById('server-out-cowbell').value = responseArray[1];

    } catch (e) {
        console.error(e);
    }
}

document.getElementById('form_one').addEventListener('submit', function (event) {

    event.preventDefault();

    sendData();

});

document.getElementById('out-volume').value = document.getElementById('volume').value
document.getElementById('out-cowbell').value = document.getElementById('cowbell').value

document.getElementById('volume').addEventListener('input', function () {
    document.getElementById('out-volume').value = this.value;
})
document.getElementById('cowbell').addEventListener('input', function () {
    document.getElementById('out-cowbell').value = this.value;
})

                                
php (server)
// index.php (server)

<?php
  echo  
     htmlspecialchars($_POST["param1"])."&"
     .htmlspecialchars($_POST["param2"])."&"
     .htmlspecialchars($_SERVER['HTTP_HOST']);
?>

Notes

Mnemonic

References