表單 - 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
<form>
  <div class="form-group">
    <label for="example-input-email1" class="required">Email address</label>
    <input id="example-input-email1"
           type="email"
           class="form-control"
           aria-describedby="emailHelp"
           placeholder="Enter email">
     <small id="emailHelp"
            class="form-txt txt-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="example-input-password1">Password</label>
    <input type="password"
           class="form-control"
           id="example-input-password1"
           placeholder="Password">
  </div>

  <label class="form-check">
    <div class="checkbox ripple">
      <input type="checkbox" />
      <i class="icon-checkbox"></i>
    </div>
    <span>Check me out</span>
  </label>

  <label class="form-switch">
    <div class="switch-wrap">
      <input type="checkbox" />
      <div class="switch"></div>
    </div>
    <span>Switch me</span>
  </label>

  <button type="submit" class="btn btn-primary">Submit</button>
</form>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form class="col-6">
  <h3>忘記密碼</h3>
  <div class="form-group">
    <label for="example-input-forget-password">輸入你的 Email，馬上就可以收信修改。</label>
    <input type="password"
           class="form-control"
           id="example-input-forget-password"
           placeholder="請輸入你的 Email">
  </div>
  <div class="d-flex justify-content-between align-items-center">
    <button type="submit" class="btn btn-primary">重新設定密碼</button>
    <a href="">返回登入</a>
  </div>
</form>

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
<form>
  <div class="form-group">
    <label for="example-form-control-input1">Email address</label>
    <input type="email"
           class="form-control"
           id="example-form-control-input1"
           placeholder="name@example.com">
  </div>
  <div class="form-group">
    <label for="example-form-control-select1">Example select</label>
    <select class="form-control select"
            id="example-form-control-select1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="example-form-control-select2">Example multiple select</label>
    <select multiple
            class="form-control select"
            id="example-form-control-select2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="example-form-control-textarea1">Example textarea</label>
    <textarea class="form-control"
              id="example-form-control-textarea1"
              rows="3"></textarea>
  </div>
</form>

1
2
3
4
5
6
7
8
<form>
  <div class="form-group">
    <label for="example-form-control-file1">Example file input</label>
    <input type="file"
           class="form-control-file"
           id="example-form-control-file1">
  </div>
</form>

1
2
3
4
5
6
7
8
9
<input class="form-control form-control-lg"
       type="text"
       placeholder=".form-control-lg">
<input class="form-control"
       type="text"
       placeholder="Default input">
<input class="form-control form-control-sm"
       type="text"
       placeholder=".form-control-sm">

1
2
3
4
<input class="form-control"
       type="text"
       placeholder="Readonly input here..."
       readonly>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<form>
  <div class="form-group row">
    <label for="static-email" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text"
             readonly
             class="form-control-plaintext"
             id="static-email" value="email@example.com">
    </div>
  </div>
  <div class="form-group row">
    <label for="input-password" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password"
             class="form-control"
             id="input-password"
             placeholder="Password">
    </div>
  </div>
</form>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<form class="form-inline">
  <div class="form-group">
    <label for="static-email2" class="sr-only">Email</label>
    <input type="text"
           readonly
           class="form-control-plaintext"
           id="static-email2"
           value="email@example.com">
  </div>
  <div class="form-group mx-sm-3">
    <label for="input-password2" class="sr-only">Password</label>
    <input type="password"
           class="form-control"
           id="input-password2"
           placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary">Confirm identity</button>
</form>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<label class="form-check">
  <div class="checkbox ripple">
    <input type="checkbox" />
    <i class="icon-checkbox"></i>
  </div>
  <span>Default checkbox</span>
</label>
<label class="form-check disabled">
  <div class="checkbox ripple">
    <input type="checkbox" disabled />
    <i class="icon-checkbox"></i>
  </div>
  <span>Disabled checkbox</span>
</label>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<label class="form-check">
  <div class="radio ripple">
    <input type="radio" name="example-radios" value="option1" checked />
    <i class="icon-radio"></i>
  </div>
  <span>Default radio</span>
</label>

<label class="form-check">
  <div class="radio ripple">
    <input type="radio" name="example-radios" value="option2" />
    <i class="icon-radio"></i>
  </div>
  <span>Second default radio</span>
</label>

<label class="form-check disabled">
  <div class="radio ripple">
    <input type="radio" name="example-radios" value="option3" disabled />
    <i class="icon-radio"></i>
  </div>
  <span>Disabled radio</span>
</label>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<label class="form-check form-check-inline">
  <div class="checkbox ripple">
    <input type="checkbox" value="option1" />
    <i class="icon-checkbox"></i>
  </div>
  <span>1</span>
</label>
<label class="form-check form-check-inline">
  <div class="checkbox ripple">
    <input type="checkbox" value="option2" />
    <i class="icon-checkbox"></i>
  </div>
  <span>2</span>
