<!DOCTYPE html>
<html>
<head>
	<title>Basic HTML Form</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>Basic HTML form</h1>
	<form name="basicform" action="form.html" method="post" onsubmit="return validate()">
		<p>Favorite color:</p>
			<select id="color" name="color">
			  <option value=""></option>
			  <option value="red">red</option>
			  <option value="blue">blue</option>
			  <option value="black">black</option>
			  <option value="brown">brown</option>
			</select>
		<p id="error"></p><br />
		<button type="submit" id="submit">Submit</button>
	</form>
</body>
</html>
		function validate() {
			form = document.forms["basicform"]
			document.getElementById("error").innerHTML = ""
			if (form.color.value == "") {
				document.getElementById("error").innerHTML = "Please select a color"
				return false 
			}
			else
			{
				return true
			}
		}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.