[CodeLion] 03. HTML (Forms) ๐Ÿฆ

โ˜€๏ธ Forms

1. <form>์˜ ๊ธฐ๋ณธ ์†์„ฑ

form ์ด๋ž€ ์ •๋ณด๋ฅผ ์ž…๋ ฅํ•˜๋Š” ์˜์—ญ.

1-1. form ๋™์ž‘๋ฐฉ์‹

  1. ์›น ํŽ˜์ด์ง€์— ์žˆ๋Š” form ์— data ์ž…๋ ฅ
  2. ์›น ํŽ˜์ด์ง€ ๋‚ด action์ด ์ผ์–ด๋‚˜๋ฉด ๋ฐ์ดํ„ฐ๋Š” ์›น ์„œ๋ฒ„๋กœ ์ด๋™
  3. ์›น ์„œ๋ฒ„๋Š” data๋ฅผ ์ฒ˜๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด APP ํ˜ธ์ถœ . ์ด๋•Œ APP์€ ๋ฌผ๋ฆฌ์ ์œผ๋กœ ๋ณ„๋„์˜ ์„œ๋ฒ„์ผ ์ˆ˜๋„ ์žˆ์Œ
  4. ํ•„์š”์— ๋”ฐ๋ผ APP์€ DB๋กœ data๋ฅผ ์ •์†ก. ์ด๋•Œ DB๋Š” ๋ฌผ๋ฆฌ์ ์œผ๋กœ ๋ณ„๋„์˜ ์„œ๋ฒ„์ผ ์ˆ˜ ์žˆ์Œ
  5. DB์—์„œ CRUD ์ž‘์—…์ด ์ผ์–ด๋‚˜๊ณ  ์ž‘์—…๊ฒฐ๊ณผ๋ฅผ APP์œผ๋กœ, WEB์œผ๋กœ ์ „์†ก
  6. ์›น์„œ๋ฒ„๋Š” ๋ฐ›์€ ๊ฒฐ๊ณผ๋ฅผ ํด๋ผ์ด์–ธํŠธ ๋ธŒ๋ผ์šฐ์ €์— ์ „์†ก
  7. ์‚ฌ์šฉ์ž ๋ธŒ๋ผ์šฐ์ €๋Š” Response ๋ฐ›์€ ํŽ˜์ด์ง€๋ฅผ ๋ Œ๋”๋งํ•˜์—ฌ ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ณด์—ฌ์ค€๋‹ค.

๊ฐ„๋‹จํžˆ ๋งํ•˜๋ฉด!
form ์— ์ž…๋ ฅ -> submit ํ•˜๋ฉด ๋ฐ์ดํ„ฐ๋Š” ์„œ๋ฒ„๋กœ ์ „์†ก๋จ -> ์ „์†กํ•œ ๋ฐ์ดํ„ฐ๋Š” ์›น ์„œ๋ฒ„๊ฐ€ ์ฒ˜๋ฆฌ -> ์ฒ˜๋ฆฌ ํ›„ ๊ฒฐ๊ณผํ™”๋ฉด๊ฐ™์€ ๋‹ค๋ฅธ ์›นํŽ˜์ด์ง€๋ฅผ ํด๋ผ์ด์–ธํŠธ์— ์ „์†ก

๐Ÿคš ์ž ๊น ! CRUD ๋ž€?

: ๋Œ€๋ถ€๋ถ„์˜ ์ปดํ“จํ„ฐ ์†Œํ”„ํŠธ์›จ์–ด๊ฐ€ ๊ฐ€์ง€๋Š” ๊ธฐ๋ณธ์ ์ธ ๋ฐ์ดํ„ฐ ์ฒ˜๋ฆฌ ๊ธฐ๋Šฅ์„ ์ผ์ปซ๋Š” ๋ง
๋ณดํ†ต ๋ฐฑ์—”๋“œ ๊ฐœ๋ฐœ์ž๋“ค์ด ๋ฐ์ดํ„ฐ ๋‹ค๋ฃฐ๋•Œ ์‚ฌ์šฉ

์ด๋ฆ„ : ์กฐ์ž‘ : SQL ์ˆœ

  • Create : ์ƒ์„ฑ : Insert
  • Read : ์ฝ๊ธฐ : Select
  • Update : ๊ฐฑ์‹  : Update
  • Delete : ์‚ญ์ œ : Delete

