자바스크립트 태그

| | | | | | | | | | | | | | | | | |

HTML 레이블 태그는 HTML 형식의 요소에 대한 캡션을 정의하는 데 사용됩니다. 이들은 태그로 액세스할 수 있으며 특정 웹 모듈에 연결됩니다. 클릭하면 사용자가 양식과 상호 작용할 수 있습니다.

HTML 양식을 만들 때 양식 필드에 캡션을 추가하도록 선택할 수 있습니다. 예를 들어 고객 이름에 Name: 캡션이 있어야 하는 양식 필드를 원할 수 있습니다.

HTML 태그가 들어옵니다. 태그는 HTML 양식의 양식 제어 요소에 대한 캡션을 정의하는 데 사용됩니다. 각 레이블은 양식의 특정 요소와 연결됩니다.

이 자습서에서는 예제를 참조하여 HTML 레이블 태그를 사용하여 양식에 레이블을 추가하는 방법을 설명합니다. 이 튜토리얼을 읽으면 HTML을 사용하여 양식 레이블을 만드는 전문가가 될 것입니다.

HTML 레이블

태그는 `양식의 특정 양식 요소에 레이블을 지정합니다. 각 레이블 태그는 HTML 속성 for를 통해 양식 요소와 연결됩니다.

태그를 사용해야 하는 몇 가지 이유가 있습니다. 중요하다. 첫째, 레이블은 웹 페이지의 특정 양식 필드와 연결됩니다. 즉, 화면 판독기가 양식 필드를 만나면 지정된 레이블의 내용이 사용자에게 읽혀집니다. 그러면 웹사이트에 더 쉽게 액세스할 수 있습니다.

또한 태그가 양식 필드와 연결되면 사용자는 레이블 내부의 텍스트를 클릭할 수 있습니다. 모듈을 활성화합니다. 이렇게 하면 항목을 직접 클릭할 필요가 없기 때문에 사용자가 양식 필드와 더 쉽게 상호 작용할 수 있습니다.

예를 들어 확인란 요소가 표시되지 않은 경우, 사용자는 요소를 활성화하려면 체크박스 내부를 직접 클릭해야 합니다. 태그를 지정한 경우 사용자는 태그를 클릭하여 체크박스를 활성화할 수도 있습니다.

HTML 태그 구문

HTML 태그 구문 :

for 속성은 레이블이 특정 요소. 속성의 값은 요소에서 사용하는 id 입력 속성과 동일해야 합니다.

에 대한 속성을 사용하는 대신 필드를 레이블에 삽입하여 입력 양식을 레이블에 연결할 수도 있습니다. 이에 대한 구문은 다음과 같습니다.

HTML 태그는 HTML의 모든 전역 속성을 지원합니다. 또한 태그는 모든 주요 브라우저에서 지원됩니다.

HTML 레이블의 예

사용자가

양식 필드가 What is your email address? 캡션과 함께 표시되기를 원합니다. 이를 위해 사용할 수 있는 두 가지 접근 방식이 있습니다. 속성 또는 중첩된 레이블을 사용합니다.

속성

다음 코드를 사용하여 속성을 사용하는 입력 필드에 이 태그를 추가할 수 있습니다. for:

저희 코드는 다음을 반환합니다.


코드를 분석해 보겠습니다.

첫 번째 줄에서 태그를 사용하여 이메일 주소가 무엇입니까? 레이블을 웹 양식에 추가합니다. 속성을 지정하고 email_address 값을 할당했습니다. 이 값은 레이블을 ID가 email_address 인 양식 필드에 연결합니다.

줄 끝에
태그를 사용하여 코드에 빈 수평선을 삽입했습니다.

다음 줄에서 태그를 사용하여 텍스트 입력 필드를 만들었습니다. 이 입력 필드에는 입력 필드를 태그에 바인딩하는 데 사용하는 식별자 email_address 가 있습니다.

중첩 태그

또는 태그는 태그에 중첩되어 레이블을 생성합니다. 다음은 위의 웹 양식에 대한 중첩 레이블을 만드는 데 사용할 코드입니다.

귀하의 코드는 다음을 반환합니다:

우리의 양식은 첫 번째 예와 시각적으로 동일합니다. 그러나 이 예에서는 레이블을 양식에 바인딩하기 위해 for 속성을 사용하지 않습니다. 대신 태그를 태그 안에 넣어 두 HTML 태그를 함께 연결합니다.

HTML 레이블 액세스 가능성

h2>

를 사용하여 레이블을 디자인할 때 염두에 두어야 할 몇 가지 접근성 참고 사항이 있습니다.

첫째, 헤더는 내부에 배치되어서는 안 됩니다. 태그. 이는 태그의 헤더 요소가 웹 접근성을 높이는 데 사용되는 화면 읽기 기술 및 기타 도구를 방해할 수 있기 때문입니다. 따라서 양식 레이블에 헤더를 추가하려면 태그 외부에 헤더를 추가해야 합니다.

둘째, 버튼이나 태그 내부의 링크. 이는 태그의 대화형 요소가 사용자가 웹 양식의 작동 방식을 이해하는 데 혼동을 줄 수 있기 때문입니다. 예를 들어 에서 버튼을 사용할 수 있는 경우 사용자는 웹 양식과 상호 작용하기 위해 버튼을 클릭해야 한다고 생각할 수 있습니다.

결론

HTML 태그 는 양식 레이블을 만듭니다. 이 레이블은 특정 웹 양식에 연결되며 클릭하면 사용자가 양식과 상호 작용할 수 있습니다.

이 자습서에서는 예제를 참조하여 HTML 태그를 사용하여 양식 요소에 레이블을 추가하고 태그와 관련된 접근성 문제 이제 HTML 작업을 시작하는 데 필요한 지식을 얻었습니다. 전문가와 같은 태그 !