- Form Controls
Form Controls is a library for cross-bowser styling of checkboxes, radio buttons, input fields and buttons. The library includes functionality which formats content, limits the amount of characters that should be allowed in an input field, or show the right keypad on mobile devices. In addition to functionality that can be used to make comboboxes (search fields / text in dropdown) and modals.
The purpose of this library is mainly to apply various functionality to your form. Styling has not been a priority, because styling differ in various projects depending on customers current graphical profile.
jQueryjQuery and jQuery Mask Plugin jQuery Mask Plugin are used in this library. .
In order to use this library, you will have to add these files:
- form-controls.min.js
- form-controls.min.css
- jquery.mask.min.js
Add it under C:\Tomcat\WEBAPPS in folder form-controls on the frontend-server you are using. PS! If this is an older server (before 04/20/2020) place it in the folder C:\Tomcat\WEBAPPS_CONTAINER or C:\Tomcat\WEBAPPS CONTAINER. It is important that files are placed in the right directory.
A deployment descriptor must be added to folder form-controls:
- Download form-controls.xml (https://github.com/MetafocusAS/form-controls/blob/master/form-controls.xml)
- Add form-controls.xml to C:\Tomcat\apache-tomcat-7.0.75\conf\Catalina\localhost (PS! the version number of apache-tomcat-7.0.75 will vary) on the front-end server.
It is best to include these files before you include other stylesheets, so it does not override other stylesheets. Open and close the browser to see if the script is successfully added (you do not have to restart the Tomcat application on your server).
To use the library in Digiforms Designer you will have to include it in the document or component you want to add it to. Add it like this: (Document settings > Includes):
- ../form-controls/form-controls.min.js
- ../form-controls/form-controls.min.css
The files in countries.zip should be added to the filepath Datasource/Countries/ in folder WEBAPPS/ROOT to prevent error messages. Countries_xx_XX.xml is a list of countries that is used in the combobox function.
https://dev4.digiforms.no/digiforms/htmlViewer?documentName=form-controls-demo
The library is tested and is working in these browsers:
- Chrome
- Firefox
- Opera
- Edge
- Internet Explorer 11
- Safari
It is also tested on some mobile devices (iPhone and Android).
- The css-classes are applied to the radio buttons to make them look appealing, but also to make them look identical in all browsers.
- They have a bigger “click area” which makes them easier to hit with the mouse pointer.
- The groupbox (div) around the checkboxes must have the class checkbox-container
- Apply css-classes control-row and checkbox-row to the groupbox (div) which is placed around the checkboxes. (PS! in Digiforms Designer this div is called 'a "Label")
<div id="id-5d6d17f0-02c4be20" class="checkbox-container">
<fieldset>
<legend id="id-5d6d17f0-02c4be20_legend" class="checkbox-container_legend">Checkboxer</legend>
<div id="id-5d6d17f0-02c4be20_content" class="checkbox-container_content">
<div id="id-5d6d425c-02c23a10" class="control-row">
<div id="id-5d6d425c-02c23a10_control" class="label_control checked">
<input type="hidden" name="85a33aad006a46376f7f49375f2cbfd3" value="">
<input type="checkbox" id="id-5d6d425c-02c31cb0" name="85a33aad006a46376f7f49375f2cbfd3" value="yes">
</div>
<div id="id-5d6d425c-02c23a10_text" class="label_text">
<label for="id-5d6d425c-02c31cb0">checkbox</label>
</div>
</div>
<div id="id-5d6d05b0-02c23990" class="control-row checkbox"> ... </div>
<div id="id-5d6d3721-02c23a10" class="control-row checkbox"> ... </div>
</div>
</fieldset>
</div>
- Apply the css-class radio-container to the groupbox around the radio buttons.
- Apply the css-classes control-row og radio-row to the ‘div’ around the radio buttons.
<div id="id-5d6d5d94-02c4c360" class="radio-container">
<fieldset>
<legend id="id-5d6d5d94-02c4c360_legend" class="radio-container_legend">Radioknapper</legend>
<div id="id-5d6d5d94-02c4c360_content" class="radio-container_content">
<div id="id-5d6d7320-02c23a10" class="control-row"> ... </div>
<div id="id-5d6d6cf6-02c22b10" class="control-row">
<div id="id-5d6d6cf6-02c22b10_control" class="label_control checked">
<input type="radio" id="id-5d6d6cf6-02c321b0" name="05ec796a9303eae972e7cf170de72aeb" value="'first'">
</div>
<div id="id-5d6d6cf6-02c22b10_text" class="label_text">
<label for="id-5d6d6cf6-02c321b0">radiobutton</label>
</div>
</div>
<div id="id-5d6d7320-02c23a10" class="control-row radio"> ... </div>
</div>
</fieldset>
</div>
-
Apply class select-container to the groupbox around the dropdown. There should be no other elements inside select-container except the dropdown (both label and groupbox around). Furthermore, there should not be added any padding or margin to the container.
-
Apply css-class input-field to the input field. It gives it a basic styling that looks identical in all browsers.
<div id="id-5dfa6e11-08afa040" class="select-container">
<div id="id-5df3910c-07042470">
<div id="id-5df3910c-07042470_text" class="label_text">
<label for="id-5df3910c-04ba77e0">Dropdown</label>
</div>
<div id="id-5df3910c-07042470_control" class="label_control">
<select id="id-5df3910c-04ba77e0" class="input-field" name="85a33aad006a46376f7f49375f2cbfd3"></select>
</div>
</div>
</div>
ARIA-pattern is implemented to provide for accessibility and satisfy requirements in relation to WCAG 2.0.
- Apply class combobox-container to the groupbox (div) that is placed around the dropdown. There should be no other elements inside the combox-container except for an input-field.
- Add the classcombobox to the input field.
- Apply the css-class combobox-countries to an input field if you want to add a list of all countries.
- The class input-field can also be added to the input field to give it basic styling.
If you want to use your own custom list, you can drop the class combobox-countries, and add your own class like this comboxcountries-{name-of-custom-css-class}. The list must be declared as an array in a global JS-object called customComboBoxlists. The list must be the value to the property {the-name-of-the-list-here} inside the JS-object. For example, if we use combobox-brus, then it must have a global JS-object:
var customComboBoxlists = { brus: ["Cola", "Fanta", "Solo", "Sprite"] };The object can be declared in a JS-file, or inline, like this:
<script>
var customComboBoxlists = { brus: ["Cola", "Fanta", "Solo", "Sprite"] };
</script>
<div id="id-5dfa6e11-08afa040" class="combobox-container">
<div id="id-5df3910c-07042470">
<div id="id-5df3910c-07042470_text" class="label_text">
<label for="id-5df3910c-04ba77e0">Land</label>
</div>
<div id="id-5df3910c-07042470_control" class="label_control">
<input id="id-5df3910c-04ba77e0" class="input-field combobox combobox-countries" name="85a33aad006a46376f7f49375f2cbfd3">
</input>
</div>
</div>
</div>
- Use class input-field to add basic styling to input-fields
- In order to control and limit type of content that can be allowed to add into the input, you can apply different types of classes (a list of classes is added further down in the document).(see demo)
<input type="text" id="id-5d93ad80-02c0cc20" class="input-field" name="85a33aad006a46376f7f49375f2cbfd3" placeholder="Hvilke som helst tegn ..." value="">
<input type="text" id="id-5d972d02-02c0cfb0" class="input-field numeric-text" name="85a33aad006a46376f7f49375f2cbfd3" placeholder="kun siffer, ingen formattering" value="" inputmode="numeric" pattern="[0-9]*">
<input type="text" id="id-5d982482-02c0cfb0" class="input-field numeric-text org-number-mask" name="85a33aad006a46376f7f49375f2cbfd3" placeholder="xxx xxx xxx" value="" inputmode="numeric" pattern="[0-9]*" maxlength="11">
- Show the maximum characters allowed in a field, and current amount of numbers in a text field (i.e. Input or memo field).
- It makes it easier for the user to keep track of the remaining characters left to use.
Normally one line break counts as one character. However, this counter prevents line-breaks from counting as characters. If the text is supposed to be stored somewhere else, then check the max length of the field where it is supposed to end up (max length + line breaks).
- If you use the class counter-fraction then a fraction of the number of characters filled in / max length is displayed.
<div id="id-157361c3-097b0ff0" class="char-count-container-100">
<div id="id-157361c3-02c27f90" class="input-label">
<div id="id-157361c3-02c27f90_text" class="label_text">
<label for="id-157361c3-02c10cd8">Some label text <span class="hide-label"> (maks 500 tegn)</span></label>
</div>
<div id="id-157361c3-02c27f90_control" class="label_control">
<textarea id="id-157361c3-02c10cd8" class="input-field" name="bbe7b9dd99da10314996b6c39a04a2f5" maxlength="500" autocomplete="on" style="overflow: hidden; height: 134px;"></textarea>
</div>
</div>
<div id="id-157361c3-02b90300" class="char-count counter-fraction">0/500</div>
</div>
- If you use class counter-remaining a text string displayed counts down the number of characters from max length to zero. The string show how many characters the field have available as the user fills in information into the field.
<div id="id-157361c3-097ae740" class="char-count-container-500">
<div id="id-157361c3-02c28290" class="input-label">
<div id="id-157361c3-02c28290_text" class="label_text">
<label for="id-157361c3-02c0e0e8">Some label text <span class="hide-label"> (Maks 500 tegn)</span>
</label>
</div>
<div id="id-157361c3-02c28290_control" class="label_control">
<textarea id="id-157361c3-02c0e0e8" class="input-field" name="cf816ad7a69b9ccd15f1f818a1d77f98" maxlength="500" autocomplete="on" style="overflow: hidden; height: 134px;">
</textarea>
</div>
</div>
<div id="id-157361c3-02b91c50" class="char-count counter-remaining">Du har igjen 500 tegn</div>
</div>
Add a memo field (with a label) and a textbox inside a groupbox (see the example above). The groupbox (div) should have added class char-count-container-{your desired maxlength of the textfield}. If you add char-count-container-500, it will become an input field that accepts 500 characters.
Write the text you want to add to the label and then complete the text string with:
<span class=’hide-label’>Placeholder for maxlength</span>The placeholder for maxlength will then automatically be replaced with the amount of text being added to it. It will be hidden with css-masking but still be able to read with a screen reader.
You will have to add these values to the memo-field, but the error message (Message) can be placed wherever you want to place it:
Under the memo-field there is a textbox. This should have the class counter-fraction or counter-remaining, depending on what type of counter you want to add.
- Add classes label-float and hidden in the container which is placed over the label and input.
- Add classes input-field-alt on the input-element to remove default digiforms styling.
<div id="id-054e784f-02ba5590" class="label-float">
<div id="id-054e784f-02ba5590_text" class="label_text">
<label for="id-054e784f-02b8d6d0">Floating label</label>
</div>
<div id="id-054e784f-02ba5590_control" class="label_control">
<input type="text" id="id-054e784f-02b8d6d0" class="input-field-alt" name="85a33aad006a46376f7f49375f2cbfd3" placeholder="Floating label" value="">
</div>
</div>
- Use class btn on your buttons, URLs, or labels to make them look like buttons.
<button type="button" class="btn">Normal button</button>
<a href="#" class="btn">Link button</a>
<label class="btn">Label button</label>
- To style the attachment elements from Digiforms, you must do some tricks. First, add an input (label and input-field) and then replace the input-field with an attachment element. The label will be wrapped around the attachment-element. Add the css-class attachment to the label (you do not need to use the class btn to make it look like a button).
<div id="id-20123e92-044c0dd0" class="attachment">
<div id="id-20123e92-044c0dd0_text" class="label_text">
<label for="id-201025a5-0b99f9a0">File upload / Custom text</label>
</div>
<div id="id-20123e92-044c0dd0_control" class="label_control">
<input type="file" id="id-201025a5-0b99f9a0" name="c12e4884c9a02044f556284f379539fa">
</div>
</div>
- Add a groupbox (div) and give it the modal-container
- Add a new div and add the class modal
- Place the modal inside the modal-container
- Add a button inside the modal and give it the class btn btn-close btn-x (alt. except btn-close btn-x)
- Remove the text added to the button
- If you want a button to open the modal. Add a button before/over the modal-container and give it the class btn open-modal-btn (alt. except open-modal-btn)
- If you want an additional button you can add it inside the modal. Add the class btn btn-close (alt. except btn-close)
<div id="id-202a1f4d-0ba25710" class="modal-container" aria-expanded="true" aria-hidden="false">
<div id="id-20320dd2-0b82d980" class="modal">
<div id="id-2072276d-08211de0" class="text">{Insert custom content of your choice}</div>
<button type="button" id="id-2032a37a-0b9cc4a0" class="btn btn-close btn-x" aria-controls="id-202a1f4d-0ba25710" aria-label="Lukk" style="background-color: rgba(128, 0, 128, 0.5); border-radius: 8px;"></button>
<button type="button" id="id-20342eec-0b9cb640" class="btn btn-close" aria-controls="id-202a1f4d-0ba25710" aria-label="Lukk" style="background-color: rgba(128, 0, 128, 0.5); border-radius: 8px;">OK / close (not mandatory)</button>
</div>
</div>
- account-mask - gives an input the format XXXX XX XXXXX, e.g. 1234 56 78901
- attachment - is used to wrap the file-upload (input with attached label). Gives it basic styling.
- btn - gives the button basic styling as a button (can also be placed on URLs and labels).
- btn-close - is used to close a modal (dialog).
- btn-x - is used in combination with btn-close to close an open model (dialog). The button will be placed in the right corner on the modal and can be used as an exit-button.
- char-counter - can be applied to a textbox when using a counter.
- char-count-container-{ønsket makslengde for tekstfelt her} - the classes must be applied to a text area to give it the ‘counter’ functionality.
- checkbox-row - is used in combination with control-row to style checkboxes. It must be placed inside a groupbox with the class checkbox-container added to it.
- combobox - is used to create autocomplete fields (comboboxes). Must be placed inside a groupbox with the class control-container added to it.
- combobox-container - is used to create a autocomplete field (comboboxes). Must be added to groupbox around the input field.
- combobox-coutries - must be used in combination with a combobox to apply a list of countries to the field (autocomplete with a countries).
- combobox-{name-of-list} - is used in combination with combobox to create a autocomplete field with a custom list added to it. The list must be declared as an array in a global JS-object called customComboBoxlists. The list must be the value to the property {the-name-of-the-list-here} inside the JS-object. E.g. if we use the list comobox-brus, it must have a global JS-object applied to it.
var customComboBoxlists = { brus: ["Cola", "Fanta", "Solo", "Sprite"] };- control-container - is applied to a groupboxes (div) to style checkboxes and radio buttons inside the groupbox.
- control-row - is applied to checkboxes and radio buttons to style them.
- counter-fraction - is applied to a textbox to become a counter.
- counter-remaining - is used on textboxes to show the remaining characters left to use before reaching max length.
- cpr-mask - Danish social security numbers. The input field will be given XXXXXX-XXXX, e.g. 990102-1234.
- date-mask - the input field will be formatted into DD.MM.YYYY, e.g. 01.03.2018.
- date-se-mask - the input field will be formatted into YYYY.MM.DD, e.g. 2018.03.01.
- hide-label - is used to hide part of content inside the label of a textarea, a screen reader will be able to read.
- input-field - is used to style input fields and dropdowns (input og select).
- letteral-text - is limiting the input field into only allowing letteral text (not numbers).
- modal - creates a container into a modal which will be layered over the browser window.
- modal-container - is wrapping the modal(dialog). Must be placed on the groupbox around the modal window.
- money - a thousand separator for numbers, including decimals. e.g. 100 000,00.
- money-int - a thousand separator for whole numbers, e.g. 5 000 000.
- numeric-decimal - formats the input field to allow numbers and decimals. Remember to change the ‘input type’ to number in Digiforms Designer.
- numeric-positive - formats an input field into approving positive numbers.
- numeric-text - formatting the input to solely allow numbers in an input field. Enables keypad when opened on mobile device.
- open-modal-btn - opens modal (dialog).
- org-number-mask - for Norwegian organizations. Gives the input field the format XXX XXX XXX, e.g. 123 456 789.
- org-number-mask-se - Swedish organization number. The field will be formatted into XXXXXX-XXXX, e.g. 990102-1234.
- giin-number-mask - american corporate number. The input field will be formattet into XXXXXX.XXXXX.XX.XXX.
- percentage - sets the max value from 100 to 0.
- phone - gives it a format that suits that all general numbers also with various country codes. E.g. +999 12 45 67 12.
- phone-dk - gives it a format suits danish phone numbers. E.g. +45 12 45 67 12.
- phone-no - gives it a format that suits norwegian phone numbers. E.g. +47 123 45 678.
- phone-nordic - gives it a format that suits nordic national codes. E.g. +354 12 45 67 12.
- phone-se - gives it a format that suits sweedish phone numbers with a county code. E.g. +46(0) 73-123 45 67.
- phone-scandinavian - gives it a format that suits all nordic numbers (Norway, Sweeden and Denmark) including the country code. E.g. +45 12 45 67 12.
- prevent-select-on-tab - prevents data inside an input field to tab. Does not work in firefox.
- radio-row - is used in combination with control-row to style radio buttons. It must be placed inside a groupbox that has the class radio-container.
- select-container - makes dropdowns look similar in all browsers. It must be added to the groupbox that is placed upon the select field.
- ssn-no-mask - norwegian birth numbers. Gives the input field the format DDMMÅÅNNNNN, e.g. 08105127198.
- ssn-se-mask - sweedish birth numbers. Gives the input field the format ÅÅÅÅMMDD-NNNN, e.g. 19990102-1234.
- vps-account-mask - gives the input field the format XXXXX XXXXXXX, e.g. 12345 6789012.
- website-mask - gives an input field http://www. prefilled, it also accepts https://www. It only accept characters that are valid in domains.
Change the color on border (checkboxes/radio buttons):
.focused {
border-color: #f35b1c !important;
}Here (input fields/dropdowns):
.input-field:focus {
padding: 11px !important;
border: 2px solid #f35b1c !important;
}And here (floating labels)
.label-float input:focus {
border-bottom-color: #4E6378;
}Change the color on border and background color:
.control .label_text.checked label::before {
border-color: #257886 !important;
background-color: #257886 !important;
}Change color:
.combobox-result .case-match {
font-weight: bold;
color: #0059b3;
}