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

%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

%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