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:
parent
4b4717b351
commit
0f92863033
@ -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…
Reference in New Issue
Block a user