HTML(코드 포함)에서 레이블의 역할과 사용에 대한 심층적인 이해

양식 레이아웃은 업무에서 자주 사용됩니다. 양식 레이아웃에서 라벨 태그를 접하게 될 것입니다. 많은 초보자는 라벨 태그를 무시할 수도 있고, 라벨 태그에 대해 잘 모르는 사람도 있습니다. ? 라벨 라벨의 용도는 무엇입니까?

양식 레이아웃에서 라벨 태그를 사용하게 될 것입니다. 실제로 라벨에는 스타일 효과가 없으며 해당 양식 컨트롤을 실행하는 기능이 있습니다. 예를 들어, 라디오 버튼이나 다중 선택 상자를 클릭하면 해당 텍스트 옵션이 선택될 수 있습니다. 이는 텍스트에 라벨을 추가하여 얻을 수 있는 효과입니다.

1. 라벨 태그 사용 방법

라벨 태그는 입력 요소에 대한 라벨(마크)을 정의하며, 스팬 태그와 마찬가지로 사용자에게 특별한 효과를 제공하지 않습니다. 그러나 레이블 레이블과 스팬 레이블의 가장 큰 차이점은 마우스 사용자의 사용성을 향상시키고 특정 양식 컨트롤과 연결할 수 있다는 것입니다.
레이블 레이블이 특정 양식 컨트롤과 연결된 후 사용자가 레이블 요소 내의 텍스트를 클릭하면 연결된 양식 컨트롤이 트리거됩니다. 즉, 사용자가 레이블 레이블을 선택하면 브라우저는 자동으로 레이블 레이블과 관련된 양식 컨트롤로 초점을 돌립니다. 레이블 텍스트를 클릭할 때 해당 컨트롤이 선택되기 위해서는 해당 양식 컨트롤 id의 값이 레이블 레이블의 값과 동일해야 합니다.

2. 라벨 구문

male
라벨 라벨의 텍스트를 채워야 합니다.
라벨 라벨의 for 속성 값은 다음과 같습니다. 사용자 정의, 일반적으로 원하는 것과 동일합니다. 클릭하면 컨트롤 개체의 해당 ID가 트리거됩니다.

3. 라벨의 실제 적용

HTML 코드 조각은 다음과 같습니다.

<form action="" method="get"> 
性别：<br /> 
<input name="sex" id="man" type="radio" value="" /> 
<label for="man">男</label> 
<input name="sex" id="woman" type="radio" value="" /> 
<label for="woman">女</label> 
</form>

참고: 입력 태그의 id 값은 라벨 태그의 for 값에 해당합니다.

그림을 보세요:

요약: 일반적으로 선택하려는 선택 버튼에 해당하는 라디오 버튼 상자의 텍스트나 다중 선택 버튼 상자의 텍스트를 클릭해야 합니다. label label. for 및 id 값은 동일합니다. 라벨 태그에는 기본적으로 스타일이 없습니다. CSS를 사용하여 CSS 너비, CSS 높이, CSS 테두리 및 기타 스타일을 설정할 수 있습니다. 초보자는 더 많은 코드를 입력하고 더 많은 것을 시도해 볼 수 있습니다. 이 튜토리얼이 도움이 되기를 바랍니다.

위 내용은 HTML(코드 포함)에서 레이블의 역할과 사용에 대한 심층적인 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!