This page was translated from English by the community.Learn more and join the MDN Web Docs community.
HTML attribute: for
for 특성은<label>과<output>에 적용 가능한 특성입니다.<label> 요소에 적용하는 경우 라벨이 설명하고 있는 양식 요소를 나타냅니다.<output> 요소에 적용하는 경우 출력에 사용되는 값을 표시하는 요소 간의 명시적인 관계를 표현합니다.
시도해 보기
<p> <label>First Name (no "for" attribute):</label> <input type="text" value="Jane" /></p><p> <label for="last">Last Name (w/ "for" attribute):</label> <input type="text" value="Doe" /></p><p> <strong>Full Name:</strong> <output for="first last" aria-labelledby="result-label"></output></p>label[for="paragraph"] { color: rebeccapurple;}#result { text-align: center;}#result-label { font-size: 16pt;}#result-label,#output { display: block;}const firstNameEl = document.getElementById("first");const lastNameEl = document.getElementById("last");const outputEl = document.getElementById("output");function updateOutput() { const value = `${firstNameEl.value} ${lastNameEl.value}`; outputEl.innerText = value;}updateOutput();firstNameEl.addEventListener("input", updateOutput);lastNameEl.addEventListener("input", updateOutput);사용
<label>에서 사용하는 경우,for 특성의 값은 연결된 양식 요소의id 값입니다.
html
<label for="username">Your name</label> <input type="text" /><output>에서 사용하는 경우,for 특성의 값은 출력 값을 생성하기 위한 요소의id 값을 공백으로 구분하여 나열한 목록입니다.
html
<input type="range" name="b" value="50" /> +<input type="number" name="a" value="10" /> =<output name="result" for="a b">60</output>예제
명세서
| Specification |
|---|
| HTML # attr-label-for |
| HTML # attr-output-for |