view: Replace HTML form labels by placeholders

This takes up way less space in the code and the actual user view.

1 files changed, 6 insertions, 12 deletions

diff --git a/view/html/recipe-edit.html b/view/html/recipe-edit.html
index 8d940f8..bad8d60 100644
--- a/view/html/recipe-edit.html
+++ b/view/html/recipe-edit.html
@@ -12,29 +12,24 @@
 				<input type="hidden" name="id" value="{{.Id}}">
 
 				<p>
-					<label>Title</label>
-					<input type="text" name="title" value="{{.Title}}" required>
+					<input type="text" name="title" value="{{.Title}}" placeholder="Title" required>
 				</p>
 
 				<p>
-					<label>Portions</label>
-					<input type="number" name="portions" value="{{.Portions}}">
+					<input type="number" name="portions" value="{{.Portions}}" placeholder="Portions">
 				</p>
 
 				<p>
-					<label>URL</label>
-					<input type="text" name="url" value="{{.Url}}">
+					<input type="text" name="url" value="{{.Url}}" placeholder="URL">
 				</p>
 
 				<p>
-					<label>Notes</label>
-					<textarea name="notes" rows="4" cols="50">{{.Notes}}</textarea>
+					<textarea name="notes" rows="4" cols="50" placeholder="Notes">{{.Notes}}</textarea>
 				</p>
 
 				<div id="steps">{{range .Steps}}
 					<section>
-						<label>Text</label>
-						<textarea rows="4" cols="50">{{.Text}}</textarea>
+						<textarea rows="4" cols="50" placeholder="Step description">{{.Text}}</textarea>
 						<button type="button" onclick="parentNode.remove();">remove</button>
 					</section>{{end}}
 				</div>
@@ -91,8 +86,7 @@
 			function addNewStep() {
 				var newStep = document.createElement("section");
 				newStep.innerHTML = `
-					<label>Text</label>
-					<textarea rows="4" cols="50"></textarea>
+					<textarea rows="4" cols="50" placeholder="Step description"></textarea>
 					<button type="button" onclick="parentNode.remove();">remove</button>
 				`;