</label>
<label class="form-check form-check-inline disabled">
  <div class="checkbox ripple">
    <input type="checkbox" value="option3" disabled />
    <i class="icon-checkbox"></i>
  </div>
  <span>3 (disabled)</span>
</label>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<label class="form-check form-check-inline">
  <div class="radio ripple">
    <input type="radio" name="example-radios-inline2" value="option1" />
    <i class="icon-radio"></i>
  </div>
  <span>1</span>
</label>
<label class="form-check form-check-inline">
  <div class="radio ripple">
    <input type="radio" name="example-radios-inline2" value="option2" />
    <i class="icon-radio"></i>
  </div>
  <span>2</span>
</label>
<label class="form-check form-check-inline disabled">
  <div class="radio ripple">
    <input type="radio" name="example-radios-inline2" value="option3" disabled />
    <i class="icon-radio"></i>
  </div>
  <span>3 (disabled)</span>
</label>

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="form-check">
  <label class="checkbox ripple">
    <input type="checkbox" value="option1" aria-label="...">
    <i class="icon-checkbox"></i>
  </label>
</div>

<div class="form-check">
  <label class="radio ripple">
    <input type="radio" value="option1" aria-label="...">
    <i class="icon-radio"></i>
  </label>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<form>
  <div class="form-group">
    <label for="form-group-example-input">Example label</label>
    <input type="text"
           class="form-control"
           id="form-group-example-input"
           placeholder="Example input">
  </div>
  <div class="form-group">
    <label for="form-group-example-input2">Another label</label>
    <input type="text"
           class="form-control"
           id="form-group-example-input2"
           placeholder="Another input">
  </div>
</form>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form>
  <div class="row">
    <div class="col">
      <input type="text"
             class="form-control"
             placeholder="First name">
    </div>
    <div class="col">
      <input type="text"
             class="form-control"
             placeholder="Last name">
    </div>
  </div>
</form>

1
2
3
4
5
6
7
8
9
10
<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="input-email4">Email</label>
      <input type="email"
             class="form-control"
             id="input-email4"
             placeholder="Email">
    </div>
    <div class="form-group col-md-6">
      <label for="input-password4">Password</label>
      <input type="password"
             class="form-control"
             id="input-password4"
             placeholder="Password">
    </div>
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="input-address">Address</label>
      <input type="text"
             class="form-control"
             id="input-address"
             placeholder="1234 Main St">
    </div>
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="input-address2">Address 2</label>
      <input type="text"
             class="form-control"
             id="input-address2"
             placeholder="Apartment, studio, or floor">
    </div>
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">City</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="input-state">State</label>
      <select id="input-state" class="form-control select">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="input-zip">Zip</label>
      <input type="text" class="form-control" id="input-zip">
    </div>
  </div>

  <label class="form-check">
    <div class="checkbox ripple">
      <input type="checkbox" />
      <i class="icon-checkbox"></i>
    </div>
    <span>Check me out</span>
  </label>

  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<form>
  <div class="form-group row">
    <label for="input-email3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10 col-form-field">
      <input type="email"
             class="form-control"
             id="input-email3"
             placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="input-password3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10 col-form-field">
      <input type="password"
             class="form-control"
             id="input-password3"
             placeholder="Password">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
      <div class="col-sm-10">

        <label class="form-check">
          <div class="radio ripple">
            <input type="radio" name="grid-radios" value="option1" checked />
            <i class="icon-radio"></i>
          </div>
          <span>First radio</span>
        </label>
        <label class="form-check">
          <div class="radio ripple">
            <input type="radio" name="grid-radios" value="option2" />
            <i class="icon-radio"></i>
          </div>
          <span>Second radio</span>
        </label>
        <label class="form-check disabled">
          <div class="radio ripple">
            <input type="radio" name="grid-radios" value="option3" disabled />
            <i class="icon-radio"></i>
          </div>
          <span>Third disabled radio</span>
        </label>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2 col-form-label">Checkbox</div>
    <div class="col-sm-10 col-form-field">
      <label class="form-check">
        <div class="checkbox ripple">
          <input type="checkbox" />
          <i class="icon-checkbox"></i>
        </div>
        <span>Example checkbox</span>
      </label>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>

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
<form>
  <div class="form-group row">
    <label for="col-form-label-sm"
           class="col-sm-2 col-form-label col-form-label-sm">Email</label>
    <div class="col-sm-10">
      <input type="email"
             class="form-control form-control-sm"
             id="col-form-label-sm"
             placeholder="col-form-label-sm">
    </div>
  </div>
  <div class="form-group row">
    <label for="col-form-label"
           class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10 col-form-field">
      <input type="email"
             class="form-control"
             id="col-form-label"
             placeholder="col-form-label">
    </div>
  </div>
  <div class="form-group row">
    <label for="col-form-label-lg"
           class="col-sm-2 col-form-label col-form-label-lg">Email</label>
    <div class="col-sm-10 col-form-field">
      <input type="email"
             class="form-control form-control-lg"
             id="col-form-label-lg"
             placeholder="col-form-label-lg">
    </div>
  </div>