์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค๊ฐ€ ๊ฐ–์ถฐ์•ผํ•  ๊ธฐ๋Šฅ์„ ๊ฐ€๋ฅดํ‚ค๋Š” ์šฉ์–ด๋กœ๋„ ์‚ฌ์šฉ

2. form ์†์„ฑ

2-1. action

: ์ž…๋ ฅ๊ฐ’์„ ์ „์†กํ•  ํŽ˜์ด์ง€

2-2. Method

: ํผ์˜ ๋ฐ์ดํ„ฐ๋ฅผ ์ „์†กํ•  ๋ฐฉ๋ฒ• ์ •์˜

โญ๏ธ GET & POST

  • method ="get" ์ •๋ณด๊ฐ’์ด ์šฐ๋ฆฌ ๋ˆˆ์— ๋ณด์ž„

    • ์›น์„œ๋ฒ„์— ๋ฐ์ดํ„ฐ๋ฅผ ์š”์ฒญํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋ฉฐ, ์ฃผ์†Œ์— ๋ฐ์ดํ„ฐ๋ฅผ ์ž…๋ ฅํ•˜๋Š” ๋ฐฉ์‹
    • ์ฆ‰, url๋กœ์„œ ์š”์ฒญ์„ ๋ณด๋‚ธ๋‹ค.
    • ๋‹ด์•„๊ฐˆ ์ •๋ณด์˜ ์–‘์ด ๋ฐฉ๋Œ€ํ• ๊ฒฝ์šฐ ์ง€์–‘.

      ์†Œ๋ฆฌ์ณ์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๋งํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•ด๋ณด๋ฉด , ๋‚ด๊ฐ€ ์ €์ชฝ์— ์žˆ๋Š” ์นœ๊ตฌํ•œํ…Œ ๋‚˜๋Š” ์ด์ˆ˜๋นˆ์ด๊ณ ! ๋ฐฐ๊ณ ํŒŒ! ์†Œ๋ฆฌ์ง€๋ฅด๋ฉด ๋ชฉ์•„ํ”„๊ณ  ,, ๋‹ค ๋“ค๋ฆด๊ฑฐ๊ณ  ,, ์กฐ๊ธˆ์˜ ์ •๋ณด๋ฐ–์— ์ฃผ์ง€ ๋ชปํ•œ๋‹ค. ๋ผ๊ณ  ์ƒ๊ฐํ•˜๋ฉด ์ดํ•ด ์™์™

  • method ="post" ๋กœ ํ•˜๋ฉด ๋ˆˆ์— ๋ณด์ด์ง€ ์•Š์Œ

    • ๋…ธ์ถœ๋˜๋ฉด ์•ˆ๋˜๋Š” ๋‚ด์šฉ๋“ค์„ post๋กœ ์ฒ˜๋ฆฌํ•ด์ค€๋‹ค
    • ํŒŒ์ผ์„ ์˜ฌ๋ฆฌ๊ฑฐ๋‚˜, ๋ณด์•ˆ์ด ์น ์š”ํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ์ „์†กํ•  ๋•Œ ์‚ฌ์šฉ๋จ
    • ์ฃผ์†Œ์— ์ž…๋ ฅ ๋‚ด์šฉ์ด ๋‚˜ํƒ€๋‚˜์ง€ ์•Š๊ฒŒ ํ•œ๋‹ค (url์ด ์•„๋‹Œ body ๊ฐ’์œผ๋กœ ๋ณด๋‚ธ๋‹ค.)
    • CRUD ์œ ์ €์˜ ์•„์ด๋””๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๊ณณ ์œผ๋กœ ๋ณด๋‚ด๋Š” ๊ฒƒ
    • ๊ฒŒ์‹œ๋ฌผ ์ƒ์„ฑ์€ ๋Œ€๋ถ€๋ถ„ post ๋กœ ์ฒ˜๋ฆฌํ•˜๋Š” ํŽธ
    • ๋ฐฉ๋Œ€ํ•œ ์–‘ ๋‹ค๋ฃฐ ์ˆ˜ ์žˆ์Œ

      ํฌ์ŠคํŠธ์ž‡์œผ๋กœ ์ •๋ณด๋ฅผ ์นœ๊ตฌ์—๊ฒŒ ์ „๋‹ฌํ•ด์ฃผ๋ฉด ๋งŽ์€ ๋‚ด์šฉ์„ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ๊ณ , ์‹œํฌ๋ฆฟํ•˜๊ฒŒ ์ค„ ์ˆ˜ ์žˆ๋‹ค! ์ด๋ ‡๊ฒŒ ์ƒ๊ฐํ•ด๋ณด๋ฉด ์ดํ•ด์™์™

