Forms, labels and common HTML5 input elements have been styled using clean, modern rules, improving the accessibility and usability of your web apps' forms.
`, example: ``, samples: [`<form> <fieldset> <legend>Simple form</legend> <label for="username">Username</label> <input type="text" id="Username" placeholder="Username"/> <label for="password">Password</label> <input type="password" id="password" placeholder="Password"/> </fieldset> </form>`], notes: [ `Using the
<fieldset> and <legend> elements is highly recommended, as it improves semantic markup and accessibility.`,
`Some input elements, such as date & time, color and range types, are not supported and, as a result, do not have a default style defined for them. You can define said styles manually if you need to use them in your web app.`
],
customization: [
`Text color for forms and legend elements can be changed by changing the value of the --form-fore-color variable.`,
`Background color for forms can be changed by changing the value of the --form-back-color variable.`,
`Border color for forms and fieldset elements can be changed by changing the value of the --form-border-color variable.`,
`Text color for input elements can be changed by changing the value of the --input-fore-color variable.`,
`Background color for input elements can be changed by changing the value of the --input-back-color variable.`,
`Border color for input elements can be changed by changing the value of the --input-border-color variable.`,
`Border color for focused and invalid input elements can be changed by changing the value of the --input-focus-color and --input-invalid-color variables respectively.`,
`Universal margin for elements can be changed globally by changing the value of the --universal-margin variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.`,
`Universal padding for elements can be changed globally by changing the value of the --universal-padding variable.`,
`Universal border radius for elements can be changed globally by changing the value of the --universal-border-radius variable.`
],
modifiers: [],
dos: [
{
description: 'Form inputs are inline by default, however you can combine forms with the grid system to create aligned forms.',
sample: `<form> <fieldset> <legend>Simple form</legend> <div class="row"> <div class="col-sm-12 col-md-6"> <label for="username">Username</label> <input type="text" id="Username" placeholder="Username"/> </div> <div class="col-sm-12 col-md-6"> <label for="password">Password</label> <input type="password" id="password" placeholder="Password"/> </div> </div> </fieldset> </form>` } ], donts: [] }