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.)
Bootstrap Form fields
Bootstrap has some global styling defined for each of the individual form controls. All textual <input>, <textarea>, and <select> elements with .form-control
are set to width: 100%; by default. Wrap labels and controls in .form-group
for optimum spacing.
Propeller Form Fields
Propeller Form Fields consists of Bootstrap HTML structure with Propeller customized classes based on material design standards.
Add .pmd-textfield
to the parent div of input to customize Bootstrap input into Propeller input. Additionally, 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.
Use Input states by adding the disabled
boolean attribute on an input to prevent user input and trigger a slightly different look.
Add the readonly
boolean attribute on an input to prevent user input and style the input as disabled.
Bootstrap provides validation states for error, warning, and success states on form controls. Add .has-warning
to the parent div of the input in order to create a warning input field. Similarly, add .has-success
and .has-error
to create success and error input fields respectively. Using Bootstrap HTML structure and Propeller customized classes, you can create such inputs with varying validation states.
Propeller input fields with icon. Add the div with .input-group-addon
containing the icon to create an input field with icon.
Input fields with icons
Input fields with floating labels
Call the jQuery plugin to initialize the textfield while fetching the data dynamically.
Text Area
Multi-line text fields automatically break to a new line for overflow text and scroll vertically when the cursor reaches the lower edge.
Add .pmd-textfield-floating-label
class to get floating textarea.
Call the jQuery plugin to initialize the textfield while fetching the data dynamically.
Checkboxes
Add .pmd-checkbox
in label to create propeller customized checkbox. You can also add .pmd-checkbox-ripple-effect
to provide a ripple effect to the checkbox.
Inline Checkboxes - Use .checkbox-inline
on a series of checkboxes for controls that appear on the same line.
Call the jQuery plugin to initialize the checkbox while fetching the data dynamically.
Radio
Add .pmd-radio
in label to create a propeller customized radio. You can also add .pmd-radio-ripple-effect
to provide a ripple effect to the radio.
Inline Radio - Use .radio-inline
on a series of radio boxes for controls that appear on the same line.
Call the jQuery plugin to initialize the radio while fetching the data dynamically.
Toggle Switch
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.
Configuration Options
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-input-group-label |
Add this class to the label of the input field with icon | Optional |
.pmd-switch |
To create propeller customized toggle switch | Optional |
.pmd-switch-label |
Add this class to the label of the toggle switch | Optional |