An HTML form is a section of a document containing normal content, markup, special elements called controls (checkboxes, radio buttons, menus, etc.), and labels on those controls. Users generally "complete" a form by modifying its controls (entering text, selecting menu items, etc.), before submitting the form to an agent for processing (e.g., to a Web server, to a mail server, etc.)
.form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.
Basic bootstrap elements
Propeller Form Fields consists of Bootstrap HTML structure with Propeller customized classes based on material design standards.
Add .pmd-textfield to the parent div to customize Bootstrap input into Propeller input which contains an input line which is focused when the user selects it.
Use .pmd-textfield-floating-label to make input label float upwards.
Bootstrap provides inputs in various sizes: small, medium and large. Using Bootstrap HTML structure and Propeller customized classes, you can create such inputs with varying sizes.
Add the readonly boolean attribute on an input to prevent user input and style the input as disabled.
Add .form-control-plaintext to the input to display its value as plain text.
Create disbaled input by adding the disabled boolean attribute on an input to prevent user input and trigger a slightly different look.
Add .pmd-custom-file followed by .custom-file to customize the Bootstrap Custom File Input into Propeller File Input.
Wrap custom select with a div having classes .form-group and .pmd-textfield to create Propeller customized Custom Select.
Use .bg-dark and .text-white to the card structure to create an inverse form.
Call the jQuery plugin to initialize the textfield and textarea while fetching the data dynamically.
Add .pmd-checkbox besides .custom-checkbox to create propeller customized checkbox. You can also add .pmd-checkbox-ripple-effect to the label to provide a ripple effect to the checkbox.
Inline Checkboxes - Use .custom-control-inline besides .custom-control to create checkboxes that appear on the same line.
Use .bg-dark and .text-white to the card structure to create an inverse checkbox.
Call the jQuery plugin to initialize the checkbox while fetching the data dynamically.
Add .pmd-radio besides .custom-radio to create a propeller customized radio. You can also add .pmd-radio-ripple-effect to the label provide a ripple effect to the radio.
Inline Radio - Use .custom-control-inline besides .custom-control to create radio buttons that appear on the same line.
Use .bg-dark and .text-white to the card structure to create an inverse radio.
Call the jQuery plugin to initialize the radio while fetching the data dynamically.
Use .position-static besides .custom-control-label to create checkboxes and radio buttons without labels.
Set horizontally scrollable range inputs using .custom-range.
You can set range limits using min and max attributes.
To make the range bar jump by a specific amount, use step attribute.
Use .bg-dark and .text-white to the card structure to create an inverse range input.
Add col-*-* class besides the .form-group to create forms layouts that require multiple columns, varied widths and other alignment options.
Use .form-row to create more tighter and compact layouts.
Use .col-auto to make the content vertically center.
Use .form-inline to display the form horizontally.
Propeller provides validation states for error, and success states on form controls.
Add .is-valid to the input field and .valid-feedback to the div containing the validation message in order to create a success input field. Similarly, add .is-invalid and .invalid-feedback to create error input field.
For custom form validation messages, add the novalidate boolean attribute to your <form>. This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript.
Use .bg-dark and .text-white to the card structure to create an inverse form.
Replace .valid-feedback and invalid-feedback by .valid-tooltip and .invalid-tooltip to display the validation messages in the form of tooltips.
Toggle Switch is - To switch from one setting to another. It implies that there are only two possible settings and that you are switching from the current setting to the other setting. For example, light switches that turn a light on or off are toggle switches.
Add .pmd-switch to the parent div and .pmd-switch-label to the tag containing label.
Use .bg-dark and .text-white to the card structure to create an inverse toggle switch.
The Propeller CSS classes apply various predefined visual enhancements to the form elements. The table lists the available classes and their effects.
| Propeller Class | Effect | Remark |
|---|---|---|
.pmd-textfield |
Class added for general label and input formatting. | Required |
.pmd-textfield-floating-label |
Adds floating animation to the label of input | Optional |
.pmd-checkbox |
To create propeller customized checkbox | Optional |
.pmd-checkbox-ripple-effect |
Add this class to create ripple effect to checkboxes | Optional |
.pmd-radio |
To create propeller customized radiobutton | Optional |
.pmd-radio-ripple-effect |
Add this class to create ripple effect to radio | Optional |
.pmd-custom-file |
Add this class to create propeller customized file input | Optional |
.pmd-switch |
To create propeller customized toggle switch | Optional |
.pmd-switch-label |
Add this class to the label of the toggle switch | Optional |