๋‘˜์˜ ์ฐจ์ด์  ?
: Url ์— ์ž…๋ ฅ๊ฐ’ ์ •๋ณด๊ฐ€ ๋œจ๋Š”์ง€ ์•ˆ๋œจ๋Š”์ง€๊ฐ€ ๋‹ค๋ฆ„!

 <form action="./013_form์˜_์›๋ฆฌ.html" method="post">
    <input type="text" name="userId">
    <input type="password" name="userPw">
    <button type="submit">Login</button>
  </form>

๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๋ฉด ์‚ฌ์šฉ์ž๊ฐ€ ์ž…๋ ฅํ•œ ์ •๋ณด(์•„์ด๋””,ํŒจ์Šค์›Œ๋“œ ๋“ฑ)๋ฅผ action์— ์žˆ๋Š” ๊ณณ์— ์ •๋ณด๋ฅผ ๋ณด๋‚ธ๋‹ค.

3. input ์†์„ฑ๊ณผ type

3-1. ์†์„ฑ

  • type : text, radio ๋“ฑ
  • readonly : ์ฝ๊ธฐ์ „์šฉ ์„ค์ •
  • maxlength : ์ตœ๋Œ€ ๊ธ€์ž ์ˆ˜ ์ง€์ •
  • minlength : ์ตœ์†Œ ๊ธ€์ž ์ˆ˜ ์ง€์ •
  • required : ํ•„์ˆ˜ ํƒœ๊ทธ๋กœ ์ง€์ •. ์ž…๋ ฅํ•˜์ง€ ์•Š์œผ๋ฉด ์—๋Ÿฌ๊ฐ€ ๋œฌ๋‹ค
  • autofocus : ํŽ˜์ด์ง€ ๋กœ๋”ฉ์‹œ ์ด ์†์„ฑ์„ ์ง€์ •ํ•œ ํƒœ๊ทธ๋กœ ํฌ์ปค์Šค๊ฐ€ ๋ฐ”๋€œ
  • placeholder : ์ž…๋ ฅ๊ฐ’์— ๋Œ€ํ•œ ํžŒํŠธ
  • name : ํ•„์ˆ˜์ ์œผ๋กœ ์žˆ์–ด์•ผ ํ•จ (์„œ๋ฒ„๋กœ ๋ณด๋‚ด์•ผํ•˜๋Š” key), ๊ฒน์น˜๊ฒŒ ์•ˆํ•˜๋Š”๊ฒŒ ์ข‹๋‹ค ( ๋ฐฑ์—”๋“œ์— ๋ณด๋‚ผ ์ •๋ณด์ด๊ธฐ ๋•Œ๋ฌธ์— ๋ฐฑ์—”๋“œ๋ถ„๊ณผ ์‚ฌ์ „์— ์–ด๋–ป๊ฒŒ ํ• ์ง€ ํ‚ค๊ฐ’์„ ์•ฝ์†ํ•จ)
  • value : ๋ณด๋‚ผ ์ •๋ณด, ๋ฐ์ดํ„ฐ

3-2. type

type์˜ ์ข…๋ฅ˜๋Š” ์ด๋Ÿฌํ•˜๋‹ค. ๊ฒ๋‚˜ ๋งŽ์Œ!
๊ทผ๋ฐ ์™œ ์“ฐ๋Š”๊ฑด์ง€?
-> ๋ˆŒ๋ €์„ ๋•Œ ๋‚˜์˜ค๋Š” ๊ฐ€์ƒ ํ‚ค๋ณด๋“œ๊ฐ€ ๋‹ฌ๋ผ์ง„๋‹ค. ์ฆ‰ ์ž…๋ ฅ์–‘์‹์ด ๋‹ฌ๋ผ์ง„๋‹ค!

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>form</title>
    </head>
    <body>
        <input type="text"><br>
        <input type="tel"><br>
        <input type="password"><br>
        <input type="date"><br>
        <input type="time"><br>
        <input type="range"><br>
        <input type="color"><br>
        <input type="radio"><br> ์„ ํƒํ•ญ๋ชฉ ์ค‘ ํ•˜๋‚˜๋งŒ ์„ ํƒํ•  ์ˆ˜ ์žˆ์Œ
        <input type="checkbox"><br> ์—ฌ๋Ÿฌ๊ฐœ ์„ ํƒ๊ฐ€๋Šฅ
        <input type="file"><br>
        <textarea name="name" rows="8" cols="80"></textarea>
    </body>
