πŸ“ŒLanguage/HTML & CSS

html 폼 μš”μ†Œμ˜ μ’…λ₯˜ <label>, <fieldset>, <legend>, <form> μ˜ˆμ‹œ

hellohailie 2022. 4. 16. 17:50
λ°˜μ‘ν˜•
  • label
<label for="name">이름</label>: <input type="text" id="name"><br>
<label for="nickname">이름</label>: <input type="text" id="nickname"><br>
<label for="address">이름</label>: <input type="text" id="address"><br>

form μš”μ†Œμ˜ id μ†μ„±κ°’κ³Ό <label>의 for μ†μ„±κ°’을 κ°™κ²Œ 적어주어야 ν•©λ‹ˆλ‹€.

<label>을 μ‚¬μš©ν•˜λ©΄ 이λ₯Ό ν΄λ¦­ν–ˆμ„ 경우 ν•΄λ‹Ή form μš”μ†Œλ₯Ό ν΄λ¦­ν•œ κ²ƒμ²˜λŸΌ λ™μž‘ν•©λ‹ˆλ‹€.

λ˜ν•œ, μŠ€ν¬λ¦° 리더기λ₯Ό 톡해 λ“£κ²Œ 되면 ν•΄λ‹Ή form μš”μ†Œμ— μ ‘κ·Ό μ‹œ <label>을 ν•¨κ»˜ μ½μ–΄μ£Όκ²Œ λ©λ‹ˆλ‹€.

<label>은 μ‚¬μš©μ„±, μ ‘근성적인 츑면으둜 μ€‘μš”ν•œ 역할을 ν•˜λ―€λ‘œ λ°˜λ“œμ‹œ μ¨μ£ΌλŠ” 것이 μ’‹μŠ΅λ‹ˆλ‹€.

 

 

See the Pen Untitled by HelloHailie (@hellohailie) on CodePen.

 

화면상 λ³€ν™”λŠ” μ—†μ§€λ§Œ μ‹€μ œλ‘œ 이 아이디와 이 μž…λ ₯ μš”μ†ŒλŠ” 연결이 된 μƒνƒœλ‹€. κ·Έλž˜μ„œ id: 뢀뢄을 λˆŒλŸ¬λ„ μ»€μ„œκ°€ 곡간에 κΉœλΉ‘μΈλ‹€!

 

 

 

  • fieldset & legend

 

 

<fieldset>, <legend>λŠ” form μš”μ†Œλ₯Ό ꡬ쑰화 ν•˜κΈ° μœ„ν•΄ ν•„μš”ν•œ νƒœκ·Έμž…λ‹ˆλ‹€.

  • <fieldset> : μ—¬λŸ¬ 개의 폼 μš”μ†Œλ₯Ό κ·Έλ£Ήν™”ν•˜μ—¬ ꡬ쑰적으둜 λ§Œλ“€κΈ° μœ„ν•΄ μ‚¬μš©
  • <legend> : 폼 μš”μ†Œμ˜ 제λͺ©μœΌλ‘œ <fieldset> 내뢀에 μž‘μ„±

<fieldset>은 보톡 form의 성격에 따라 κ΅¬λΆ„ν•©λ‹ˆλ‹€.

<legend>λŠ” <fieldset>의 μžμ‹μœΌλ‘œ λ°˜λ“œμ‹œ μ΅œμƒλ‹¨μ— μœ„μΉ˜ν•΄μ•Ό ν•©λ‹ˆλ‹€.

 

ν•„μˆ˜ μž…λ ₯ λΆ€λΆ„κ³Ό 선택 μž…λ ₯ 뢀뢄을 λ§Œλ“€λ•Œ μ“΄λ‹€. 

 

<fieldset>
    <legend>κΈ°λ³Έ 정보</legend>
    ... 폼 μš”μ†Œλ“€ ...
</fieldset>
<fieldset>
    <legend>λΆ€κ°€ 정보</legend>
    ... 폼 μš”μ†Œλ“€ ...
</fieldset>

 

 

  • form

form μš”μ†Œλ“€μ„ κ°μ‹ΈλŠ” νƒœκ·Έλ‘œ 데이터λ₯Ό λ¬Άμ–΄μ„œ μ‹€μ œ μ„œλ²„λ‘œ μ „μ†‘ν•΄μ£ΌλŠ” 역할을 ν•˜λŠ” νƒœκ·Έμž…λ‹ˆλ‹€.

λ§Œμ•½ <fieldset>으둜 κ΅¬μ‘°ν™”λ˜μ–΄μžˆλ‹€λ©΄ <fieldset>도 ν•¨κ»˜ κ°μ‹ΈλŠ” 역할을 ν•©λ‹ˆλ‹€.

 

<form>μ—λŠ” λŒ€ν‘œμ μΈ 2κ°€μ§€ 속성이 μžˆμŠ΅λ‹ˆλ‹€.

  • action: 데이터λ₯Ό μ²˜λ¦¬ν•˜κΈ° μœ„ν•œ μ„œλ²„μ˜ μ£Όμ†Œ
  • method: 데이터λ₯Ό μ „μ†‘ν•˜λŠ” 방식을 μ§€μ •

method μ†μ„±κ°’μ—λŠ” get/post 2κ°€μ§€ 방식이 μ‘΄μž¬ν•©λ‹ˆλ‹€.

get 방식은 데이터가 전솑될 λ•Œ μ£Όμ†Œμ°½μ— νŒŒλΌλ―Έν„° ν˜•νƒœλ‘œ λΆ™μ–΄ 데이터가 λ…ΈμΆœλ©λ‹ˆλ‹€. κ·Έλž˜μ„œ λ―Όκ°ν•œ 정보 λ‹€λ£¨λŠ” ν¬λ§·μ—μ„œλŠ” μ“°λ©΄ μ•ˆλœλ‹€. 

반면, post 방식은 데이터가 전솑될 λ•Œ 데이터가 λ…ΈμΆœλ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. κ·Έλž˜μ„œ νšŒμ›κ°€μž…, 둜그인 정보 μ œμΆœν•  λ•Œ Post μ“΄λ‹€. 

 

 

λ°˜μ‘ν˜•