diff --git a/web/src/App.svelte b/web/src/App.svelte
index b6669c0..4d4f292 100644
--- a/web/src/App.svelte
+++ b/web/src/App.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	export let name: string;
+	export let name: string = "Light Control";
 	import Form from "./Form.svelte";
 
 	function handleOnSubmit() {
-		console.log("Form!");
+		console.log("Submitted");
 	}
 </script>
 
diff --git a/web/src/Form.svelte b/web/src/Form.svelte
index 681a0c1..3a1a34c 100644
--- a/web/src/Form.svelte
+++ b/web/src/Form.svelte
@@ -1,5 +1,6 @@
 <script	lang="ts">
 	import Colors from "./Colors.svelte";
+	import Input from "./Input.svelte";
 
 	let url	= "/api/setcolor";
 	let possiblePatterns = [
@@ -89,7 +90,7 @@
 		{#if fe.type === "colors"}
 			<Colors	bind:value={fe.value}/>
 		{:else}
-			<input type={fe.type} name={fe.name} on:input={(e) => fe.value = e.target.value} />
+			<Input bind:value={fe.value} type={fe.type} />
 		{/if}
 	{/each}
 	<button	type="submit">Submit</button>
diff --git a/web/src/Input.svelte b/web/src/Input.svelte
new file mode 100644
index 0000000..281f8a8
--- /dev/null
+++ b/web/src/Input.svelte
@@ -0,0 +1,8 @@
+<script	lang="ts">
+	export let type;
+	export let value;
+	const setType = (node) => {
+		node.type = type;
+	};
+</script>
+<input use:setType bind:value />