feat(client): ✨ refactor settings and controls forms and update attributes to fit expected datas

client/index.html

@@ -18,29 +18,43 @@
 			adresse IP ainsi que lui indiquer la distance à parcourir ou l'angle
 			de rotation désiré.
 		</p>
-		<form id="form">
-			<label for="ip">Adresse IP du robot</label>
+		<form class="settings">
+			<label>
+				<span>Adresse IP du robot</span>
 				<input
 					type="text"
-				id="ip"
+					title="Adresse IP du robot (ex: 192.168.0.1)"
+					pattern="\d+\.\d+\.\d+\.\d+"
 					placeholder="192.168.0.0"
-				oninput="storeInput()"
-			/><br />
-			<label for="valueRot">Rotation en degrés</label>
-			<input
-				type="text"
-				id="valueRot"
-				placeholder="90"
-				oninput="storeInput()"
-			/><br />
-			<label for="valueLength">Longueur en cm</label>
-			<input
-				type="text"
-				id="valueLength"
-				placeholder="10"
-				oninput="storeInput()"
+					required
 				/>
+			</label>
+			<button>Se connecter</button>
 		</form>
+		<div class="controls">
+			<label>
+				<span>Rotation en degrés</span>
+				<input
+					type="number"
+					title="Rotation en degrés (0° - 360°)"
+					min="0"
+					max="360"
+					step="1"
+					placeholder="90"
+				/>
+			</label>
+			<label for="valueLength">
+				<span>Longueur en cm</span>
+				<input
+					type="number"
+					title="Longueur en cm (0 - 2^31)"
+					min="-2147483647"
+					step="1"
+					max="2147483647"
+					placeholder="10"
+				/>
+			</label>
+		</div>
 		<h2>Contrôle</h2>
 		<p>
 			Amusez vous ! Pour contrôler le robot, utilisez les flèches