sjfricke/Simple_HTML_Form.html

## Simple_HTML_Form.html
<!DOCTYPE html>
<html>
<head>
	<title>Simple HTML Form</title>
	<style>
		body {
			text-align: center;
		}

		#main {
			width: 50%;
			margin-left: 25%;
			border: 1px solid black;
		}

		.myButton {
			color: #fff;
		    background-color: #007bff;
		    border-color: #007bff;
	        user-select: none;
		    border: 1px solid transparent;
		    padding: .375rem .75rem;
		    font-size: 1rem;
		    line-height: 1.5;
		    border-radius: .25rem;
		}

		.myButton:hover{
			cursor: pointer;
		}

	</style>

	<script>
		function submitClick() {
			field1 = document.getElementById("field1").value;
			field2 = document.getElementById("field2").value;
			alert("You sent: " + field1 + " and " + field2 );
		}
	</script>
</head>
<body>

	<div id="header">
		<h1>
			Welcome to this form
			<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gEeDzQzFVjM6QAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAPJSURBVFjDzZfLbxtVFMZ/945fk5eb0ICblCgkEBeaqqKqYjaotAIBpWXTLQv+ABaoEmwoK8oGoYoFfwALFmwqJFpaoFKqig2JqkCUFNRGmCjEVhLnYSd+jD2PyyKtW9sTP8ZZcKRZzGjuPd8959zvfEcopRRN2mwqwUJ6jUQ2Q9rIU7BMAHSfn95QBwNdYV448DTH+web3RLRCEDWLHI9Ps/0yiKakEgh6m7oKIWtHCYiw5wbGafLH/QO4If4HLeXHhDQNLxYybY5PTTGuyPHWgOQM0t89fttMsUCgvZMAeGgzocvn6bTH2gMYNPI88XdW7RQGs3lWgg+PvkGfaGOvQHkzBKfTd0sOy/a1r44D2q+MohPY29XRKICwOfTP7NdLAAQ7XuG9196pWHRNTJHKb758zfub64C0BPU+WTizVoA1+Jz/Jr4G/Hw5FdOXWBxKcn0zD1EFYhQMICuhxrnXynGj4xyKHKQi3euEtR8KODVwVHOPyxMH8COWWSyqtqlEEzP3OO7739x3Xx0+HDTURg81P/4xMDk0gNee3aMbn8QCXAjPu961USd8K9vpJsuvmoLaBo34vO7BwWYWllsObfp7R1s2/ZcG498ytnUMpqQnq7VSmqjbpTqmSYks6kEciGd8lzphUKRfN7wtFYKwUJ6DZnMZtoil9X1Tc9RSGYzyC0j39Y9t22bdGbH09otI4981FLbsfXNNF6Yu2CZSPbJUhveUiF1n39fAGR2cpRKrUVT9/mRvVXdqZpKW6nq1VRtFOrt0RvqwDfQFSaRrWU127KYOHG0ISNWOwv3dOPTZPn96JFRbMu9qw50hRF/rC2rb/+aruQCKRg0BB+cOYcU7ZWJoxy+nrxOIqTAURVd8r0XJ3a74cU7V/HLyl5gFgzWl5M4LnQb7ezmRE+44tvMdob7udrrKDWNg4cH8Fd1T9OxuXLqwm43jEWGmVn7t+IHvx5iIPo81dFXwHhPL8cP9FXqv/Qmue2tGgmnFCjHqQEWiww/bkZnR8YpuZxUOQ6OvfsYpkm2aIBlEdV1TLNU8UR1HSyLbNHAMM3yOjfnJdvm7Mj43oKkZoFjcyn2Fk+FOpvK+4aR4/LUTwSk5ipSnxQk5Qo7P3KMcFB353zANpvXh7Zp7ammw0G97NxVlF6euolTdXeFEKT+WaJoNNf5gqEQ/c8N1XCAFIJL9UTpbvjyfHn3lisIIZvkA0e5Ov/o5Ov0VaXx/zeYPGnX4nM1YrXV0ezM0FhFzj0Npz/G55lqcTiNRYZ5p93hdK/xPJnNsLVP4/l/Vi/3NRVtZZUAAAAASUVORK5CYII=">
		</h1>

	</div>
	<div id="main">
		<br>
		Info <input type="text" placeholder="Info Field 1" id="field1">
		<br><br>
		Info <input type="text" placeholder="Info Field 2" id="field2">
		<br><br>
		<button class="myButton" onclick="submitClick()">Submit</button>
		<br><br>
	</div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Simple HTML Form</title>
	<style>
	body {
	text-align: center;
	}

	#main {
	width: 50%;
	margin-left: 25%;
	border: 1px solid black;
	}

	.myButton {
	color: #fff;
	background-color: #007bff;
	border-color: #007bff;
	user-select: none;
	border: 1px solid transparent;
	padding: .375rem .75rem;
	font-size: 1rem;
	line-height: 1.5;
	border-radius: .25rem;
	}

	.myButton:hover{
	cursor: pointer;
	}

	</style>

	<script>
	function submitClick() {
	field1 = document.getElementById("field1").value;
	field2 = document.getElementById("field2").value;
	alert("You sent: " + field1 + " and " + field2 );
	}
	</script>
	</head>
	<body>

	<div id="header">
	<h1>
	Welcome to this form
	<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gEeDzQzFVjM6QAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAPJSURBVFjDzZfLbxtVFMZ/945fk5eb0ICblCgkEBeaqqKqYjaotAIBpWXTLQv+ABaoEmwoK8oGoYoFfwALFmwqJFpaoFKqig2JqkCUFNRGmCjEVhLnYSd+jD2PyyKtW9sTP8ZZcKRZzGjuPd8959zvfEcopRRN2mwqwUJ6jUQ2Q9rIU7BMAHSfn95QBwNdYV448DTH+web3RLRCEDWLHI9Ps/0yiKakEgh6m7oKIWtHCYiw5wbGafLH/QO4If4HLeXHhDQNLxYybY5PTTGuyPHWgOQM0t89fttMsUCgvZMAeGgzocvn6bTH2gMYNPI88XdW7RQGs3lWgg+PvkGfaGOvQHkzBKfTd0sOy/a1r44D2q+MohPY29XRKICwOfTP7NdLAAQ7XuG9196pWHRNTJHKb758zfub64C0BPU+WTizVoA1+Jz/Jr4G/Hw5FdOXWBxKcn0zD1EFYhQMICuhxrnXynGj4xyKHKQi3euEtR8KODVwVHOPyxMH8COWWSyqtqlEEzP3OO7739x3Xx0+HDTURg81P/4xMDk0gNee3aMbn8QCXAjPu961USd8K9vpJsuvmoLaBo34vO7BwWYWllsObfp7R1s2/ZcG498ytnUMpqQnq7VSmqjbpTqmSYks6kEciGd8lzphUKRfN7wtFYKwUJ6DZnMZtoil9X1Tc9RSGYzyC0j39Y9t22bdGbH09otI4981FLbsfXNNF6Yu2CZSPbJUhveUiF1n39fAGR2cpRKrUVT9/mRvVXdqZpKW6nq1VRtFOrt0RvqwDfQFSaRrWU127KYOHG0ISNWOwv3dOPTZPn96JFRbMu9qw50hRF/rC2rb/+aruQCKRg0BB+cOYcU7ZWJoxy+nrxOIqTAURVd8r0XJ3a74cU7V/HLyl5gFgzWl5M4LnQb7ezmRE+44tvMdob7udrrKDWNg4cH8Fd1T9OxuXLqwm43jEWGmVn7t+IHvx5iIPo81dFXwHhPL8cP9FXqv/Qmue2tGgmnFCjHqQEWiww/bkZnR8YpuZxUOQ6OvfsYpkm2aIBlEdV1TLNU8UR1HSyLbNHAMM3yOjfnJdvm7Mj43oKkZoFjcyn2Fk+FOpvK+4aR4/LUTwSk5ipSnxQk5Qo7P3KMcFB353zANpvXh7Zp7ammw0G97NxVlF6euolTdXeFEKT+WaJoNNf5gqEQ/c8N1XCAFIJL9UTpbvjyfHn3lisIIZvkA0e5Ov/o5Ov0VaXx/zeYPGnX4nM1YrXV0ezM0FhFzj0Npz/G55lqcTiNRYZ5p93hdK/xPJnNsLVP4/l/Vi/3NRVtZZUAAAAASUVORK5CYII=">
	</h1>

	</div>
	<div id="main">
	<br>
	Info <input type="text" placeholder="Info Field 1" id="field1">
	<br><br>
	Info <input type="text" placeholder="Info Field 2" id="field2">
	<br><br>
	<button class="myButton" onclick="submitClick()">Submit</button>
	<br><br>
	</div>
	</body>
	</html>