</form>

1
2
3
4
5
6
7
8
9
10
11
12
13
<form>
  <div class="form-row">
    <div class="col-7">
      <input type="text" class="form-control" placeholder="City">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="State">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Zip">
    </div>
  </div>
</form>

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
<form>
  <div class="form-row align-items-center">
    <div class="col-auto">
      <label class="sr-only" for="inline-form-input">Name</label>
      <input type="text"
             class="form-control mb-2"
             id="inline-form-input"
             placeholder="Jane Doe">
    </div>
    <div class="col-auto">
      <label class="sr-only" for="inline-form-input-group">Username</label>
      <div class="input-group mb-2">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text"
               class="form-control"
               id="inline-form-input-group"
               placeholder="Username">
      </div>
    </div>
    <div class="col-auto">
      <label class="form-check mb-2">
        <div class="checkbox ripple">
          <input type="checkbox" />
          <i class="icon-checkbox"></i>
        </div>
        <span>Remember me</span>
      </label>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary mb-2">Submit</button>
    </div>
  </div>
</form>

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
<form>
  <div class="form-row align-items-center">
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inline-form-input-name">Name</label>
      <input type="text"
             class="form-control"
             id="inline-form-input-name"
             placeholder="Jane Doe">
    </div>
    <div class="col-sm-3 my-1">
      <label class="sr-only"
             for="inline-form-input-group-username">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text"
               class="form-control"
               id="inline-form-input-group-username"
               placeholder="Username">
      </div>
    </div>
    <div class="col-auto my-1">
      <label class="form-check">
        <div class="checkbox ripple">
          <input type="checkbox" />
          <i class="icon-checkbox"></i>
        </div>
        <span>Remember me</span>
      </label>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

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
<form class="form-inline">
  <label class="sr-only" for="inlineFormInputName2">Name</label>
  <input type="text"
         class="form-control mb-2 mr-sm-2"
         id="inline-form-input-name2"
         placeholder="Jane Doe">

  <label class="sr-only" for="inline-form-input-group-username2">Username</label>
  <div class="input-group mb-2 mr-sm-2">
    <div class="input-group-prepend">
      <div class="input-group-text">@</div>
    </div>
    <input type="text"
           class="form-control"
           id="inline-form-input-group-username2"
           placeholder="Username">
  </div>

  <label class="form-check mb-2 mr-sm-2">
    <div class="checkbox ripple">
      <input type="checkbox">
      <i class="icon-checkbox"></i>
    </div>
      <span>
        Remember me
      </span>
  </label>

  <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

1
2
3
4
5
6
7
8
9
<label for="input-password5">Password</label>
<input type="password"
       id="input-password5"
       class="form-control"
       aria-describedby="password-help-block">
<small id="password-help-block"
       class="form-text text-muted">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>

1
2
3
4
5
6
7
8
9
10
11
12
<form class="form-inline">
  <div class="form-group">
    <label for="input-password6">Password</label>
    <input type="password"
           id="input-password6"
           class="form-control mx-sm-3"
           aria-describedby="password-help-inline">
    <small id="password-help-inline" class="text-muted">
      Must be 8-20 characters long.
    </small>
  </div>
</form>

1
2
3
4
<input class="form-control"
       id="disabled-input"
       type="text"
       placeholder="Disabled input here..." disabled>

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
<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabled-text-input">Disabled input</label>
      <input type="text"
             id="disabled-text-input"
             class="form-control"
             placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabled-select">Disabled select menu</label>
      <select id="disabled-select" class="form-control select">
        <option>Disabled select</option>
      </select>
    </div>
    <label class="form-check disabled">
      <div class="checkbox ripple">
        <input type="checkbox" disabled>
        <i class="icon-checkbox"></i>
      </div>
      <span>Can't check this</span>
    </label>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validation-server01">First name</label>
      <input type="text"
             class="form-control is-valid"
             id="validation-server01"
             value="Mark"
             required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validation-server02">Last name</label>
      <input type="text"
             class="form-control is-valid"
             id="validation-server02"
             value="Otto"
             required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validation-server-username">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="input-group-prepend3">@</span>
        </div>
        <input type="text"
               class="form-control is-invalid"
               id="validation-server-username"
               aria-describedby="input-group-prepend3"
               required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validation-server03">City</label>
      <input type="text"
             class="form-control is-invalid"
             id="validation-server03"
             required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validation-server04">State</label>
      <select class="form-control select is-invalid" id="validation-server04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validation-server05">Zip</label>
      <input type="text"
             class="form-control is-invalid"
             id="validation-server05"
             required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <label class="form-check">
      <div class="checkbox ripple">
        <input type="checkbox" required>
        <i class="icon-checkbox"></i>
      </div>
      <span class="is-invalid">
        Agree to terms and conditions
      </span>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </label>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>