HTML5 양식용 CSS 스타일 만들기 creating-css-styles-for-html-forms

XFA 기반 양식 템플릿의 HTML5 렌디션은 여러 HTML 요소로 구성됩니다. 이러한 요소는 순서대로 배열됩니다. 모든 요소에는 잘 정의된 CSS 클래스가 있습니다. 이러한 CSS 클래스를 사용하여 요소의 모양을 선택하고 변경할 수 있습니다.

CSS 클래스  요소  css-classes-nbsp-for-elements-nbsp

모든 요소에는 잘 정의된 CSS 클래스가 포함되어 있습니다. 이러한 클래스를 수정하여 요소의 모양을 변경할 수 있습니다. 필드 및 그리기 요소를 제외한 모든 요소에는 두 개의 CSS 클래스(Type 클래스와 Name 클래스)가 있습니다.

AEM Forms Designer에서 이름이 지정되지 않은 페이지의 경우 HTML5 양식의 페이지가 해당 번호의 증가 순서로 이름이 지정됩니다. 예를 들어 페이지가 두 개인 HTML 5 양식의 경우 페이지 이름은 Page1, Page2입니다.

필드 요소 field-element

필드 요소에는 위젯과 캡션이라는 두 가지 중첩된 요소가 포함되어 있습니다.

위젯 요소

위젯 요소에는 사용자와의 상호 작용을 위한 사용자 인터페이스 요소가 포함됩니다. 여기에는 세 개의 CSS 클래스가 있습니다.

<!--field with caption-->
<div class="field numericfield NumericField3 ">
     <div class="caption">
        caption content
     </div>
     <div class="widget numericfieldwidget numericInput">
       widget content
     </div>
</div>

<!--field without caption-->
<div class="widget numericfieldwidget numericInput">
   widget content
</div>

형식 및 이름 클래스 외에도 필드 구성 요소에는 subtype(이)라는 추가 CSS 클래스도 포함됩니다. 하위 유형은 NumericField, DateField, TextField와 같이 해당 필드의 유형을 식별합니다. subtype 클래스를 재정의하여 type, subtype의 모든 필드 스타일을 수정할 수 있습니다.

다른 구성 요소에 대한 CSS 클래스 css-classes-for-different-components

다른 필드에 대한 CSS 클래스 css-classes-for-different-fields

AEM Forms Designer은 NumericField, DecimalField 및 Date Field와 같은 양식에서 다양한 유형의 필드를 지원합니다. HTML의 이러한 모든 필드에는 위에서 언급한 CSS 클래스가 포함되어 있습니다. 또한 필드 유형에 따라 몇 가지 추가 클래스가 포함되어 있습니다.

모든 필드에는 UI 요소를 나타내는 연관된 위젯이 있습니다. 각 필드의 클래스 및 각 필드와 연결된 위젯이 아래에 나열됩니다.

다양한 Draw 요소용 CSS 클래스 css-classes-for-different-draw-elements

AEM Forms Designer을 사용하여 텍스트 및 이미지와 같은 정적 그리기 요소를 삽입할 수 있습니다. 각 그리기 요소에 대해 별도의 CSS 클래스가 해당 요소와 연결됩니다. 그리기 요소의 CSS 클래스 목록은 아래에 나와 있습니다. 모든 그리기 요소에는 그리기 클래스가 연결되어 있습니다.

양식의 다른 부분 스타일링 styling-other-parts-of-the-form

HTML 양식에 UI 구성 요소가 표시되는 것 외에도 인라인 오류, 인라인 경고 및 유효성 검사 오류가 있는 필드와 같은 요소의 스타일을 변경할 수 있습니다.

Styling Inline Errors

필드의 유효성 검사에서 오류가 발생하면 필드가 활성 상태일 때 인라인 오류가 표시됩니다. 인라인 오류의 스타일을 변경하려면 CSS ID error-msg ​을(를) 재정의합니다.

Styling Inline Warnings

필드의 유효성 검사로 인해 경고가 발생하면 필드가 활성 상태일 때 인라인 경고가 표시됩니다. 이러한 인라인 경고의 스타일을 변경하려면 CSS ID warning-msg ​를 재정의합니다.

Styling Fields with Validation Errors

필드 유효성 검사가 실패하면 위젯 스타일이 변경됩니다. 이 스타일 변경은 위젯 구성 요소에 CSS 클래스 widgetError ​을(를) 적용하여 수행됩니다. 기본 스타일을 수정하려면 widgetError 클래스를 재정의합니다.