html 라벨 태그의 for 속성의 기능은 무엇입니까? 라벨 라벨의 for 속성 소개

이 글에서는 주로 html 라벨 태그의 for 속성의 일부 기능과 몇 가지 사용 예를 소개합니다. 이제 이 글을 함께 살펴보겠습니다.

먼저 라벨 태그의 for 속성을 살펴보겠습니다. . 소개:

은 입력 요소를 제공하고 해당 요소에 대한 태그를 정의하도록 설계되었습니다.

for 속성은 라벨이 바인딩되는 양식 요소를 지정합니다.

레이블을 양식 컨트롤에 바인딩하는 방법에는 두 가지가 있습니다.

1 양식 컨트롤을 라벨의 콘텐츠로 사용합니다. 제본.

지금은 for 속성이 필요하지 않으며 바인딩된 컨트롤에는 id 속성이 필요하지 않습니다.

암시적 바인딩:

<label>Date of Birth: <input type="text" name="DofB" /></label>

2. 태그 아래에 for 속성에 대한 대상 양식의 ID를 지정합니다.

명시적 바인딩:

<label for="SSN">Social Security Number:</label>
<input type="text" name="SocSecNum" id="SSN" />

에 for 속성을 추가해야 하는 이유는 무엇인가요?

에 for 속성을 추가하고 입력 컨트롤을 바인딩하면 마우스 사용자의 사용자 경험이 향상될 수 있습니다.

라벨 요소 내의 텍스트를 클릭하면 이 컨트롤이 실행됩니다. 즉, 사용자가 레이블을 렌더링하면 브라우저는 자동으로 레이블과 관련된 양식 컨트롤에 초점을 돌립니다.

html 라벨 태그의 for 속성 효과도 있습니다:

라벨 태그의 for 속성 효과는 마우스로 "female"을 클릭하면 주로 라디오 선택 효과를 얻을 수 있다는 것입니다.

for=nv 덕분에 입력 텍스트가 필수입니다. 상자의 ID도 nv와 동일합니다. 비교를 위해 남성 라디오에는 이러한 효과가 없습니다.

<div>
<label for="nan1">男</label>
<input type="checkbox" id="nan" />
<label for="nv">女</label>
<input type="checkbox" id="nv" />
</div>

브라우저에 표시되는 코드의 효과는 다음과 같습니다. :

사진은 여러번 선택 가능한 체크박스 입니다. 누구나 실험에 사용할 수 있습니다.

html 라벨 태그의 for 속성 예를 살펴보겠습니다.

라벨이 있는 두 개의 라디오 버튼이 있는 양식:

<form action="demo_form.asp">
<label for="male">php中文网</label>
<input type="radio" name="sex" id="male" value="male"/>
<label for="female">html</label>
<input type="radio" name="sex" id="female" value="female"/>
<input type="submit" value="Submit"/>
</form>

이 효과는 그림과 같습니다.

이 그림은 라디오 버튼 버튼이므로 다중 선택이 허용되지 않습니다.

위 내용은 이 글의 전체 내용입니다. 라벨 태그의 for 속성 내용은 다들 연습해 보시기 바랍니다. 연습 주소를 모르시면 PHP 중국어로 오시면 됩니다. 웹사이트와 비디오 튜토리얼의 실제 전투에서 코드를 복사하고 효과를 확인할 수 있습니다. 궁금하신 사항은 아래에서 문의하실 수 있습니다.

【에디터 추천】

html 코드 태그를 어떻게 감싸나요? 이 글은 코드 문구의 사용에 대한 철저한 이해를 제공합니다

html tbody 태그가 블록 수준 요소인가요? html tbody 태그의 기본 사용법

위 내용은 html 라벨 태그의 for 속성의 기능은 무엇입니까? 라벨 라벨의 for 속성 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!