</html>

3-3. label

input ์—๋Š” ๋ฐ˜๋“œ์‹œ label ๊ฐ’ ์ค˜์•ผํ•จ!
๋‘๊ฐ€์ง€ ์‚ฌ์šฉ๋ฒ•
1. label ์•ˆ์— ์ธํ’‹
์„ค๋ช…๊ณผ ํผ ์ž…๋ ฅ ๋ชจ๋‘๋ฅผ ํฌํ•จํ•˜๋Š” ๋ฐฉ์‹
2. label ๊ณผ input ๋ถ„๋ฆฌ
ํผ ์ž…๋ ฅ์—์„œ ๋ถ„ใ…ฃํ•˜์—ฌ for ์†์„ฑ์„ ์ด์šฉํ•ด ๋ ˆ์ด๋ธ” ์ง€์ •

4. <select> & <option>

select Dropdown ๋ฆฌ์ŠคํŠธ ๋ฐ•์Šค ์ƒ์„ฑ
option ๋ณด๊ธฐ, ์˜ต์…˜
valur ๊ฐ’ ๋ฌด์กฐ๊ฑด ๋„ฃ์–ด์ค˜์•ผํ•จ - post๋กœ ๋ณด๋‚ผ ์ •๋ณด

<form action="">
  <label for="myDevice">ํ˜„์žฌ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋Š” ์Šค๋งˆํŠธํฐ์˜ ์ œ์กฐ์‚ฌ๋ฅผ ์„ ํƒํ•ด์ฃผ์„ธ์š”</label>
  <select name="device" id="myDevice" multiple>
  <!--์›๋ž˜๋Š” multiple="multiple"์ธ๋ฐ ๋‘ ๊ฐ’์ด ๊ฐ™์„ ๋• ํ•œ๋ฒˆ๋งŒ ์ ์–ด๋„ ์ ์šฉ๋œ๋‹ค-->
    <option value="iphone">์•„์ดํฐ</option>
    <option value="galaxy">๊ฐค๋Ÿญ์‹œํฐ</option>
    <option value="ใ…œใ…œ">LGํฐ</option>
  </select>
</form>
4-1. select ์†์„ฑ
  • multiple : ์—ฌ๋Ÿฌ๊ฐœ์˜ ์˜ต์…˜ ์„ ํƒ ๊ฐ€๋Šฅ (์œ ์ €๊ฐ€ cmd ๋ˆ„๋ฅด๊ณ  ์„ ํƒํ•ด์•ผํ•จ)
  • selected
    ๋„˜๋‚˜ ๋ถˆํŽธํ•˜๊ณ  ๊ตฌ๋ฆฐ ์Šคํƒ€์ผ์€ CSS๋กœ ..
4-2. option ์†์„ฑ
  • value : ์„ ํƒ๊ฐ’์„ ์„œ๋ฒ„์— ์ „์†ก
  • selected : ๊ธฐ๋ณธ์ ์œผ๋กœ ์„ ํƒ๋˜์–ด์žˆ๋Š” ๊ฐ’
    select option ์„ ํƒํ•˜์ง€ ์•Š๊ณ  ์ „์†กํ•˜๋ฉด ์ฒซ๋ฒˆ์งธ option์˜ value๊ฐ’์ด ์„œ๋ฒ„๋กœ ๋„˜์–ด๊ฐ€๊ฒŒ ๋˜๋Š”๋ฐ ์ข‹์ง€ ์•Š๊ฒ ์ฅฌ ..? ๊ทธ๋ž˜์„œ ์ฒซ๋ฒˆ์งธ option ์€ value = "0" , ์„ ํƒ์œผ๋กœ ์˜ต์…˜์„ ๋„ฃ์–ด์ฃผ๋Š” ํŽธ (value ๋„ฃ์–ด์ฃผ๊ณ ์‹ถ์ง€ ์•Š์œผ๋ฉด value = "0" ์ค˜๋„ ๋จ)
    required ๋„ ๋„ฃ์–ด์ค˜์„œ ๊ผญ ์„ ํƒํ•˜๊ฒŒ๋” ํ•œ๋‹ค!
    <select name="device" id="myDevice" required>
     <!--<option value="">์„ ํƒ</option>-->
      <option value="0">์„ ํƒ</option>
      <option value="iphone">์•„์ดํฐ</option>
      <option value="galaxy">๊ฐค๋Ÿญ์‹œํฐ</option>
      <option value="ใ…œใ…œ">LGํฐ</option>
    </select>

