[attribute] HTML - for 속성 - <label>/<output> 관련 요소 ID 바인딩 지정 (= for속성 = 포속성) ※ 인풋태그에 라벨/레이블 달기 + 아웃풋 태그에 계산결과 넣기

1. for 예제 - <label> 경우
2. for 정의
3. for 구문
4. for 예제 - <output> 경우

for 예제 - <label> 경우

[방법1] - <label> 태그로 <input> 태그를 감싸는 경우

 

<form action="/action_page.php">

  <label for="html"> <input type="radio" id="html" name="lang" value="HTML"> HTML</label>

  <label for="css"><input type="radio" id="css" name="lang" value="CSS"> CSS</label>

  <label for="javascript"><input type="radio" id="javascript" name="lang" value="JavaScript"> JavaScript</label>

  <input type="submit" value="확인">

</form>

 

결과보기

---

[방법2] - <label> 태그를 <input> 태그를 분리한 경우

 

<form action="/action_page.php">

  <input type="radio" id="html" name="lang" value="HTML">

  <label for="html">HTML</label>

  <input type="radio" id="css" name="lang" value="CSS">

  <label for="css">CSS</label>

  <input type="radio" id="javascript" name="lang" value="JavaScript">

  <label for="javascript">JavaScript</label>

  <input type="submit" value="확인">

</form>

 

결과보기 

for 정의

 

• <label> 경우, 라벨 요소가 바인딩 될 요소 지정.
• <output> 경우, 계산 결과에 사용된 요소 지정.

 

---

 

1. for 속성 사용 가능 태그 종류

<label>, <output>

 

2.

주요 최신  브라우저 모두 지원.

 

for 구문

 

• <label for="element_id">
• <output for="element_id">

 

---

[속성값]

 

element_id

• <lable> 경우, <label> 요소가 바인딩된 요소의 ID 지정.
• <output> 경우, 계산 결과와 계산에 사용된 요소 사이의 관계를 지정하는 하나 이상의 요소의 ID 목록을 공백으로 구분하여 지정.

 

for 예제 - <output> 경우

 

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">

    <input type="range" id="a" value="50"> 

    + <input type="number" id="b" value="100"> 

    = <output name="x" for="a b"></output>

</form>

 

결과보기