HTML의 필드세트 태그

HTML의 fieldset 태그는 특정 요소, 일부 관련 요소를 한 장소(일반적으로 양식) 안에 모으는 데 도움이 됩니다. <필드세트> 태그는 논리에 따라 관련 요소를 그룹화합니다. fieldset 태그를 사용하면 위에서 언급한 관련 요소 주위에 블록이나 경계를 만듭니다. 이 태그는 양식 섹션을 여러 논리적 섹션으로 나누는 데 도움이 됩니다.

즉,

태그는 레이아웃을 정의하는 데 도움이 되므로 테이블이나 구분과 같은 다른 수단을 사용하지 않고도 양식을 논리적 필드로 구성하고 구분할 수 있습니다. fieldset 태그에는

조각난 섹션의 캡션과 같이 텍스트를 정의하는 데 사용되는 태그입니다.

사용을 위한 구문은 무엇입니까? 요소?

실제로

를 사용하는 것은 간단합니다. 태그 또는 요소. 다른 모든 HTML 태그와 마찬가지로

태그에도 여는 태그와 닫는 태그가 있습니다. 여는 태그는

닫는 태그에는

과 같이 태그 이름 앞에 일반적인 슬래시가 있습니다.

의 구문을 확인하세요. 태그.

구문:

<form>
<fieldset>
</fieldset>
</form>

의 예를 제공하는 간단한 코드 발췌를 살펴보세요. 및 <전설> 아래:

<form>
<fieldset style="background:#e1eff2;">
<legend>Personal Information:</legend>
<div><label>Name:</label><input type="text"></div>
<div><label>Email:</label><input type="text"></div>
<div><label>DOB:</label><input type="text"></div>
<div><label>Place:</label><input type="text"></div>
</fieldset>
</form>

출력:

위에서 설명한 대로

위 코드에 사용된 요소는 HTML 형식으로 그룹화를 제공합니다.

를 사용하여 생성된 필드 세트 상단의 캡션을 확인하세요. 요소.

의 또 다른 좋은 사용법 및 <전설> 요소는 입력 유형 '체크박스' 또는 '라디오'와 함께 사용되며, 특히 다양한 옵션에 대한 집합적 컨텍스트를 제공하기 어려워지고 각 옵션과 연관되는 경우 더욱 그렇습니다.

HTML의 Fieldset 태그 속성

요소는 아래에 언급된 추가 속성을 지원하는 다양한 전역 속성을 지원합니다.

1. 장애인

'disabled' 속성은 'disabled'를 값으로 사용합니다. 이 속성이 사용되면 이 속성이 사용되는 요소 그룹이 비활성화됨을 나타냅니다.

다음은 속성 중 하나인 'disabled'와 함께 fieldset 요소를 사용하는 예제 코드 발췌입니다.

코드:

<fieldset style="background:#e1eff2;" disabled="disabled">
<legend>Personal Information:</legend>
<div><label>Name:</label><input type="text"></div>
<div><label>Email:</label><input type="text"></div>
<div><label>DOB:</label><input type="text"></div>
<div><label>Place:</label><input type="text"></div>
</fieldset>

출력:

'disabled'에 대한 속성 값을 'disabled'로 설정했기 때문에 모든 하위 요소가 비활성화되어 편집할 수 없습니다.

2. 양식

'form' 속성은 다양한 형식의 식별자를 하나 이상 포함하는 데 사용됩니다. 이는 관련 요소 그룹이 속하거나 속할 식별자를 정의합니다. 'form' 속성은 양식 ID를 사용하여 양식을 정의합니다. 양식 식별자가 두 개 이상인 경우 모두 포함되고 공백으로 구분됩니다.

즉, 필드 세트가 양식 외부에 정의된 경우에도 필드 세트를 해당 부분으로 만들기 위해 양식/양식 요소의 'id' 속성에서 값을 가져오는 속성입니다.

form 속성은 Opera 12 이하 버전에서만 지원됩니다.

3. 이름

'이름' 속성은 그룹화된 항목의 이름을 정의하거나 요소 그룹에 합류했습니다. 이 속성은 'text'를 값으로 사용합니다. 이 '이름'은 브라우저에 표시되지 않습니다. 그 사용은 스크립트 작업으로 제한됩니다.

다음은 '이름' 속성이 있는 필드 세트의 예입니다.

코드:

<form>
<fieldset style="background:#e1eff2;" name="PersonalInformation" >
<legend>Personal Information:</legend>
<div><label>Name:</label><input type="text"></div>
<div><label>Email:</label><input type="text"></div>
<div><label>DOB:</label><input type="text"></div>
<div><label>Place:</label><input type="text"></div>
</fieldset>
<br />
<button type = "button" onclick="form.PersonalInformation.style.backgroundColor='LIGHTSALMON'"> Change background color of fieldset</button>
</form>

출력:

필드 세트에 속성 '이름'과 값을 '개인 정보'로 부여한 것을 확인하세요. 브라우저에는 표시되지 않습니다. 하지만 우리는

스크립트 작업을 위한 배경 요소입니다.

“필드셋의 배경색 변경” 버튼을 클릭하면 양식이 다음과 같이 응답합니다.

CSS 스타일링의 HTML 필드셋 태그

다른 HTML 요소와 마찬가지로

시각적 효과를 위해 요소를 변경할 수도 있습니다. HTML 태그나 요소에는 하나 이상의 속성이 포함될 수 있습니다. 이렇게 추가된 속성이나 속성은 브라우저에 요소 효과에 대한 더 많은 데이터나 정보를 제공합니다. 속성은 일반적으로 속성 이름과 할당된 값으로 구성됩니다. 예:

<strong>style="color:black";</strong>

의 모양과 느낌을 변경하는 데 사용할 수 있는 속성 글꼴 스타일, 글꼴 모음, 크기, 두께 등을 포함합니다.

Below is another example using the above-mentioned properties. CSS can do wonders. Observe the before and after-effects.

Without CSS

Code:

<form>
<fieldset style="background:#e1eff2"; name="PersonalInformation" >
<legend>Personal Information:</legend>
<div><label>Name:</label><input type="text"></div>
<div><label>Email:</label><input type="text"></div>
<div><label>DOB:</label><input type="text"></div>
<div><label>Place:</label><input type="text"></div>
</fieldset>
<br />
<button type = "button" onclick="form.PersonalInformation.style.backgroundColor='LIGHTSALMON'"> Change background color of fieldset</button>
</form>

Output:

With CSS

Code:

<form>
<fieldset style="background:#e1eff2"; name="PersonalInformation" >
<legend>Personal Information:</legend>
<div><label>Name:</label><input type="text"></div>
<div><label>Email:</label><input type="text"></div>
<div><label>DOB:</label><input type="text"></div>
<div><label>Place:</label><input type="text"></div>
</fieldset>
<br />
<button type = "button" onclick="form.PersonalInformation.style.backgroundColor='LIGHTSALMON'"> Change background color of fieldset</button>
</form>

Output:

Conclusion

The and

tags are the most underused tags while creating web forms. The

tag allows every radio or checkbox or text box grouped together to be labeled as a whole while also being separately labeled. The

and

elements are helpful when assisting technology like JAWS is being used. It’s known that many screen readers read legend text first and then the label texts.

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