tutorial: add name attribute to inputs (#5649)

pull/6455/head
Nguyễn Đức Hào 3 years ago committed by GitHub
parent 4b4717b351
commit 0f92863033
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -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>

@ -17,17 +17,17 @@
<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>
@ -35,7 +35,7 @@
{#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}

@ -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}

Loading…
Cancel
Save