5. <fieldset>

  • ๊ทธ๋ฃนํ™” ํ•˜๋Š” ์š”์†Œ
  • form ๋‚ด์šฉ์„ ๊ตฌํšํ™”
<form action="">
  <fieldset>
    <legend>๊ฐœ์ธ์ •๋ณด</legend>
    <label for="myName">์ด๋ฆ„</label>
    <input type="text" name="name" id="myName">
    <label for="myTel">์ „ํ™”๋ฒˆํ˜ธ</label>
    <input type="tel" name="tel" id="myTel">
    <label for="myEmail">์ด๋ฉ”์ผ</label>
    <input type="email" name="email" id="myEmail">
  </fieldset>
  <fieldset>
    <legend>๊ฐœ์ธ์ •๋ณด ์ œ๊ณต ๋™์˜</legend>
    <label for="checkAgree">๊ฐœ์ธ์ •๋ณด ์ œ๊ณต์— ๋™์˜ํ•˜์‹ญ๋‹ˆ๊นŒ?</label>
    <input type="checkbox" name="agree" id="checkAgree">
  </fieldset>
</form>

6. <legend>

  • filelset ๋ฐ”๋กœ ๋’ค์— ์œ„์น˜ํ•ด์•ผํ•œ๋‹ค !! (๋ฐ˜๋“œ์‹œ ์ฒซ๋ฒˆ์งธ ์ž์‹์œผ๋กœ ์‚ฌ์šฉํ•ด์•ผ ํ•จ)
  • ํผ ๊ทธ๋ฃน์˜ ๋ชฉ์ ์„ ๋‚˜ํƒ€๋‚ด๋Š” ์ œ๋ชฉ์„ ์˜๋ฏธ

7. <button>

  • ํด๋ฆญ๊ฐ€๋Šฅํ•œ ๋ฒ„ํŠผ
  • ๋ฒ„ํŠผ์˜ ๋ชจ์Šต์„ ๋‹ค์–‘ํ•˜๊ฒŒ ์ œ์–ดํ•˜๊ณ  ๋ฒ„ํŠผ ๋‚ด๋ถ€์— ๋‹ค๋ฅธ ์ž์‹ ์š”์†Œ๋ฅผ ์ถ”๊ฐ€ํ•˜๊ณ  ์‹ถ์„๋•Œ ์‚ฌ์šฉ
  • form ์•ˆ์— button ์žˆ์œผ๋ฉด enter ๋กœ ์ ‘๊ทผ ๊ฐ€๋Šฅ!

7-1. button ์˜ type

  1. submit : ๋ฒ„ํŠผ ํด๋ฆญํ•˜๋ฉด ์„œ๋ฒ„๋กœ ์–‘์‹ ๋ฐ์ดํ„ฐ ์ œ์ถœ
  <button>๋ฒ„ํŠผ</button>

์•„๋ฌด๊ฒƒ๋„ ์“ฐ์ง€ ์•Š์œผ๋ฉด ๊ธฐ๋ณธ๊ฐ’์ด submit ์ด๋‹ค.

 <button type="submit">๋ฒ„ํŠผ</button>

๊ทธ๋ ‡๋‹ค๊ณ  type ์ƒ๋žตํ•˜์ง€ ๋ง๊ธฐ

โญ๏ธ Input vs button ๋ฌด์—‡์„ ์จ์•ผํ• ๊นŒ?

๋‘˜ ๋‹ค submit ๊ธฐ๋Šฅ์„ ํ•˜๋Š”๊ฒŒ ๋˜‘๊ฐ™์€๋ฐ ๋‘˜ ์ค‘ ๋ญ˜ ์จ์•ผํ• ๊นŒ?

  • <input>์€ ๋‹ซ๋Š” ํƒœ๊ทธ๊ฐ€ ์—†๊ธฐ ๋•Œ๋ฌธ์—ย valueย ํŠน์„ฑ์— ํ…์ŠคํŠธ ๊ฐ’ ๋ฐ–์— ์ง€์ •ํ•  ์ˆ˜ ์—†๋‹ค.
  • <button>์€ ๋‚ด๋ถ€์— ์—ฌ๋Ÿฌ๊ฐ€์ง€ ์ž์‹ ์ปจํ…์ธ ๋ฅผ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ๊ณ  ์—ฌ๊ธฐ ๋”ํ•ดย ::after์™€ย ::beforeย ์™€ ๊ฐ™์€ ๊ฐ€์ƒ ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ๋„ ๊ฐ€๋Šฅํ•˜๋‹ค.

