tutorial: add name attribute to inputs (sveltejs#5649)

hbirler · Jun 26, 2021 · 0f92863 · 0f92863
1 parent 4b4717b
commit 0f92863
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 12 deletions.
diff --git a/site/content/tutorial/06-bindings/04-group-inputs/app-a/App.svelte b/site/content/tutorial/06-bindings/04-group-inputs/app-a/App.svelte
@@ -11,34 +11,34 @@
 <h2>Size</h2>
 
 <label>
-	<input type=radio group={scoops} value={1}>
+	<input type=radio group={scoops} name="scoops" value={1}>
 	One scoop
 </label>
 
 <label>
-	<input type=radio group={scoops} value={2}>
+	<input type=radio group={scoops} name="scoops" value={2}>
 	Two scoops
 </label>
 
 <label>
-	<input type=radio group={scoops} value={3}>
+	<input type=radio group={scoops} name="scoops" value={3}>
 	Three scoops
 </label>
 
 <h2>Flavours</h2>
 
 <label>
-	<input type=checkbox group={flavours} value="Cookies and cream">
+	<input type=checkbox group={flavours} name="flavours" value="Cookies and cream">
 	Cookies and cream
 </label>
 
 <label>
-	<input type=checkbox group={flavours} value="Mint choc chip">
+	<input type=checkbox group={flavours} name="flavours" value="Mint choc chip">
 	Mint choc chip
 </label>
 
 <label>
-	<input type=checkbox group={flavours} value="Raspberry ripple">
+	<input type=checkbox group={flavours} name="flavours" value="Raspberry ripple">
 	Raspberry ripple
 </label>
 

diff --git a/site/content/tutorial/06-bindings/04-group-inputs/app-b/App.svelte b/site/content/tutorial/06-bindings/04-group-inputs/app-b/App.svelte
@@ -17,25 +17,25 @@
 <h2>Size</h2>
 
 <label>
-	<input type=radio bind:group={scoops} value={1}>
+	<input type=radio bind:group={scoops} name="scoops" value={1}>
 	One scoop
 </label>
 
 <label>
-	<input type=radio bind:group={scoops} value={2}>
+	<input type=radio bind:group={scoops} name="scoops" value={2}>
 	Two scoops
 </label>
 
 <label>
-	<input type=radio bind:group={scoops} value={3}>
+	<input type=radio bind:group={scoops} name="scoops" value={3}>
 	Three scoops
 </label>
 
 <h2>Flavours</h2>
 
 {#each menu as flavour}
 	<label>
-		<input type=checkbox bind:group={flavours} value={flavour}>
+		<input type=checkbox bind:group={flavours} name="flavours" value={flavour}>
 		{flavour}
 	</label>
 {/each}

diff --git a/site/content/tutorial/06-bindings/04-group-inputs/text.md b/site/content/tutorial/06-bindings/04-group-inputs/text.md
@@ -7,7 +7,7 @@ If you have multiple inputs relating to the same value, you can use `bind:group`
 Add `bind:group` to each input:
 
 ```html
-<input type=radio bind:group={scoops} value={1}>
+<input type=radio bind:group={scoops} name="scoops" value={1}>
 ```
 
 In this case, we could make the code simpler by moving the checkbox inputs into an `each` block. First, add a `menu` variable to the `<script>` block...
@@ -27,7 +27,7 @@ let menu = [
 
 {#each menu as flavour}
 	<label>
-		<input type=checkbox bind:group={flavours} value={flavour}>
+		<input type=checkbox bind:group={flavours} name="flavours" value={flavour}>
 		{flavour}
 	</label>
 {/each}