HTML에서 라벨 태그를 사용하는 방법

이번에는 HTML에서 라벨 태그를 사용하는 방법을 소개하겠습니다. 완전한 양식은 양식 태그

LABEL 레이블은 일반적인 양식 컨트롤입니다. 먼저 예를 들어보겠습니다.

[html] view plain copy
<label for="email">E-mail:</label>  
<input type="text" id="email">

양식 컨트롤은 모두

인라인 요소

이므로 한 줄에 표시됩니다. 웹 페이지에서 E-mai라는 단어나 텍스트 상자를 클릭하면 텍스트 상자에 커서가 나타납니다. 이것이 라벨 태그의 기능입니다. 직설적으로 말하면 레이블 레이블은 연결된 양식 컨트롤의 확장입니다. 즉, 마우스로 클릭하면 연결된 양식 컨트롤을 클릭하는 것과 동일한 효과가 나타납니다. 전제는 레이블의 for 속성 속성 값이 연결하려는 양식 컨트롤의 ID와 동일하다는 것입니다. ID를 사용하여 연결하고 싶지 않은 경우 두 번째 방법을 사용할 수도 있습니다.

[html] view plain copy

<label>E-mail:<input type="text"></label>

효과는 이전과 동일합니다.

물론 다른 양식 컨트롤도 레이블과 연결할 수 있습니다. 예를 들어, 다음 예는

[html] view plain copy
<label for="a">a:</label> <input type="radio" id="a"><br>  
[html] view plain copy
<pre name="code" class="html" style="font-size: 14px;"><label for="b">b:</label> <input type="radio" id="b"><br>  
[html] view plain copy
<label for="c">c:</label> <input type="radio" id="c">

그러면 이 라벨은 생각해봐도 그다지 유용하지 않다고 말할 수 있습니다.

물론이죠. 작동합니다. 사용자 경험을 향상시키는 것 외에도 이동이 불편한 사람들이 인터넷에 액세스할 수 있는 편의성도 제공합니다. 예를 들어, 시각 장애가 있는 사람들은 웹 페이지를 검색하기 위해 "웹 페이지 리더"의 소리를 사용합니다. 라벨 태그가 연결되어 있지 않으면 서퍼는 마음속으로 일치하는 내용을 상상할 수 없으며 웹 사이트 형식의 내용이 무엇을 의미하는지 잘 이해할 수 없습니다. 표현. 또 다른 예로 신체 장애가 있는 서퍼는 마우스 제어에 어려움을 겪게 되며, 라벨을 사용한 후에는 클릭 대상이 커지므로 조작이 더 쉬워집니다.

따라서 정말 좋은 페이지는 크로스 브라우저여야 하며 다양한 크기의 화면을 갖춘 장치에 적용 가능해야 하며 모든 유형의 인터넷 사용자(노인이든 장애인이든)에게 편의를 제공해야 합니다.

HTML에서 라벨 태그를 사용하는 방법은 제한되어 있습니다. 도움이 필요한 친구는 태그를 저장할 수 있습니다. 이 사이트의 다른

업데이트

에도 계속 관심을 가져주세요. 관련 읽기:

HTML의 명명 규칙

DIV 테두리를 벗어나는 콘텐츠를 숨기는 방법

CSS를 사용하여 마우스 스타일을 수정하는 방법

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