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 디자이너에서 이름이 지정되지 않은 HTML의 경우, page5 폼의 페이지는 숫자가 증가하는 순서로 이름이 지정됩니다. 예를 들어 페이지가 두 개인 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>

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

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

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

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

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

다른 그리기 요소에 대한 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 클래스.