Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 3 Next »

Purpose

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

1. Allowed Tags

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

1.1 Structural Tags

  • <div>: General block container.

  • <span>: General inline container.

1.2 Text Formatting Tags

  • <p>, <h1>–<h6>, <b>, <i>, <u>, <strong>, <em>, <small>, <sub>, <sup>, <blockquote>, <code>.

1.3 List Tags

  • <ul>, <ol>, <li>.

1.4 Table Tags

  • <table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, <td>.

1.5 Image Tags

  • <img>:

    • Allowed attributes: src, alt, width, height.

1.6 Anchor Tags

  • <a>:

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

1.7 Interactive Tags

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

  • HTML:

<div class="row" style="margin-top: 15px;">
    <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>
</div>

2.4 Text Input

  • Description: A single-line text input field.

  • HTML:

<div class="row" style="margin-top: 15px;">
    <div class="col-sm-12">
        <label for="cp_">Enter text:</label>
        <input type="text" name="REPLACE" id="REPLACE" 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:

<div class="row" style="margin-top: 15px;">
    <div class="col-sm-12">
        <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" name="REPLACE" id="REPLACE1" value="Option1"/>
            <label class="col-xs-10 pull-right" for="REPLACE1">Option 1</label>
        </div>
        <div class="form-check col-xs-12 pull-left">
            <input class="form-check-input form-control" type="checkbox" name="REPLACE" id="REPLACE2" value="Option2"/>
            <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.

  • HTML:

<div class="row" 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" name="REPLACE" id="Yes" value="Yes">
            <label class="form-check-label col-xs-10" for="Yes">Yes</label>
        </div>
        <div class="form-check">
            <input class="form-check-input col-xs-1" type="radio" name="REPLACE" id="No" value="No">
            <label class="form-check-label col-xs-10" for="No">No</label>
        </div>
    </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:

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

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

  • Allowed Values:

    • relative, absolute, static, inherit.

1.2 border-radius

  • Allowed Values:

    • Length values (e.g., px, em, %).

1.3 opacity

  • Allowed Values:

    • Numbers (0.0–1.0) or percentage values.

2. Background Properties

2.1 background

  • Description: Shorthand for other background-related properties.

  • Allowed Sub-Properties:

    • background-color

    • background-image

    • background-repeat

    • background-attachment

    • background-position

2.2 background-attachment

  • Allowed Values:

    • scroll, fixed, inherit.

2.3 background-color

  • Allowed Values:

    • Named colours (e.g., red, blue).

    • Hex codes (e.g., #ff0000, #fff).

    • RGB values (e.g., rgb(255, 0, 0)).

    • transparent, inherit.

3. Text and Visual Properties

3.1 color

  • Allowed Values:

    • Named colours (e.g., red, blue).

    • Hex codes (e.g., #ffffff, #000).

    • RGB values (e.g., rgb(255, 0, 0)).

    • System colours.

3.2 text-shadow

  • Allowed Values:

    • none, inherit.

    • Length values for offsets and colour values for shadows.

3.3 letter-spacing

  • Allowed Values:

    • normal, inherit, length values.

3.4 line-height

  • Allowed Values:

    • normal, inherit, number, length, or percentage.

3.5 word-spacing

  • Allowed Values:

    • normal, inherit, length values.

4. Box Model Properties

4.1 margin

  • Allowed Values:

    • auto, inherit, positive lengths or percentages.

4.2 border-spacing

  • Allowed Values:

    • inherit, lengths (positive only).

4.3 clip

  • Allowed Values:

    • auto, inherit.

4.4 overflow

  • Allowed Values:

    • visible, hidden, scroll, inherit.

5. List and Display Properties

5.1 list-style-type

  • Allowed Values:

    • disc, circle, square, decimal, lower-roman, upper-roman.

5.2 list-style-position

  • Allowed Values:

    • inside, outside, inherit.

5.3 list-style-image

  • Allowed Values:

    • none, inherit.

6. Interactive and Cursor Properties

6.1 cursor

  • Allowed Values:

    • auto, pointer, move, text, default, inherit.

6.2 outline-color

  • Allowed Values:

    • Colour values, invert, inherit.

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

  • No labels