Purpose
...
Table of Contents | ||
---|---|---|
|
1. Allowed Tags Overview
Tags with action="validate"
are allowed. Here are the approved categories and their attributes:Patients Know Best’s care plans accept HTML and CSS for rich multimedia displays of information to the patient. For security purposes, PKB cannot accept all tags in the medical record. This guide shows what care tags work and how they work within a care plan.
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 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
(onlystatic
,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
...
Only use values explicitly listed in
<literal-list>
or<regexp-list>
.
...
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
...
Code Block |
---|
<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
...
Code Block |
---|
<hr style="height: 3px; background-color: #f5f8f9; margin-top: 40px; margin-bottom: 40px;"/> |
...
3. 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 asid
.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
...
Code Block |
---|
<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> |
...
4. Text Input
Tag:
<input>
Purpose: Creates a single-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 input.Inline styles (
style
): Only validated properties such as:width
...
Code Block |
---|
<div class="row" style="margin-top: 15px;"> <div class="col-sm-12"> <label for="cp_"></label> <input type="text" name="REPLACE" id="REPLACE" class="form-control" style="width: 100%;"/> </div> </div> |
...
5. Date Input
Tag:
<input>
Purpose: Creates a date picker field for users to select a date.
Allowed Attributes
type
: Must be set todate
.id
: Unique identifier following the regex pattern[a-zA-Z0-9\-_\$]+
.name
: Specifies the name for the input element in the form submission, following the same regex asid
.placeholder
: Provides a hint 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 aswidth
.value
: Specifies a pre-filled date value, matching theyyyy-mm-dd
format.
...
Code Block |
---|
<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> |
...
6. Checkbox
Tags:
<input>
and<label>
Purpose: Allows users to select multiple options from a group.
Allowed Attributes:
type
: Must becheckbox
.id
: Unique identifier.name
: Groups related checkboxes for submission.value
: Specifies the value of the checkbox.
...
Code Block |
---|
<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> |
...
7. Radio Buttons
Tags:
<input>
and<label>
Purpose: Allows users to select one option from a group.
Allowed Attributes:
type
: Must beradio
.id
: Unique identifier.name
: Groups related radio buttons.value
: Specifies the value of the button.
...
Code Block |
---|
<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> |
...
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
Code Block |
---|
<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.
...
Code Block |
---|
<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:
Code Block |
---|
<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. The examples given conform with WCAG AA accessibility and system styling. It is strongly recommended to use these examples to maintain this useability.
Appendix: Allowed CSS Properties
This section lists all the CSS properties and their permissible values that are allowed through the validator.
...
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
.
Appendix: Raw XML list
Code Block |
---|
-- tag rules
tag name="iframe"
tag name="label"
tag name="form"
tag name="button"
tag name="input"
tag name="select"
tag name="option"
tag name="optgroup"
tag name="textarea"
tag name="h1"
tag name="h2"
tag name="h3"
tag name="h4"
tag name="h5"
tag name="h6"
tag name="p"
tag name="i"
tag name="b"
tag name="u"
tag name="strong"
tag name="em"
tag name="small"
tag name="big"
tag name="pre"
tag name="code"
tag name="cite"
tag name="samp"
tag name="sub"
tag name="sup"
tag name="strike"
tag name="center"
tag name="blockquote" action="va
tag name="hr"
tag name="br"
tag name="s"
tag name="ins"
tag name="del"
tag name="strike"
tag name="tt"
tag name="big"
tag name="caption"
tag name="q"
tag name="font"
tag name="a"
tag name="base"
tag name="style"
tag name="span"
tag name="div"
tag name="img"
tag name="ul"
tag name="ol"
tag name="li"
tag name="dd"
tag name="dl"
tag name="dt"
tag name="thead"
tag name="tbody"
tag name="tfoot"
tag name="table"
tag name="td"
tag name="th"
tag name="tr"
tag name="colgroup"
tag name="col"
tag name="fieldset"
tag name="details"
tag name="summary"
tag name="legend"
--CSS rules
property name="azimuth"
property name="background"
property name="background-attachment
property name="background-color
property name="background-image
property name="background-position
property name="background-repeat
property name="background-size
property name="border-collapse
property name="border-color
property name="border-top
property name="border-right
property name="border-bottom
property name="border-left
property name="bottom"
property name="caption-side
property name="clear"
property name="color"
property name="cue-after
property name="cue-before
property name="direction"
property name="display"
property name="elevation"
property name="empty-cells
property name="float"
property name="font-size
property name="font-size
property name="font-stretch
property name="font-style
property name="font-variant
property name="font-weight
property name="height"
property name="left"
property name="letter-spacing
property name="line-height
property name="list-style
property name="list-style
property name="list-style
property name="marker-offset
property name="max-height
property name="max-width
property name="min-height
property name="min-width
property name="orphans"
property name="outline-color
property name="overflow"
property name="page-break
property name="page-break
property name="page-break
property name="pause-after
property name="pause-before
property name="pitch"
property name="pitch-range
property name="position"
property name="richness"
property name="right"
property name="size"
property name="speak"
property name="speak-header
property name="speak-numeral
property name="speak-punctuation
property name="speech-rate
property name="stress"
property name="table-layout
property name="text-indent
property name="text-transform
property name="top"
property name="unicode-bidi
property name="vertical-align
property name="visibility"
property name="volume"
property name="white-space
property name="widows"
property name="width"
property name="word-spacing
property name="word-wrap
property name="border-style
property name="border-top
property name="border-right
property name="border-bottom
property name="border-left
property name="border-top
property name="border-right
property name="border-bottom
property name="border-left
property name="border-width
property name="margin"
property name="margin-top
property name="margin-right
property name="margin-bottom
property name="margin-left
property name="outline-style
property name="outline-width
property name="padding"
property name="padding-top
property name="padding-right
property name="padding-bottom
property name="padding-left
property name="border"
property name="border-top
property name="border-right
property name="border-bottom
property name="border-left
property name="cue"
property name="list-style
property name="marks"
property name="outline"
property name="pause"
property name="text-decoration
property name="border-spacing
property name="clip"
property name="counter-increment
property name="clip"
property name="cursor"
property name="text-shadow
property name="font"
property name="font-family
property name="page"
property name="play-during
property name="text-align
property name="voice-family
property name="position"
property name="border-radius
property name="opacity" |
...
This list represents all CSS properties and their values that the validator allows.
...
Notes
If specific use cases fall outside these guidelines, consult with a PKB team member for validation.