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
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