html νΌ μμμ μ’ λ₯ <label>, <fieldset>, <legend>, <form> μμ
- 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 μ΄λ€.