TIL 05. Form ํƒœ๊ทธ - Radio & CheckBox

wonderchipยท2021๋…„ 6์›” 5์ผ
1

HTML

๋ชฉ๋ก ๋ณด๊ธฐ
5/10

์˜ค๋Š˜์€ form๊ณผ ๊ด€๋ จ๋œ radio์™€ checkbox ๋ฒ„ํŠผ์— ๋Œ€ํ•ด ์‚ดํŽด๋ณด์•˜์Šต๋‹ˆ๋‹ค ๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป

Radio ๋ฒ„ํŠผ

<input type="radio" />

์—ฌ๋Ÿฌ๊ฐ€์ง€ ํ•ญ๋ชฉ ์ค‘ ๋‹จ ํ•˜๋‚˜๋งŒ ์„ ํƒํ•  ์ˆ˜ ์žˆ๋Š” ์ธํ„ฐํŽ˜์ด์Šค(interface)๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

ex .

<input type="radio" name="like" value="liked" id="liked" />
<label for="liked">์ข‹์•„์š”</label>

<input type="radio" name="like" value="disliked" id="disliked" />
<label for="like">์‹ซ์–ด์š”</label>

์œ„ ์˜ˆ์‹œ ์ฝ”๋“œ์—์„œ input ํƒœ๊ทธ ๋‚ด, name์ด๋ผ๋Š” ์†์„ฑ์€ <input type="radio" /> ๊ฐ€ name๊ณผ ์„œ๋กœ ์—ฐ๊ด€์ด ๋˜์–ด ์žˆ๊ตฌ๋‚˜๋ฅผ ์•Œ๋ ค์ฃผ๊ธฐ ์œ„ํ•ด์„œ, ๊ฐ™์€ ๊ฐ’์„ ์ ์–ด์•ผ ํ•œ๋‹ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.
๋˜ํ•œ value ๋ผ๋Š” ์†์„ฑ์€ ์–ด๋–ค ํ•˜๋‚˜์˜ ํ•ญ๋ชฉ(ํ† ๊ธ€ : ํ•˜๋‚˜์˜ ์„ค์ •๊ฐ’์œผ๋กœ ๋ถ€ํ„ฐ, ๋‹ค๋ฅธ ๊ฐ’์„ ์ „ํ™˜ ํ•˜๋Š” ๊ฒƒ)์ด ์„ ํƒ์ด ๋˜์–ด ์„œ๋ฒ„์— ์ „๋‹ฌ์ด ๋  ๋•Œ, ์–ด๋–ค ํ•ญ๋ชฉ์ด ์„ ํƒ๋˜์—ˆ๋Š”์ง€ ๊ตฌ๋ถ„์„ ์ฃผ๊ธฐ ์œ„ํ•ด ๊ฐ๊ธฐ ๋‹ค๋ฅธ ๊ฐ’์„ value์— ์ ์–ด์ค˜์•ผ ํ•ฉ๋‹ˆ๋‹ค.

CheckBox ๋ฒ„ํŠผ

<input type="checkbox" />

์—ฌ๋Ÿฌ ๊ฐ€์ง€ ํ•ญ๋ชฉ ์ค‘ ๋‹ค์ค‘์œผ๋กœ ์„ ํƒ ํ•  ์ˆ˜ ์žˆ๋Š” ์ธํ„ฐํŽ˜์ด์Šค(interface)๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

์—ฌ๊ธฐ์„œ ์ธํ„ฐํŽ˜์ด์Šค(interface)๋ž€,
์„œ๋กœ ๋‹ค๋ฅธ ๋‘ ๊ฐœ์˜ ์‹œ์Šคํ…œ, ์žฅ์น˜ ์‚ฌ์ด์—์„œ ์ •๋ณด๋‚˜ ์‹ ํ˜ธ๋ฅผ ์ฃผ๊ณ  ๋ฐ›๋Š” ๊ฒฝ์šฐ. ์ ‘์ ์ด๋‚˜ ๊ฒฝ๊ณ„๋ฉด์„ ๋งํ•ฉ๋‹ˆ๋‹ค.
์ด๋Š” ์ฆ‰, ์‚ฌ์šฉ์ž๊ฐ€ ๊ธฐ๊ธฐ๋ฅผ ์‰ฝ๊ฒŒ ๋™์ž‘์‹œํ‚ค๋Š” ๋ฐ ๋„์›€์„ ์ฃผ๋Š” ์‹œ์Šคํ…œ์„ ๋งํ•˜๋Š” ๊ฒƒ์ด์ฃ .

ex .

<form action="" method="GET">
<input type="checkbox" name="skills" value="html" id="html" />
<label id="html">HTML</label>
<input type="checkbox" name="skills" value="css" id="css" />
<label id="css">CSS</label>
<input type="checkbox" name="skills" value="javascript" id="javascript" />
<label id="javascript">Javascript</label>
</form>

<input type="checkbox" /> ์ž‘์„ฑ ์‹œ, name๊ณผ value ์†์„ฑ์€ ๋ฐ˜๋“œ์‹œ ์ž‘์„ฑํ•ด์ฃผ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์œ„ ๊ธ€์€ ๊น€๋ฒ„๊ทธ์˜ HTML&CSS๋Š” ์žฌ๋ฐŒ๋‹ค ๋ฅผ ์ฐธ๊ณ ํ•˜์—ฌ ์ž‘์„ฑํ•˜์˜€์Šต๋‹ˆ๋‹ค. ๐Ÿ™‚

profile
๊ฑฐ์ฐฝํ•œ ๊ฒƒ๋ณด๋‹ค ๊พธ์ค€ํžˆ ๊ทธ๋ฆฌ๊ณ  ์—ด์‹ฌํžˆ.

0๊ฐœ์˜ ๋Œ“๊ธ€