Forms
We are using Bootstrap’s forms and custom form controls for cross browser consistency.
Example
Simple Form
Custom Form Controls
Note: There is no custom form control for text fieldCode
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
.container
.card.mb-3
.card-body
%h5 Simple Form
%form
.form-group
%label{ for: 'exampleInputEmail1' } Email address
%abbr.text-danger{ title: 'required' } *
%input#exampleInputEmail1.form-control{ 'aria-describedby' => 'emailHelp', placeholder: 'Enter email', type: 'email', required: true }
%small#emailHelp.form-text.text-muted We'll never share your email with anyone else.
.form-group
%label{ for: 'exampleInputPassword1' } Password
%abbr.text-danger{ title: 'required' } *
%input#exampleInputPassword1.form-control{ placeholder: 'Password', type: 'password', required: true }
.form-group.custom-control.custom-checkbox
%input.custom-control-input#exampleCheck1{ type: 'checkbox' }
%label.custom-control-label{ for: 'exampleCheck1' } Check me out
%button.btn.btn-primary{ type: 'submit' } Submit
.card
.card-body
%h5 Custom Form Controls
%i Note: There is no custom form control for text field
.custom-control.custom-checkbox
%input.custom-control-input#my-checkbox{ type: 'checkbox' }
%label.custom-control-label{ for: 'my-checkbox' } I am a checkbox
.custom-control.custom-radio
%input.custom-control-input#my-radio{ type: 'radio' }
%label.custom-control-label{ for: 'my-radio' } I am a radio element
%select.custom-select#my-select
%option{ selected: 'selected' } Open this select menu
%option{ value: '1' } One
%option{ value: '2' } Two
%option{ value: '3' } Three
.custom-file
%input.custom-file-input#my-file{ type: 'file' }
%label.custom-file-label{ for: 'customFile' } Choose file
.custom-control.custom-switch
%input.custom-control-input#my-switch{ type: 'checkbox' }
%label.custom-control-label{ for: "my-switch" } I am a switch