๋” ๋‹ค์ฑ„๋กญ๊ณ  ๋ฉ‹์ง„ ์Šคํƒ€์ผ์„ ์ ์šฉํ•ด์•ผ ํ•œ๋‹ค๋ฉด <button> ์š”์†Œ๋ฅผ ์šฐ์„ ์ ์œผ๋กœ ๊ณ ๋ คํ•˜๋ฉด ๋œ๋‹ค!

8. <textarea>

: ์—ฌ๋Ÿฌ์ค„์˜ ํ…์ŠคํŠธ ์ž…๋ ฅ๋ฐ›์„ ์ˆ˜ ์žˆ๋Š” ์š”์†Œ
์ด๊ฒƒ๋„ ๋‹น์—ฐํžˆ ๋ฐ์ดํ„ฐ์ „์†ก์„ ์œ„ํ•ด ์‚ฌ์šฉ๋จ

 <textarea name="" id="" cols="30" rows="10"></textarea>
  • cols ์—ด : ์ž…๋ ฅ์ฐฝ์˜ ๋„“์ด, ๋ฌธ์ž์˜ ํ‰๊ท ์ ์ธ ๋„“์ด๋ฅผ ๊ธฐ์ค€์œผ๋กœ ํ•จ. ๊ทธ๋ž˜์„œ ํฐํŠธ๋งˆ๋‹ค ๋‹ค๋ฅด๋‹ค! ๋ณดํ†ต ์ด๊ฑธ๋กœ ์„ค์ •์•ˆํ•˜๊ณ  CSS๋กœ ์ฒ˜๋ฆฌํ•˜๋Š” ํŽธ
    (๊ธฐ๋ณธ๊ฐ’ = 20)
  • rows ํ–‰ : ์ž…๋ ฅ์ฐฝ ์„ธ๋กœ์ค„ ์ˆ˜

9. <datalist>

: <select>์™€ <input> ์„ ์„ž์–ด์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋กํ•ฉ๋‹ˆ๋‹ค. <input> ์˜ list ์†์„ฑ์„ ์ด์šฉํ•ด <datalist> ์š”์†Œ์˜ id ์†์„ฑ๊ณผ ์—ฐ๊ฒฐํ•˜์—ฌ ์‚ฌ์šฉ

<label for="solasystem">์›ํ•˜๋Š” ํ–‰์„ฑ์„ ์„ ํƒํ•˜์„ธ์š” : </label>
<input type="text" id="solasystem" list="planets" name="planets">
<datalist id="planets">
    <option value="์ˆ˜์„ฑ">์ˆ˜์„ฑ</option>
    <option value="๊ธˆ์„ฑ">๊ธˆ์„ฑ</option>
    <option value="์ง€๊ตฌ">์ง€๊ตฌ</option>
    <option value="ํ™”์„ฑ">ํ™”์„ฑ</option>
</datalist>

์ด๋ ‡๊ฒŒ ์‚ฌ์šฉ์ž์—๊ฒŒ ๊ธฐ๋ณธ์ ์œผ๋กœ ์„ ํƒํ•  ์ˆ˜ ์žˆ๋Š” ์˜ต์…˜์„ ์ œ๊ณตํ•จ๊ณผ ๋™์‹œ์—, ๋งŒ์•ฝ ์ด ์•ˆ์— ์‚ฌ์šฉ์ž๊ฐ€ ์„ ํƒํ•  ์ˆ˜ ์žˆ๋Š” ์˜ต์…˜์ด ์—†๋Š” ๊ฒฝ์šฐ์— _์ง์ ‘ ์ž…๋ ฅ ๊ฐ€๋Šฅํ•˜๊ฒŒ๋” ํŽธ์˜์„ฑ ์ œ๊ณตํ•œ๋‹ค._ 

(์ด๋ฏธ์ง€/๋‚ด์šฉ ์ฐธ๊ณ  ๋ฐ ์ถœ์ฒ˜ : ๋ฉ‹์Ÿ์ด์‚ฌ์ž์ฒ˜๋Ÿผ)

๋ณด์ถฉ์„ค๋ช…

shadow DOM

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