input > text, number, range, checkbox

망나니서·2022년 12월 31일
0

svelte

목록 보기
9/10
<script>
	// text
	let your_name = 'svelte';
	// number, range
	let a = 10;
	let b = 20;
	// checkbox
	let yes = false;
</script>

<input bind:value="{your_name}">
<h1>
	Hello {your_name}!
</h1>

<label>
	<input type="number" bind:value="{a}" min="0" max="100">
	<input type="range" bind:value="{a}" min="0" max="100">
</label>

<label>
	<input type="number" bind:value="{b}" min="0" max="100">
	<input type="range" bind:value="{b}" min="0" max="100">
</label>

<p>
	{a} + {b} = {a + b}
</p>

<label>
	<input type="checkbox" bind:checked="{yes}">
	저는 로봇이 아닙니다.
</label>

{#if yes}
	<p>
		사람입니다.
</p>
{:else}
<p>
	로봇입니다.
</p>
{/if}

<button disabled="{!yes}">
	저장하기
</button>
profile
개발자입니다.

0개의 댓글