<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
<style>
body {
    font-family: 'lekton';
    line-height: 1.4;
    padding: 2em;
}

table {
    width: 100%;
	border-collapse: collapse;
}

table td {
	padding: 0.2em 0.5em;
}

input {
    width: 100%;
    font-size: 1em;
    font-family: lekton;
    border: 0;
    border-bottom: 1px solid #c3ba63;
    padding: 0.5em;
    font-weight: bold;
}

input:focus {
    outline: 0;
    background: #fff7ae;
}

tr:hover {
    background: #f5f9ff;
}
</style>
</head>
<body>
	<h1>VinylSearch</h1>

	<p><input placeholder="Search"></p>

	<div id="output"></div>

	<script id="template" type="x-tmpl-mustache">
		<table>
		{{ #results }}
			<tr>
				<td>{{ artist }}</td>
				<td>{{ album }}</td>
			</tr>
		{{ /results }}
		</table>
	</script>

	<script src="mustache.min.js"></script>
	<script src="app.js"></script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
<style>
body {
    font-family: 'lekton';
    line-height: 1.4;
    padding: 2em;
}

table {
    width: 100%;
	border-collapse: collapse;
}

table td {
	padding: 0.2em 0.5em;
}

input {
    width: 100%;
    font-size: 1em;
    font-family: lekton;
    border: 0;
    border-bottom: 1px solid #c3ba63;
    padding: 0.5em;
    font-weight: bold;
}

input:focus {
    outline: 0;
    background: #fff7ae;
}

tr:hover {
    background: #f5f9ff;
}
</style>
</head>
<body>
	<h1>VinylSearch</h1>

	<p><input placeholder="Search" type="search"></p>

	<div id="output"></div>

	<script id="template" type="x-tmpl-mustache">
		<table>
		{{ #results }}
			<tr>
				<td>{{ artist }}</td>
				<td>{{ album }}</td>
			</tr>
		{{ /results }}
		</table>
	</script>

	<script src="mustache.min.js"></script>
	<script src="app.js"></script>
</body>
</html>

Use `search` input type for search field
Use `search` input type for search field
