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,valueThe
typeattribute 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
typeattribute can have the following values:submit,reset,button.
1.12 Select Tag
<select>:Allowed attributes:
name,multiple,disabled,size.The
onchangeattribute 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 theonchangeis 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.
lengthExample values:
3rem,2px,10mm,3em,2ex,8cm,2pt,8pcPractical example:
font-size: 2.5rem;
percentageExample values:
12%,5%Practical example:
font-size: 3%;
angleExample values:
5deg,5grads,7radPractical example:
elevation: 3deg;
numberExample 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
systemColorValues:
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
rgbCodeExample values:
rgb(0,128,64),rgb(255,255,255)Practical example:
systemColor: rgb(0,128,64);
colorCodeExample values: basically 3 or 6-digit hex code
#ffffff→ white#000000→ black#0f0→ lime green#abc→ shorthand for#aabbcc
cssOnsiteUritimefrequencyintegerpositiveLengthpositivePercentagecssIdentifiernumberOrPercent
Only the following CSS properties are allowed:
2.1 Text Styling
fontAllowed values:
/,caption,icon,menu,message-box,small-caption,status-bar,inherit
font-sizeAllowed values:
inherit,absolute-size,relative-size,lenght,percentage
font-size-adjustAllowed values:
none,inherit,number
font-stretchAllowed values:
normal,wider,narrower,ultra-condensed,extra-condensed,condensed,semi-condensed,semi-expanded,expanded,extra-expanded,ultra-expanded,inherit
font-styleAllowed values:
normal,italic,oblique,inherit
font-variantAllowed values:
normal,small-caps,inherit
font-weightAllowed values:
normal,bold,bolder,lighter,100,200,300,400,500,600,700,800,900,inherit
font-familiyAllowed values:
serif,arial,lucida console,sans-serif,cursive,verdana,fantasy,monospace
text-alignAllowed values:
left,right,center,justify,inherit
text-decorationAllowed values:
none,underline,overline,line-through,blink,inherit
line-heightAllowed 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.