Forms

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
%h5 Forms

%form
  .form-group
    %label{for: "exampleInputEmail1"} Email address
    %input#exampleInputEmail1.form-control{"aria-describedby" => "emailHelp", placeholder: "Enter email", type: "email"}
    %small#emailHelp.form-text.text-muted We'll never share your email with anyone else.
  .form-group
    %label{for: "exampleInputPassword1"} Password
    %input#exampleInputPassword1.form-control{placeholder: "Password", type: "password"}
  .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

%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