...

This document outlines the allowed HTML tags and CSS properties within the application to ensure consistent, secure, and compliant usage.

...

1. Allowed Tags Overview

Tags with action="validate" are allowed. Here are the approved categories and their attributes:

...

• <a>:

  • Allowed attributes: href, target="_blank".

1.7

...

• <details>: Creates a collapsible section.

• <summary>: Defines a summary or title for the collapsible content.

2. Additional Components

2.1 Section Divider

• Description: Used for visually separating content with a secondary title.

• HTML:

<div class="cp_secondaryTitle">
    // Section Title Goes Here //
</div>

2.2 Separator

• Description: A styled horizontal line for separating sections visually.

• HTML:

<hr style="height: 3px; background-color: #f5f8f9; margin-top: 40px; margin-bottom: 40px;"/>

2.3 Textarea

...

Description: A text input area for multi-line content.

...

Empty Tags

Tags explicitly allowed to be empty:

• <br>, <hr>.

...

2. Allowed CSS Properties

Only the following CSS properties are allowed:

2.1 Text Styling

• font-size

• font-style

• font-weight

• text-align

• text-decoration

• line-height

• letter-spacing

• color

2.2 Box Model

• margin

• padding

• border

• width

• height

2.3 Background and Positioning

• background-color

• background-image

• position (only static, inherit)

...

3. Usage Rules

3.1 General Attributes

• The following attributes are allowed on all tags:

  • id

  • class

  • lang

  • title

• Attribute values must comply with regex rules defined in <common-regexps>:

  • id: Letters and numbers only.

  • Colours: #hex, named colours, rgb().

3.2 Value Restrictions

• Only use values explicitly listed in <literal-list> or <regexp-list>.

3.3 Empty Tags

• Use <br> or <hr> for line breaks or horizontal rules without adding content.

...

Appendix: Working Examples

...

1. Section Divider

• Tag: <div>

• Purpose: The <div> tag is used to create a section divider with specific styling, such as a background colour or alignment.

• Allowed Attributes:

  • class: Specifies a CSS class, e.g., cp_secondaryTitle.

  • Inline styles (style): Only validated properties such as:

    • height

    • background-color

    • text-align

    • margin-bottom

Example:

<div class="rowcp_secondaryTitle" style="margin-topheight: 15px53px;">
    <div class="col-sm-12">
        <label for="cp_">Enter your text:</label>
        <textarea class="form-control" name="REPLACE" id="REPLACE" rows="3" style="width: 100%;"></textarea>
    </div> background-color: #F5F8F9; text-align: center; margin-bottom: 15px;">
    <h2>Section Title</h2>
</div>

...

2.

...

Text Input

• Tag: <input>

• DescriptionPurpose: A Creates a single-line text box where users can type information.

• Allowed Attributes:

  • type: Specifies the type of input, e.g., text

  input field.HTML

  • .

  • id: Unique identifier following [a-zA-Z0-9\-_\$]+.

  • name: Used to identify the input when the form is submitted.

  • class: Assigns a CSS class to the input.

  • Inline styles (style): Only validated properties such as:

    • width

Example:

<div class="rowform-group" style="margin-top: 15px;">
    <div class="col-sm-12">
 
      <label for="cp_">Enter textusername">Username:</label>
        <input type="text" nameid="REPLACEusername" idname="REPLACEusername" class="form-control" style="width: 100%;" />
    </div>
</div>

2.5 Date Input

• Description: A date picker field for date inputs.

• HTML:

<div class="row" style="margin-top: 15px;">
    <div class="col-sm-12">
        <label for="cp_">Select a date:</label>
        <input type="date" name="REPLACE" id="REPLACE" class="form-control" placeholder="dd/mm/yyyy"/>
    </div>
</div>

2.6 Checkbox

• Description: A group of checkboxes for multiple selections.

• HTML:

...

3. Collapsible Section

• Tags: <details> and <summary>

• Purpose: Creates an expandable section where the user can toggle visibility of the content by clicking a title.

• Allowed Attributes:

  • <details>: No specific attributes are required for basic functionality.

  • <summary>: Can include other valid tags (e.g., <div> and <span>) for styling.

Example:

<details>
    <summary>
        <div class="row" style="margin-top: 15px;">
    <div class="col-sm-12collapsable-section-title-container cp_secondaryTitle">
        <p>Choose options:</p>     </div>
    <div class="col-sm-12">
         <div class="form-check col-xs-12 pull-left">    <h3>Click to Expand</h3>
      <input class="form-check-input form-control" type="checkbox" name="REPLACE" id="REPLACE1" value="Option1"/> </div>
        </div>
   <label class="col-xs-10 pull-right" for="REPLACE1">Option 1</label>
        </div>
         </summary>
    <p>This is the content inside the collapsible section.</p>
