> 웹 프론트엔드 > HTML 튜토리얼 > HTML 양식 작성 시 레이블 태그를 사용하는 방법

HTML 양식 작성 시 레이블 태그를 사용하는 방법

不言
풀어 주다: 2021-04-22 15:51:57
원래의
7121명이 탐색했습니다.

HTML에서 양식을 생성할 때 라벨 라벨을 사용하는 방법: 1. 라벨 라벨 사이에 입력 라벨을 배치합니다. 2. ""을 사용합니다. .

HTML 양식 작성 시 레이블 태그를 사용하는 방법

이 문서의 운영 환경: Windows 7 시스템, Dell G3 컴퓨터, HTML5&&CSS3 버전.

레이블 태그는 폼을 생성할 때 매우 중요하므로 이번 글에서는 HTML로 폼을 생성할 때 레이블 태그의 사용법을 소개하겠습니다.

먼저 라벨이 무엇인지 살펴볼까요?

예를 들어 HTML로 테이블을 만들 때 텍스트 상자 옆에 "이름"과 같은 문자를 표시할 수 있고 라디오 버튼 옆에 "남성" 또는 "여성"과 같은 문자를 표시할 수 있는 것이 있습니다. 설명을 드려야 하는데, 가장 유용한 라벨은 '라벨 라벨'입니다.

라벨 라벨 작성 방법

라벨 라벨 작성 방법은 두 가지가 있습니다. 라벨 라벨 사이에 넣는 방법과 for 속성을 이용하는 방법이 있습니다.

라벨 태그 사이에 넣는 방식, 라벨 태그를 이용하면 폼의 여러 부분을 나눌 수 있음

<label> <input type =“radio”name =“sex”value =“man”/> man </ label>
로그인 후 복사

for 속성을 사용하는 방식

<label for =“text_id”>名称:</ label> 
<input type =“text”name =“name”id =“text_id”/>
로그인 후 복사

폼 부분의 id를 for에 부여하는 방법 라벨 태그의 속성

us 구체적인 예를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
</head>
<body>
<label for ="name">名字</label>
    <input type ="text" name ="name" id ="name" placeholder ="name"> <br/> 
    <label> <input type ="radio" name ="sex" value ="male">男</label> 
    <label> <input type ="radio" name ="sex" value ="female">女</label> <br/> 
    <label for ="food">最喜欢的食物</label> 
    <select name ="food" id ="name">
      <option value ="meat"> meat </option> 
      <option value ="fish"> fish </option> 
      <option value ="vegetable"> vegetables </option> 
      <option value ="other">其他</option>
    </select> 
</body>
</html>
로그인 후 복사

효과는 다음과 같습니다.

HTML 양식 작성 시 레이블 태그를 사용하는 방법

인터랙티브 콘텐츠의 예

인터랙티브 콘텐츠는 사용자가 용어를 확인해야 하는 콘텐츠를 말합니다. 서비스 체크박스.

이용약관 동의 체크박스를 체크하시면 태그블록 외부에 기술하여 사용성을 높일 수 있습니다.

사용성이 낮은 예:

<label> 
 <input type ="checkbox" name ="sample"> 
 我同意<a href="sample.html">服务条款</a>。
 </ label>
로그인 후 복사

사용성이 약간 향상된 예:

<label> 
 <input type ="checkbox" name ="sample"> 
 我同意服务条款。</ label>
  <p> 
 <a href="sample.html">服务条款</a> 
 </p>
로그인 후 복사

위는 이 기사의 전체 내용입니다. 더 흥미로운 내용은 PHP 중국어 웹사이트의 html 비디오 튜토리얼 열을 참조하세요. ! ! !

위 내용은 HTML 양식 작성 시 레이블 태그를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