//INPUT: Text input

<New code>

//INPUT HTML: <input id="inputID" type="text" value="default text">
— displays a text input line:

//INPUT HTML: <textarea id="inputID" rows="2" cols="30">
— displays a text input box:

//INPUT JS: document.getElementById("inputID").value
— returns the text entered inside #inputID

//INPUT JS: document.getElementById("inputID").onchange = mainProcedure;
— triggers mainProcedure() on tab and enter after an input change

Two ways to input text strings

There are a couple of ways to enter text into a web page.

For short strings, use an input line

<input id="inputID" type="text" value="default text">
displays:

For long strings, use a textarea box

<textarea id="inputID" rows="4" cols="50">
displays:

Using Javascript to read text strings

You can program scripts to read the text that your users have entered.

The entered text in stored inside document.getElementById("inputID").value

Using onchange to trigger functions when text is editted

Remember how you can use onclick to trigger a function when something is clicked?

Well, if you add onchange to an input element, you can trigger a function whenever someone presses tab or enter after changing a text input.

For example: document.getElementById("inputID").onchange = mainProcedure;

However, most users have come to expect a button to trigger things as well. Use both a button and onchange when possible.

Example code

...is the result of the following code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    
    <body>
        <h1>Displaying and reading text input</h1>
        <p>
            Type something into #inputLineID:
            <input id="inputLineID" type="text" value="Hello!"><br>
            
            <button id="inputLineButtonID">
                pop up <code>document.getElementById("inputLineID").value</code> 
            </button><br>
            <br>
            
            Type something into #inputBoxID:<br>
            <textarea id="inputBoxID" rows="5" cols="40">Bonjour!</textarea><br>

            <button id="inputBoxButtonID">
                pop up <code>document.getElementById("inputBoxID").value</code> 
            </button>
        </p>
        
        <script>
            //INPUT-OUTPUT: read in the input line
            var showInputLine = function (){
                alert(
                    document.getElementById("inputLineID").value
                );
            }
            
            //INPUT-OUTPUT: read in the input box
            var showInputBox = function (){
                alert(
                    document.getElementById("inputBoxID").value
                );
            }
            
            //INPUT: attach showInputLine to inputLineID
            document.getElementById('inputLineID').onchange         = showInputLine;
            //INPUT: attach showInputLine to inputLineButtonID
            document.getElementById('inputLineButtonID').onclick    = showInputLine;
            
            //INPUT: attach showInputBox to inputBoxID
            document.getElementById('inputBoxID').onchange      = showInputBox;         
            //INPUT: attach showInputBox to inputBoxButtonID
            document.getElementById('inputBoxButtonID').onclick = showInputBox;         
        </script>
    </body>
</html>