Cliniborg Editable Form Sections

Edit any section below, then copy the content for your Jekyll markdown files:

Front Matter

YAML front matter for Jekyll

--- layout: post title: "<!-- EDIT_START -->form element reference<!-- EDIT_END -->" author: - <!-- EDIT_START -->Mark Morgan<!-- EDIT_END --> date: <!-- EDIT_START -->2025-04-13 06:15 -0600<!-- EDIT_END --> published: true categories: [<!-- EDIT_START -->'Allergy & Otolaryngology', 'Assessment & Plan', 'Cardiovascular', 'Complete Note', 'Dermatology & Wounds', 'Endocrine, Nutrition & Obesity', 'Ethics', 'Female Health', 'Finance', 'Gastroenterology & Hepatology', 'General & Administrative', 'Geriatrics & Longevity', 'Hematology & Oncology', 'Infectious Disease', 'Injury & Poisoning', 'Javascript', 'Magic Eight Ball', 'Male Health', 'Miscellaneous', 'Musculoskeletal & Rheumatology', 'Nephrology', 'Neurology', 'Objective/Exam', 'Obstetrics', 'Ophthalmology', 'Pediatrics', 'Procedure Note', 'Psychiatry & Psychology', 'Pulmonology', 'Spreadsheet', 'Subjective/History'<!-- EDIT_END -->] ---

CSS & JavaScript Includes

Required assets for forms

<!-- included css and javascript --> <link rel="stylesheet" id="form-css-css" href="/assets/css/form-style.css"> <script id="jquery-core-js" src="/assets/js/jquery.min.js"></script> <script id="jquery-ui-js" src="/assets/js/jquery-ui.min.js" defer="defer" type="text/javascript"></script> <script id="js-interpreter-j" src="/assets/js/acorn_interpreter.js" defer="defer" type="text/javascript"></script> <script id="bootstrap-js" src="/assets/js/bootstrap.bundle.min.js" defer="defer" type="text/javascript"></script> <script id="site-script-js" src="/assets/js/script.js" defer="defer" type="text/javascript"></script> <script id="form-script-js" src="/assets/js/form.js" defer="defer" type="text/javascript"></script>

Form Container Start

Opening tags for the form

<!-- top of form area --> <section> <div id="form-view" class="tab-pane form-view-content active"> <p id="element-count" style="display: none"></p> <form id="cliniborg-form" autocomplete="off">

Boilerplate

Static text section

<!-- boilerplate --> boilerplate:<br> text is entered here<br>

Text Box

Basic text input fields

<!-- text box --> text box:<br> <input class="cliniborg-input text" type="text" value="<!-- EDIT_START --><!-- EDIT_END -->" data-type="text box" size="15" name="<!-- EDIT_START -->text_name<!-- EDIT_END -->"><br> <input class="cliniborg-input text" type="text" value="<!-- EDIT_START --><!-- EDIT_END -->" data-type="text box" size="5" name="<!-- EDIT_START -->text_name<!-- EDIT_END -->"><br>

Textarea (Vanilla)

Standard textarea with speech input

<!-- textarea --> textarea:<br> <!-- vanilla text area --> <div class="si-wrapper"><textarea class="cliniborg-input textarea <!-- EDIT_START -->textarea_name<!-- EDIT_END -->" cols="60" rows="5" name="<!-- EDIT_START -->textarea_name<!-- EDIT_END -->" data-type="text area"></textarea><button type="button" class="si-btn exclude" title="Start Voice Input">speech input<span class="si-mic"></span></button></div><br>

Textarea (Fillable)

Textarea with fillable template items

<!-- fillable text area (uses *** and ***) --> <input class="fillable-btn exclude" type="button" value="Fillable"> <span class="exclude"><span class="key ctrl-key">Ctrl</span> + <span class="key">→</span> (or <span class="key">←</span>)</span><br><div class="si-wrapper"><textarea class="cliniborg-input textarea fillable-textarea <!-- EDIT_START -->textarea_name<!-- EDIT_END -->" cols="60" rows="5" name="<!-- EDIT_START -->textarea_name<!-- EDIT_END -->" data-type="text area">***item one*** ***item two*** ***item three***</textarea><button type="button" class="si-btn exclude" title="Start Voice Input">speech input<span class="si-mic"></span></button></div><br>

Textarea (Sortable)

Textarea with sortable content

<!-- sortable text area --> <input class="sortable-btn exclude" type="button" value="Sortable"><br><div class="si-wrapper"><textarea class="cliniborg-input textarea sortable-textarea <!-- EDIT_START -->textarea_name<!-- EDIT_END -->" cols="60" rows="5" name="<!-- EDIT_START -->textarea_name<!-- EDIT_END -->" data-type="text area"> #1 a thing a another thing c yet another thing b some thing #4 this #2 that 3 the other 2 who 1 what </textarea><button type="button" class="si-btn exclude" title="Start Voice Input">speech input<span class="si-mic"></span></button></div><br>

Select Dropdown

Standard select dropdown elements

