0
0
mirror of https://github.com/sveltejs/svelte.git synced 2024-12-01 17:30:59 +01:00

tutorial: add name attribute to inputs (#5649)

This commit is contained in:
Nguyễn Đức Hào 2021-06-27 00:57:48 +07:00 committed by GitHub
parent 4b4717b351
commit 0f92863033
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 12 additions and 12 deletions

View File

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

View File

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

View File

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