JSFiddle - React, Tailwind, and code Playground

by Peter

HTML

<form id="test-form" method="POST">
    <div class="form-group">
        <label for="TextInput">Test Text Input</label>
        <input id="TextInput" name="TextInput" placeholder="Enter text..." required type="text" />
    </div>

    <div class="form-group">
        <label for="NumberInput">Test Number Input</label>
        <input id="NumberInput" max="100" min="0" name="NumberInput"  required type="number" value="102" />
    </div>
    
    <input type="submit" value="Submit" />
</form>

CSS

.form-group {
    margin: 1em 0;
}

.form-group label {
    display: inline-block;
    font-family: Helvetica, Arial, Sans-Serif;
    font-size: 0.85em;
    margin-right: 1em;
    min-width: 10em;
}

JavaScript

(function() {
    var testForm = document.getElementById('test-form');
    
    if (testForm && 'addEventListener' in testForm) {
        testForm.addEventListener('submit', submitHandler);
    }
})()

function submitHandler (event) {
    var eventForm = this;
    
    var resultParagraph = document.createElement('p');
    resultParagraph.className = 'result-paragraph';
    
    var textInput = document.getElementById('TextInput'), numberInput = document.getElementById('NumberInput'), resultString;
    
    if (textInput) {
        resultString = 'Text value is "' + textInput.value + '". ';
    }
    
    if (numberInput) {
        resultString += 'Number value is "' + numberInput.value + '".'
    }
    
    if (resultString) {
        resultParagraph.textContent = resultString;
        eventForm.appendChild(resultParagraph);
    } else { 
        alert('Error getting form values');
    }
    
    event.preventDefault();
}