Care Plan HTML and CSS usage
- 1 1. Allowed Tags Overview
- 2 2. Allowed CSS Properties
- 3 3. Usage Rules
- 4 Appendix: Working Examples
- 5 1. Section Divider
- 6 2. Separator
- 7 3. Textarea
- 8 4. Text Input
- 9 5. Date Input
- 10 6. Time Input
- 11 7. Number Input
- 12 8. Checkbox
- 13 9. Radio Buttons
- 14 10. Professional Lock Sections
- 15 11. Collapsible Section
- 16 12. Dropdowns
- 17 Notes
1. Allowed Tags Overview
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.0 Global Tag Attributes
We allow the following attributes on all the following tags except
base
,head
,html
,meta
,param
,script
,style
, andtitle
. Allowed attributes:id
,style
,title
,class
,lang
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>
,<pre>
,<cite>
,<samp>
,<s>
,<ins>
,<del>
,<caption>
,<q>
.
1.3 Input Tag
<input>
:Allowed attributes:
accesskey
,alt
,autocomplete
,checked
,disabled
,maxlength
,name
,placeholder
,readonly
,size
,src
,type
,usemap
,value
The
type
attribute can have the following values:hidden
,text
,radio
,checkbox
,submit
,button
,image
,file
,reset
,range
,number
,date
,time
,textarea
1.4 List Tags
<ul>
,<ol>
,<li>
.
1.5 Table Tags
<table>
,<thead>
,<tbody>
,<tfoot>
,<tr>
,<th>
,<td>
,colgroup
,col
.Allowed attributes:
align
,char
,charoff
,valign
,height
,width
.
1.6 Dictionary Tags
<dd>
,<dl>
,<dt>
.
1.7 Image Tag
<img>
:Allowed attributes:
src
,alt
,width
,height
,name
,border
,align
,hspace
,vspace
.
1.8 Anchor Tag
<a>
:Allowed attributes:
href
,target="_blank"
,onFocus
,onBlur
,nohref
,rel
,name
,alt
.
1.9 Iframe Tag
<iframe>
:Allowed attributes:
src
,allowfullscreen
,frameborder
,height
,mozallowfullscreen
,webkitallowfullscreen
,width
.
1.10 Label Tag
<label>
:Allowed attributes:
for
.
1.11 Button Tag
<button>
:Allowed attributes:
name
,value
,disabled
,accesskey
.The
type
attribute can have the following values:submit
,reset
,button
.
1.12 Select Tag
<select>
:Allowed attributes:
name
,multiple
,disabled
,size
.The
onchange
attribute can have one specific value, which updates the colour of the select field based on the answer that was chosen:this.className = ‘form-control ' + this.options[this.selectedIndex].className;
. Everything other value in theonchange
is filtered out. This feature works with three colours at the moment, which need to be added to the option tags’ class inside the select, these are the following:light-yellow-faded
,light-blue-faded
,light-green-faded
.
1.13 Option Tag
<option>
:Allowed attributes:
value
,label
,disabled
,selected
.
1.14 Textarea Tag
<textarea>
:Allowed attributes:
rows
,name
,placeholder
.
1.15 Font Tag
<font>
:Allowed attributes:
color
,face
,size
.
1.16 Fieldset Tag
<fieldset>
:Allowed attributes:
disabled
.
1.17 Details and Summary Tag
<details>
:No attributes allowed.
<summary>
:No attributes allowed.
<legend>
:No attributes allowed.
1.18 Empty Tags
Tags explicitly allowed to be empty:
<br>
,<hr>
,<a>
,<img>
,<link>
,<iframe>
,<script>
,<object>
,<applet>
,<frame>
,<base>
,<param>
,<meta>
,<input>
,<textarea>
,<embed>
,<basefont>
,<col>
,<div>
,<span>
,<td>
.
2. Allowed CSS Properties
There are some values, which listed in the allowed values, but they are more like representing what kind of value can be used. So for example there are the place in values like font-size: inherit
, this value can be used as such. However, e.g. length
is a representation of numeric value combined with length metric such as 12cm
. So in practice it looks the following: font-size: 12cm
and NOT font-size: length
Here we list the values with examples, which are representation of some metric rather than in place usable values.
length
Example values:
3rem
,2px
,10mm
,3em
,2ex
,8cm
,2pt
,8pc
Practical example:
font-size: 2.5rem;
percentage
Example values:
12%
,5%
Practical example:
font-size: 3%;
angle
Example values:
5deg
,5grads
,7rad
Practical example:
elevation: 3deg;
number
Example values: basically any number
Practical example:
font-size-adjust: 4;
colorName
Values:
aqua
,black
,blue
,fuchsia
,gray
,grey
,green
,lime
,maroon
,navy
,olive
,purple
,red
,silver
,teal
,white
,yellow
systemColor
Values:
activeborder
,activecaption
,appworkspace
,background
,buttonface
,buttonhighlight
,buttonshadow
,buttontext
,captiontext
,graytext
,highlight
,highlighttext
,inactiveborder
,inactivecaption
,inactivecaptiontext
,infobackground
,infotext
,menu
,menutext
,scrollbar
,threeddarkshadow
,threedface
,threedhighlight
,threedlightshadow
,threedshadow
,window
,windowframe
,windowtext
rgbCode
Example values:
rgb(0,128,64)
,rgb(255,255,255)
Practical example:
systemColor: rgb(0,128,64);
colorCode
Example values: basically 3 or 6-digit hex code
#ffffff
→ white#000000
→ black#0f0
→ lime green#abc
→ shorthand for#aabbcc
cssOnsiteUri
time
frequency
integer
positiveLength
positivePercentage
cssIdentifier
numberOrPercent
Only the following CSS properties are allowed:
2.1 Text Styling
font
Allowed values:
/
,caption
,icon
,menu
,message-box
,small-caption
,status-bar
,inherit
font-size
Allowed values:
inherit
,absolute-size
,relative-size
,lenght
,percentage
font-size-adjust
Allowed values:
none
,inherit
,number
font-stretch
Allowed values:
normal
,wider
,narrower
,ultra-condensed
,extra-condensed
,condensed
,semi-condensed
,semi-expanded
,expanded
,extra-expanded
,ultra-expanded
,inherit
font-style
Allowed values:
normal
,italic
,oblique
,inherit
font-variant
Allowed values:
normal
,small-caps
,inherit
font-weight
Allowed values:
normal
,bold
,bolder
,lighter
,100
,200
,300
,400
,500
,600
,700
,800
,900
,inherit
font-familiy
Allowed values:
serif
,arial
,lucida console
,sans-serif
,cursive
,verdana
,fantasy
,monospace
text-align
Allowed values:
left
,right
,center
,justify
,inherit
text-decoration
Allowed values:
none
,underline
,overline
,line-through
,blink
,inherit
line-height
Allowed values:
inherit
,normal
,number
,length
,percentage
Patients Know Best Wiki Hub | Deploy | Developer | Trust Centre | Manual | Research | Education | Release Notes
© Patients Know Best, Ltd. Registered in England and Wales Number: 6517382. VAT Number: GB 944 9739 67.