JSFiddle - React, Tailwind, and code Playground

HTML

<form action="">
			<label for="input">
				<span>Input sample:</span>
				<input id="input" name="input" required />
			</label>
			<span class="actions">
				<button type="button" id="fillInput">Fill</button>
				<button type="button" id="emptyInput">Empty</button>
				<button type="button" class="check input">Check</button>
			</span>
			<label for="textarea">
				<span>textarea sample:</span>
				<textarea id="textarea" name="textarea" rows="1" required></textarea>
			</label>
			<span class="actions">
				<button type="button" id="fillTextarea">Fill</button>
				<button type="button" id="emptyTextarea">Empty</button>
				<button type="button" class="check textarea">Check</button>
			</span>
			<label for="select">
				<span>Select sample:</span>
				<select id="select" name="select" required></select>
			</label>
			<span class="actions">
				<button type="button" id="fillSelect">Fill</button>
				<button type="button" id="emptySelect">Empty</button>
				<button type="button" class="check select">Check</button>
			</span>
		</form>
		<p><i>Validity.valueMissing</i> for <span class="elementName">selected element</span> is <span class="result">unknown</span></p>

CSS

label {
	display: block;
	float: left;
	font-size: 14px;
	line-height: 1.7em;
	width: 350px;
}

label, p {
	clear: left;
}

label span {
	display: inline-block;
	width: 30%;
}

input, select, textarea {
	width: 65%;
}

.actions {
	float: left;
}

JavaScript

(function (document) {
	"use strict";
	var elements, buttons, updateResult;
	elements = {
		"input": document.getElementById("input"),
		"textarea": document.getElementById("textarea"),
		"select": document.getElementById("select"),
		"containers": {
			"elementName": document.querySelector("span.elementName"),
			"result": document.querySelector("span.result")
		}
	};
	buttons = {
		"fill": {
			"input": document.getElementById("fillInput"),
			"textarea": document.getElementById("fillTextarea"),
			"select": document.getElementById("fillSelect")
		},
		"empty": {
			"input": document.getElementById("emptyInput"),
			"textarea": document.getElementById("emptyTextarea"),
			"select": document.getElementById("emptySelect")
		},
		"check": document.getElementsByClassName("check")
	};
	buttons.fill.input.addEventListener("click", function () {
		elements.input.value = Math.random();
	});
	buttons.fill.textarea.addEventListener("click", function () {
		elements.textarea.innerHTML = Math.random();
	});
	buttons.fill.select.addEventListener("click", function () {
		var option;
		if (elements.select.options.length < 1) {
			option = document.createElement("option");
			option.setAttribute("selected", "");
			option.setAttribute("value", "Valid value");
			option.innerHTML = "Valid value";
			elements.select.appendChild(option);
		}
	});
	buttons.empty.input.addEventListener("click", function () {
		elements.input.value = "";
	});
	buttons.empty.textarea.addEventListener("click", function () {
		elements.textarea.innerHTML = "";
	});
	buttons.empty.select.addEventListener("click", function () {
		if (elements.select.options.length) {
			elements.select.removeChild(elements.select.options[0]);
		}
	});
	updateResult = function () {
		var element, classes;
		classes = this.getAttribute("class").split(" ");
		element = document.getElementById(classes.pop());
		elements.containers.elementName.innerHTML = element.tagName;
		elements.containers.result.innerHTML =...