HTML 라벨은 무엇을 의미하나요? HTML 레이블의 기능과 속성에 대해 무엇을 알고 있습니까? 이 글에서는 HTML 라벨 태그의 정의와 기능을 설명하고 HTML 라벨 태그의 두 가지 속성에 대한 자세한 설명(HTML 라벨 태그의 for 속성 예시 포함)을 설명합니다. HTML 라벨 태그:
< ;label> 라벨은 입력 요소에 대한 라벨(마커)을 정의합니다.
label 요소는 사용자에게 특별한 효과를 제공하지 않습니다. 그러나 마우스 사용자의 유용성은 향상됩니다. 이 컨트롤은 레이블 요소 내부의 텍스트를 클릭하면 트리거됩니다. 즉, 사용자가 레이블을 선택하면 브라우저는 자동으로 레이블과 관련된 양식 컨트롤로 초점을 돌립니다.
라벨의 for 속성은 관련 요소의 id 속성과 동일해야 합니다.
참고: "for" 속성은 레이블을 다른 요소에 바인딩할 수 있습니다. "for" 속성값을 해당 요소의 id 속성값으로 설정해주세요.
HTML 라벨의 역할:
은 텍스트 프롬프트 라벨이지만, 라벨 라벨에 for 속성을 추가하면 해당 옵션 상자와 함께 번들로 제공될 수 있습니다. 옵션 상자를 클릭하면 효과가 적용됩니다.
예:
<lable>男</lable>
<input style="checkbox"> 로그인 후 복사
HTML 라벨의 속성:
사실, 에는 주로 두 가지 속성이 있습니다. 매우 유용한 라벨 중 하나는 FOR이고 다른 하나는 ACCESSKEY입니다.
기능: 라벨 태그에 의해 바인딩될 HTML 요소를 나타냅니다. 이 라벨을 클릭하면 바인딩된 요소가 포커스를 받습니다.
사용법: Name
HTML 라벨의 ACCESSKEY 속성:
기능: Label 태그에 바인딩된 요소에 액세스하는 단축키입니다. 단축키를 누르면 바인딩된 요소에 초점이 맞춰집니다.
사용법: Name
제한 사항: accessKey 속성으로 설정 바로가기 키는 브라우저의 바로 가기 키와 충돌할 수 없습니다. 그렇지 않으면 브라우저의 바로 가기 키가 먼저 활성화됩니다.
참고: LABEL을 다른 컨트롤에 바인딩하려면 LABEL 요소의 FOR 속성을 컨트롤과 동일한 ID로 설정하세요. LABEL을 컨트롤의 NAME 속성에 바인딩하는 것은 쓸모가 없습니다. 그러나 양식을 제출하려면 LABEL 요소가 바인딩된 컨트롤의 이름을 지정해야 합니다.
레이블 속성에 대한 HTML (예제 포함):
다음은 예제입니다.
두 개의 입력 필드와 관련 마크업이 있는 간단한 HTML 양식:
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form> 로그인 후 복사
HTML :
for 속성은 레이블이 바인딩되는 양식 요소를 지정합니다.
암시적 및 명시적 연결
마크는 일반적으로 다음 두 가지 방법 중 하나로 양식 컨트롤에 연결됩니다. 암시적 형식인 마크 레이블의 콘텐츠로 양식 컨트롤을 사용하거나 예를 들어 XHTML에서:
명시적 연관:
<label for="SSN">Social Security Number:</label>
<input type="text" name="SocSecNum" id="SSN" /> 로그인 후 복사
<label>Date of Birth: <input type="text" name="DofB" /></label> 로그인 후 복사
태그 안에 삽입됩니다. .
브라우저 지원:
모든 주요 브라우저는 for 속성을 지원합니다.
Safari 2 이하에서는 for 속성을 지원하지 않습니다.
HTML 속성 구문:
<label for="value"> 로그인 후 복사
속성 속성 값:
element_id: 라벨이 바인딩된 요소의 ID
html 텍스트 영역은 무엇을 의미하나요? textarea 태그에서 줄 바꿈과 공백을 얻는 방법은 무엇입니까?
태그는 무엇을 의미하나요? HTML5 태그의 기본 사용법에 대한 자세한 설명
위 내용은 HTML 라벨은 무엇을 의미하나요? HTML 레이블 태그 및 속성 사용 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
