HTML의 라벨 태그에 대한 자세한 소개

라벨 라벨 소개

라벨 라벨은 입력 요소에 대한 라벨(마크)을 정의하며, 스팬 라벨과 마찬가지로 사용자에게 특별한 효과를 제공하지 않습니다. 그러나 레이블 레이블과 스팬 레이블의 가장 큰 차이점은 마우스 사용자의 사용성을 향상시키고 특정 양식 컨트롤과 연결할 수 있다는 것입니다.

레이블 레이블이 특정 양식 컨트롤과 연결된 후 사용자가 레이블 요소 내의 텍스트를 클릭하면 연결된 양식 컨트롤이 트리거됩니다. 즉, 사용자가 레이블 레이블을 선택하면 브라우저는 자동으로 레이블 레이블과 관련된 양식 컨트롤로 초점을 돌립니다.

주요 사용 시나리오

레이블 태그는 체크박스나 라디오와 연결하는 데 자주 사용되므로 텍스트를 클릭하면 체크박스나 라디오를 선택/취소할 수 있습니다. 아래 그림과 같이 텍스트를 클릭하면 이전 라디오 버튼을 클릭한 것과 같은 효과가 있습니다. 즉, 라벨이나 컨트롤을 클릭하면 컨트롤이 활성화되기 때문에 컨트롤의 클릭 가능한 영역이 확대됩니다. 특히 체크박스와 라디오 버튼에 유용합니다.

레이블 레이블이 특정 양식 요소와 연결되는 방식

레이블 레이블을 연결하는 두 가지 주요 방법은 표시 연결 및 암시적 연결입니다.

방법 1: 명시적 연결

명시적 연결 양식 기반 연결은 레이블 레이블의 for 속성을 통해 다른 양식 컨트롤과 명시적으로 연결됩니다. for 속성의 값은 레이블 레이블과 동일한 문서에 있는 표시 가능한 양식 요소의 id여야 합니다. 이는 이름이 아니라 ID라는 점에 유의하세요. 예:

爱好：
<input type=&#39;checkbox&#39; name=&#39;basket&#39; id=&#39;basketball&#39;>   
<label for="basketball">篮球</label>
<input type=&#39;checkbox&#39; name=&#39;football&#39; id=&#39;football&#39;>   
<label for="football">足球</label>

Rendering:

암시적 연관

암시적 연관은 양식 컨트롤을 레이블 레이블 내부에 직접 배치하는 것입니다. 이 경우 레이블 레이블에는 여러 개의 유효한 형식 요소를 포함하여 하나의 양식 요소만 포함될 수 있습니다. 첫 번째로.

<label>点击我可以使文本框获得焦点    <input type=&#39;text&#39; name=&#39;theinput&#39; id=&#39;theinput&#39;></label>

렌더링은 다음과 같습니다. 텍스트 상자에 초점을 맞추려면 텍스트를 클릭하세요.

디스플레이 연결과 암시적 연결의 장점과 단점:

명시적 연결 장점:

1. 줄일 수 있습니다. 라벨 중첩 레이어 수
2. 레이블 라벨과 양식은 서로 다른 위치에 표시될 수 있습니다

단점:

1. 컨트롤은 ID 속성을 정의해야 합니다
2. 레이블 라벨과 양식 컨트롤은 전체적으로 제어하는 ​​데 도움이 되지 않습니다

암시적 연관 장점:

1. 컨트롤은 ID를 정의할 필요가 없습니다
2. 레이블과 컨트롤은 전체적으로 제어하기 편리합니다.

암시적 연관 단점:

1. 레이블 중첩 수준 증가
2. 불가능 라벨과 관련 컨트롤을 서로 다른 위치에 배치하세요

위는 두 가지 방법에 대한 개인적인 견해입니다. 사용 시 필요에 따라 표시하거나 암시적으로 선택할 수 있습니다.

라벨 태그 및 관련 양식 요소에 대한 브라우저 지원

모든 주요 브라우저는 라벨 태그를 지원합니다. Safari 2 이하에서는 레이블 태그를 지원하지 않습니다.

연결되어 표시될 수 있는 양식 요소는 다음과 같습니다.

• input type="text" 텍스트 상자. 레이블을 클릭하면 연결된 텍스트 상자에 초점이 맞춰집니다. input type="text"   文本框，点击标签时关联的文本框获得焦点。
• input type="checkbox" 复选框，点击标签时选中或取消选中复选框。
• input type="radio" 单选框，点击标签时选中单选框。
• input type="file" 文件上传，点击标签时打开文件选择对话框。
• input type="password" 密码框，点击标签时密码框获得焦点。
• textarea 文本域，点击标签时文本域获得焦点。
• select
input type="checkbox" 체크박스, 라벨을 클릭할 때 체크박스를 선택하거나 선택 취소하세요.

input type="radio" 라디오 버튼, 라벨 클릭 시 라디오 버튼을 선택하세요. input type="file" 파일 업로드, 라벨을 클릭하면 파일 선택 대화 상자가 열립니다.

input type="password" 비밀번호 상자, 라벨을 클릭하면 비밀번호 상자에 초점이 맞춰집니다.

textarea 텍스트 영역, 라벨을 클릭하면 텍스트 영역에 초점이 맞춰집니다.
선택 드롭다운 상자, 레이블을 클릭하면 드롭다운 상자에 포커스가 있지만 드롭다운 상자 옵션은 확장되지 않습니다.

라벨 label의 form 속성

form 속성은 label label 요소가 속한 형식을 지정합니다. 아래와 같이 레이블 레이블은 myform 형식 외부에 있지만 여전히 myform 형식에 속합니다. 다음과 같습니다:

<form action="http://songguoliang.com/test.html" id="myform">
  <input type="radio" name="sex" id="male" value="male">
  <br>
  <label for="female">女</label>

  <input type="submit" value="提交"></form><label for="male" form="myform">男</label>

🎜렌더링은 다음과 같습니다. "남성"을 클릭하여 첫 번째 라디오 버튼도 선택하세요. 🎜🎜🎜🎜참고: 🎜이 양식 속성은 2016년 4월 28일에 HTML 사양에서 삭제되었습니다. 그러나 스크립트는 여전히 읽기 전용 HTMLLabelElement.form 속성에 액세스할 수 있습니다. 이는 레이블의 연결된 컨트롤이 멤버인 양식을 반환하거나, 레이블이 컨트롤과 연결되어 있지 않거나 컨트롤이 양식의 일부가 아닌 경우 null을 반환합니다. 🎜🎜읽어주신 모든 분들께 감사드리며, 많은 도움이 되셨으면 좋겠습니다. 🎜🎜이 기사는 https://pocket.blog.csdn.net/article/details/72852150🎜에서 복제되었습니다.

추천 튜토리얼: "HTML 튜토리얼"

위 내용은 HTML의 라벨 태그에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!