</details>

...

4. Textarea

• Tag: <textarea>

• Purpose: Allows users to input multi-line text.

• Allowed Attributes:

  • id: Unique identifier following [a-zA-Z0-9\-_\$]+.

  • name: Required and follows the same pattern as id.

  • rows: Specifies the number of visible lines (positive integer).

  • placeholder: Optional text hint for the input area.

  • Inline styles (style): Only validated properties such as:

    • width

Example:

<div class="form-check col-xs-12 pull-leftgroup" style="margin-top: 15px;">
    <label for="comments">Your Comments:</label>
    <textarea <input classid="form-check-input form-controlcomments" typename="checkboxcomments" namerows="REPLACE4" idplaceholder="REPLACE2Type here..." valuestyle="Option2width: 100%;"></>textarea>
            <label class="col-xs-10 pull-right" for="REPLACE2">Option 2</label>
        </div>
    </div>
</div>

2.7 Radio Buttons

...

Description: A group of radio buttons for single selection.

...

</div>

...

5. Separator

• Tag: <hr>

• Purpose: Creates a horizontal line to visually separate content.

• Allowed Attributes:

  • Inline styles (style): Only validated properties such as:

    • height

    • background-color

    • margin-top

    • margin-bottom

Example:

<hr style="height: 3px; background-color: #f5f8f9; margin-top: 40px; margin-bottom: 40px;" />

...

6. Checkbox Group

• Tags: <input> and <label>

• Purpose: Allows users to select multiple options from a group.

• Allowed Attributes:

  • type: Must be checkbox.

  • id: Unique identifier.

  • name: Groups related checkboxes for submission.

  • value: Specifies the value of the checkbox.

Example:

<div class="rowform-group" style="margin-top: 15px;">
    <div class="col-sm-12">
 <div>
       <p>Choose one:</p>
    </div>
    <div class="col-sm-12">
        <div class="form-check">
            <input class="form-check-input col-xs-1" type="radio<input type="checkbox" id="option1" name="REPLACEoptions" idvalue="YesOption 1" value="Yes">
 />
          <label classfor="form-check-label col-xs-10" for="Yes">Yes</label>
 option1">Option 1</label>
      </div>
    <div>
   <div class="form-check">
            <input classtype="form-check-input col-xs-1checkbox" typeid="radiooption2" name="REPLACEoptions" idvalue="NoOption 2" value="No"/>
            <label classfor="form-check-label col-xs-10" for="No">No</label>
        </div>
    option2">Option 2</label>
    </div>
</div>

2.8 Professional Lock Sections

• Description: Content restricted for professional users.

• HTML:

<fieldset class="pro-only">
    // Restricted content goes here //
</fieldset>

2.9 Collapsible Sections

Basic

• Description: A section that can be expanded or collapsed.

• HTML:

...

7. Radio Buttons

• Tags: <input> and <label>

• Purpose: Allows users to select one option from a group.

• Allowed Attributes:

  • type: Must be radio.

  • id: Unique identifier.

  • name: Groups related radio buttons.

  • value: Specifies the value of the button.

Example:

<div class="form-group" style="margin-top: 15px;">
    <input type="radio" id="yes"      <div class="col-sm-12"name="choice" value="Yes" />
                <h1>Clickable Title for the Section</h1><label for="yes">Yes</label>
            </div>
            <span class="icon details-closed"></span>
        </div>
    </summary>
    <p>This is the content of the collapsible section.</p>
</details>

Professional Lock

• Description: Collapsible section within a restricted area.

• HTML:

<fieldset class="pro-only">
    <details>
        <summary>
            <div class="row collapsable-section-title-container cp_secondaryTitle">
                <div class="col-sm-12">
                    <h1>Clickable Title for the Section</h1>
                </div>
                <span class="icon details-closed"></span>
            </div>
        </summary>
        <p>This is restricted collapsible content.</p>
    </details>
</fieldset>

<input type="radio" id="no" name="choice" value="No" />
    <label for="no">No</label>
</div>

...

This document only includes allowed tags and attributes based on the validator's configuration. Each example demonstrates practical usage for clarity.

Appendix: Allowed CSS Properties

This section lists all the CSS properties and their permissible values that are allowed through the validator, based on the original XML file.

...

1. General Properties

1.1 position

...

This list represents all CSS properties and their values that the validator allows.

...

Notes

If specific use cases fall outside these guidelines, consult with the development team for validation.