<!-- select --> select<br> <select class="cliniborg-input select" name="<!-- EDIT_START -->variable_1<!-- EDIT_END -->" data-type="drop down"><option value="No (0 points)=0">No (0 points)</option><option value="Yes (1 point)=1">Yes (1 point)</option></select> &lt;-- Question 1?<br> <select class="cliniborg-input select" name="<!-- EDIT_START -->variable_2<!-- EDIT_END -->" data-type="drop down"><option value="No (0 points)=0">No (0 points)</option><option value="Yes (1 point)=1">Yes (1 point)</option></select> &lt;-- Question 2?<br> <select class="cliniborg-input select" name="<!-- EDIT_START -->variable_3<!-- EDIT_END -->" data-type="drop down"><option value="No (0 points)=0">No (0 points)</option><option value="Yes (1 point)=1">Yes (1 point)</option></select> &lt;-- Question 3?<br>

Checkbox

Single checkbox with memo

<!-- checkbox --> checkbox<br> <span class="checkbox cliniborg-input " name="<!-- EDIT_START -->checkbox_name<!-- EDIT_END -->" data-type="checkboxes"> <label><input type="checkbox" name="<!-- EDIT_START -->checkbox_name<!-- EDIT_END -->" value=""></label> <span class="memo exclude">memo text for checkbox</span></span><br>

Checklist

Multiple checkboxes in a group

<!-- checklist --> checklist<br> <span class="checklist cliniborg-input" name="checklist_name" data-type="check list"><label><input type="checkbox" name="<!-- EDIT_START -->checklist_name<!-- EDIT_END -->" value="value_1"> item_1</label> <label><input type="checkbox" name="<!-- EDIT_START -->checklist_name<!-- EDIT_END -->" value="value_2"> item_2</label> <label><input type="checkbox" name="<!-- EDIT_START -->checklist_name<!-- EDIT_END -->" value="value_3"> item_3</label> <label><input type="checkbox" name="<!-- EDIT_START -->checklist_name<!-- EDIT_END -->" value="value_4"> item_4</label> <span class="memo exclude">memo text for checklist</span></span><br><br>

Radio Buttons

Radio button group

<!-- radio --> radio<br> <span class="radio cliniborg-input multiline" name="radio_one" data-type="radio buttons"> <label><input type="radio" name="radio_one" value="example one"/>example one</label> <label><input type="radio" name="radio_one" value="example two"/>example two</label> <label><input type="radio" name="radio_one" value="example three"/>example three</label><span class="memo exclude">memo text for radio</span></span><br><br>

Date Fields

Various date input formats

<!-- date --> date<br> the date and time right now is: <input type="text" class="cliniborg-input date date_timestamp" value="" data-type="date" size="20" name="date_one" data-format="mm-dd-yy"><br> the date (without time) right now is: <input type="text" class="cliniborg-input date date_today" value="" data-type="date" size="10" name="date_two" data-format="mm-dd-yy"><br> a third date is: <input type="text" class="cliniborg-input date" value="" data-type="date" size="10" name="date_three"><br>

Variable Display

Displaying variable values

<!-- var --> var<br> Here is the third date again: <span class="var" name="date_three" data-type="variable"><span class="memo">date_three</span></span><br><br>

Comment

Non-output comment text

<!-- comment --> comment<br> <span class="memo exclude">this is a comment that doesn't end up in the final output</span><br><br>

Link

External and internal links

<!-- link --> link<br> <a href="//www.ncbi.nlm.nih.gov/pubmed/9428249" target="_blank" class="link exclude">#1</a> Wells (1997) Lancet 350:1795-8<br><br> <a href="#boo" class="link exclude">Here is an internal link</a><br>

Mark (Anchor)

Anchor point for internal links

<!-- mark --> mark<br> <a id="boo" class="memo exclude ">boo - the internal link (called 'mark') above goes down to here</a><br><br>

Conditional

Conditionally displayed content

<!-- conditional --> conditional<br> <span id="conditional_one" class="conditional hidden" data-fields="checkbox_name" data-condition="(checkbox_name).is('')" data-type="conditional">shown and hidden based on checkbox above</span><br><br>

Calculation

Simple score calculation

<!-- calc --> calc<br> <span class="calc" data-type="calculation"><span class="memo">score</span><span class="calc_value">score=(variable_1)+(variable_2)+(variable_3)</span></span><br><br>

Calculation with Interpretation

Calculation with conditional interpretation

<!-- calc with interpretation --> calc with interpretation<br> <span class="calc" data-type="calculation"><span class="memo">interpretation</span><span class="calc_value">score=(variable_1)+(variable_2)+(variable_3);score&gt;1?'Severe':score&gt;0?'Moderate':'Asymptomatic'</span></span><br><br>

Form Container End

Closing tags and form buttons

<!-- form elements can be added above this --> <p style="color: red"></p> </form> <div class="cliniborg-form-buttons exclude"> <button class="btn btn-outline-secondary cliniborg_submit">Calculate The Result!</button> <button class="btn btn-outline-secondary cliniborg_reset">Reset Form</button> </div> <div id="cliniborg-result-container" class="cliniborg-result-container exclude mt-4"> <h3>Result - Copy and paste this output:</h3> <textarea id="cliniborg-result" class="cliniborg-result exclude" cols="80" rows="12" readonly="readonly" autocomplete="off"></textarea> <div id="cliniborg-result-buttons"> <button class="btn btn-outline-secondary copybtn" data-bs-toggle="tooltip" data-bs-trigger="manual" data-bs-title="Copied" data-clipboard-target="#cliniborg-result" data-bs-original-title="Copy the result to Clipboard">Copy to Clipboard</button> </div> </div> </div> </section>