Page Comparison

...

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

...

2. 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: 53px3px; background-color: #F5F8F9#f5f8f9; textmargin-aligntop: center40px; margin-bottom: 15px40px;"/>
    <h2>Section Title</h2>
</div>

...

...

3. Textarea

• Tag: <input> <textarea>

• Purpose: Creates a singleAllows users to input multi-line text box where users can type information.

• Allowed Attributes:

  type

  :

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

  • 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 inputRequired 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-grouprow" style="margin-top: 15px;">
    <div class="col-sm-12">
        <label for="username">Usernamecp_">Enter your text:</label>
    <input type    <textarea class="textform-control" idname="usernameREPLACE" nameid="usernameREPLACE" classrows="form-control3" style="width: 100%;"></textarea>
    </>div>
</div>

...

4.

...

Text Input

• TagsTag: <details> and <summary> <input>

• Purpose: Creates an expandable section where the user can toggle visibility of the content by clicking a titlea single-line text box where users can type information.

• Allowed Attributes:

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

  • <summary>: Can include other valid tags (e.g., <div> and <span>) for styling.type: Specifies the type of input, e.g., text.

  • 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:

<details>
    <summary>
        <div class="row" collapsable-section-title-container cp_secondaryTitle">
style="margin-top: 15px;">
           <div class="col-sm-12">
        <label for="cp_"></label>
      <h3>Click to Expand</h3>
     <input type="text" name="REPLACE" id="REPLACE" class="form-control" style="width: 100%;"/>
      </div>
       
</div>
   
</summary>
    <p>This is the content inside the collapsible section.</p>
</details>

...

...

5. Date Input

• Tag: <textarea> <input>

• Purpose: Allows users to input multi-line textCreates a date picker field for users to select a date.

• Allowed Attributes

  • type: Must be set to date.

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

  • name: Required and follows Specifies the name for the input element in the form submission, following the same pattern regex as id.rows: Specifies the number of visible lines (positive integer).

  • placeholder: Optional text Provides a hint for the input area.

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

    • width

  • to the user, allowing any text string.

  • class: Assigns a CSS class to apply predefined styles (e.g., form-control).

  • style: Allows inline styles with validated CSS properties, such as width.

  • value: Specifies a pre-filled date value, matching the yyyy-mm-dd format.

Example:

<div class="form-grouprow" style="margin-top: 15px;">
    <div class="col-sm-12">
        <label for="comments">Your Commentscp_">Select a date:</label>
    <textarea id    <input type="commentsdate" name="commentsREPLACE" rowsid="4REPLACE" placeholderclass="Type here...form-control" styleplaceholder="width: 100%;"></textarea>
</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;" />

...

dd/mm/yyyy"/>
    </div>
</div>

...

6. Checkbox

• 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="form-grouprow" style="margin-top: 15px;">
    <div class="col-sm-12">
    <div>    <p>Choose options:</p>
    </div>
    <div class="col-sm-12">
        <div class="form-check col-xs-12 pull-left">
            <input class="form-check-input form-control" type="checkbox" idname="option1REPLACE" nameid="optionsREPLACE1" value="Option 1Option1" />
            <label class="col-xs-10 pull-right" for="option1REPLACE1">Option 1</label>
        </div>
        <div><div class="form-check col-xs-12 pull-left">
            <input class="form-check-input form-control" type="checkbox" idname="option2REPLACE" nameid="optionsREPLACE2" value="Option 2Option2" />
            <label class="col-xs-10 pull-right" for="option2REPLACE2">Option 2</label>
        </div>
    </div>
</div>

...

7. Radio Buttons

...

Example:

<div class="form-grouprow" style="margin-top: 15px;">
    <div class="col-sm-12">
        <p>Choose one:</p>
    </div>
    <div class="col-sm-12">
        <div class="form-check">
            <input class="form-check-input col-xs-1" type="radio" idname="yesREPLACE" nameid="choiceYes" value="Yes" />>
            <label class="form-check-label col-xs-10" for="yesYes">Yes</label>
        </div>
        <div class="form-check">
            <input class="form-check-input col-xs-1" type="radio" idname="noREPLACE" nameid="choiceNo" value="No" />>
            <label class="form-check-label col-xs-10" for="noNo">No</label>
        </div>
    </div>
</div>

...

8. Professional Lock Sections

• Tag: <fieldset>

• Purpose: The <fieldset> tag groups form elements and is used here to define content restricted for professional users.

• Allowed Attributes:

  • class: Used to apply specific styles; in this case, pro-only.

  • Inline styles (style): None

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

...

9. 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.

Basic Example:

<details>
    <summary>
        <div class="row collapsable-section-title-container cp_secondaryTitle">
            <div class="col-sm-12">
                <h3>Click to Expand</h3>
            </div>
        </div>
    </summary>
    <p>This is the content inside the collapsible section.</p>
</details>

Professional Lock Example:

<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>

...

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

...