Formulare

Formelemente sind in drei unterschiedlichen Grössen verfügbar, dargestellt im Tab Form Sizes. Die klassischen Select Optionen sind mit dem jQuery-Plugin Select2 realisiert. Die Select Listen sind in zwei unterschiedlichen Grössen verfügbar. Für die Labels gibt es zwei Varianten. Vergleichen Sie die Varianten im Tab Standard Form und im Tab Form Floating.

Standard Form

We'll never share your email with anyone else.
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
1
2  // Standard Form
3  <form noValidate="true" method="" id="bootstrapForm02">
4    <div class="mb-3">
5      <label htmlFor="exampleInputEmail1" class="form-label">
6        Email address
7      </label>
8      <input
9        type="email"
10        class="form-control"
11        id="exampleInputEmail1"
12        aria-describedby="emailHelp"
13        placeholder="E-Mail"
14      />
15      <div id="emailHelp" class="form-text">
16        We'll never share your email with anyone else.
17      </div>
18      <label htmlFor="exampleInputPassword1" class="form-label">
19        Text
20      </label>
21      <input
22        type="text"
23        class="form-control"
24        id="exampleInputPassword1"
25        autoComplete="on"
26      />
27    </div>
28
29    <div class="my-3">
30      <label htmlFor="inputPassword5" class="form-label">
31        Password
32      </label>
33      <input
34        type="password"
35        id="inputPassword5"
36        class="form-control"
37        aria-describedby="passwordHelpBlock"
38        autoComplete="on"
39      />
40      <div id="passwordHelpBlock" class="form-text">
41        Your password must be 8-20 characters long, contain letters and
42        numbers, and must not contain spaces, special characters, or emoji.
43      </div>
44    </div>
45
46    <div className="form-check">
47      <input
48        type="checkbox"
49        className="form-check-input"
50        id="exampleCheck1"
51        required
52        />
53        <label className="form-check-label" htmlFor="exampleCheck1">
54        Accept terms & conditions
55        </label>
56        </div>
57        
58        <div className="form-check mb-4">
59        <input
60        type="checkbox"
61        className="form-check-input"
62        id="exampleCheck2"
63        required
64        />
65      <label className="form-check-label" htmlFor="exampleCheck2">
66        Check me out
67      </label>
68    </div>
69
70    <button
71      id="resetForm"
72      type="submit"
73      class="btn btn-secondary me-2"
74    >
75      Submit
76    </button>
77    <button id="resetForm" class="btn btn-light" type="reset">
78      Reset form
79    </button>
80  </form>
81

Floating Form

You must agree before submitting.
1
2  // Form floating
3  <form noValidate method="" id="bootstrapForm">
4    <div className="form-floating mb-3">
5      <input
6        type="email"
7        className="form-control"
8        id="floatingInput"
9        placeholder="name@example.com"
10        required
11      />
12      <label htmlFor="floatingInput">Email address</label>
13      <div className="invalid-feedback">
14        You must agree before submitting.
15      </div>
16    </div>
17    <div className="form-floating">
18      <input
19        type="password"
20        className="form-control"
21        id="floatingPassword"
22        placeholder="Password"
23        autoComplete="on"
24      />
25      <label htmlFor="floatingPassword">Password</label>
26    </div>
27  </form>
28

Form Upload

1
2  // Form upload
3  <div class="mb-3">
4    <label htmlFor="formFile" class="form-label">
5      Default file input example
6    </label>
7    <input class="form-control" type="file" id="formFile" />
8  </div>
9  <div class="mb-3">
10    <label htmlFor="formFileMultiple" class="form-label">
11      Multiple files input example
12    </label>
13    <input
14      class="form-control"
15      type="file"
16      id="formFileMultiple"
17      multiple
18    />
19  </div>
20  <div class="mb-3">
21    <label htmlFor="formFileDisabled" class="form-label">
22      Disabled file input example
23    </label>
24    <input
25      class="form-control"
26      type="file"
27      id="formFileDisabled"
28      disabled
29    />
30  </div>
31  <div class="mb-3">
32    <label htmlFor="formFileSm" class="form-label">
33      Small file input example
34    </label>
35    <input
36      class="form-control form-control-sm"
37      id="formFileSm"
38      type="file"
39    />
40  </div>
41  <div>
42    <label htmlFor="formFileLg" class="form-label">
43      Large file input example
44    </label>
45    <input
46      class="form-control form-control-lg"
47      id="formFileLg"
48      type="file"
49    />
50  </div>
51

Form sizes

1
2  // Form sizes
3  <div class="form-group mb-3">
4    <label class="form-label" htmlFor="floatingInput2">
5      Extra large
6    </label>
7    <input
8      class="form-control form-control-lg"
9      type="text"
10      placeholder=".form-control-lg"
11      aria-label=".form-control-lg example"
12    />
13  </div>
14  <div class="mb-3">
15    <label class="form-label" htmlFor="floatingInput2">
16      Standard
17    </label>
18    <input
19      class="form-control"
20      type="text"
21      placeholder="Default input"
22      aria-label="default input example"
23    />
24  </div>
25  <div class="mb-3">
26    <label class="form-label" htmlFor="floatingInput2">
27      Small
28    </label>
29    <input
30      class="form-control form-control-sm"
31      type="text"
32      placeholder=".form-control-sm"
33      aria-label=".form-control-sm example"
34    />
35  </div>
36

Checkboxes and radios

1
2  // Checkboxes and radios
3  <div class="my-3">
4    <div class="form-check">
5      <input
6        class="form-check-input"
7        type="radio"
8        name="exampleRadios"
9        id="exampleRadios1"
10        value="option1"
11        checked
12        onChange={e => {}}
13      />
14      <label class="form-check-label" htmlFor="exampleRadios1">
15        Default radio
16      </label>
17    </div>
18    <div class="form-check">
19      <input
20        class="form-check-input"
21        type="radio"
22        name="exampleRadios"
23        id="exampleRadios2"
24        value="option2"
25      />
26      <label class="form-check-label" htmlFor="exampleRadios2">
27        Second default radio
28      </label>
29    </div>
30    <div class="form-check">
31      <input
32        class="form-check-input"
33        type="radio"
34        name="exampleRadios"
35        id="exampleRadios3"
36        value="option3"
37        disabled
38      />
39      <label class="form-check-label" htmlFor="exampleRadios3">
40        Disabled radio
41      </label>
42    </div>
43  </div>
44
45  <div class="my-3">
46    <div class="form-check form-switch">
47      <input
48        class="form-check-input"
49        type="checkbox"
50        id="flexSwitchCheckDefault"
51      />
52      <label class="form-check-label" htmlFor="flexSwitchCheckDefault">
53        Default switch checkbox input
54      </label>
55    </div>
56    <div class="form-check form-switch">
57      <input
58        class="form-check-input"
59        type="checkbox"
60        id="flexSwitchCheckChecked1"
61        checked
62        onChange={e => {}}
63      />
64      <label class="form-check-label" htmlFor="flexSwitchCheckChecked1">
65        Checked switch checkbox input
66      </label>
67    </div>
68    <div class="form-check form-switch">
69      <input
70        class="form-check-input"
71        type="checkbox"
72        id="flexSwitchCheckDisabled2"
73        disabled
74      />
75      <label
76        class="form-check-label"
77        htmlFor="flexSwitchCheckDisabled2"
78      >
79        Disabled switch checkbox input
80      </label>
81    </div>
82    <div class="form-check form-switch">
83      <input
84        class="form-check-input"
85        type="checkbox"
86        id="flexSwitchCheckCheckedDisabled3"
87        checked
88        disabled
89        onChange={e => {}}
90      />
91      <label
92        class="form-check-label"
93        htmlFor="flexSwitchCheckCheckedDisabled3"
94      >
95        Disabled checked switch checkbox input
96      </label>
97    </div>
98  </div>
99
100  <div class="mb-3 form-check">
101    <input
102      type="checkbox"
103      class="form-check-input"
104      id="exampleCheck1"
105    />
106    <label class="form-check-label" htmlFor="exampleCheck1">
107      Check me out
108    </label>
109  </div>
110

Select

Prepend
Prepend

Select2 example

1
2  // Select2 - example
3  <label htmlFor="single-select-field">Select single - Standard</label>
4  <select className="sel2 col-12" id="single-select-field">
5    <option value="FHNW">Hochschulen der FHNW</option>
6    <option value="APS">Hochschule für Angewandte Psychologie</option>
7    <option value="APS">
8      Hochschule für Architektur, Bau und Geomatik
9    </option>
10    <option value="HGK">Hochschule für Gestaltung und Kunst</option>
11    <option value="HLS">Hochschule für Life Science</option>
12    <option value="APS">Hochschule für Musik</option>
13    <option value="PH">Pädagogische Hochschule</option>
14    <option value="HSA">Hochschule für Soziale Arbeit</option>
15    <option value="HT">Hochschule für Technik</option>
16    <option value="HSW">Hochschule für Wirtschaft</option>
17  </select>
18
1
2  // Select2 - jQuery
3  // See script in default.js
4  
5  $('#single-select-field').select2({
6    theme: 'bootstrap-5',
7    closeOnSelect: true,
8    placeholder: 'Lorem ipsum',
9    selectionCssClass: 'select2--small',
10    dropdownCssClass: 'select2--small',
11  });
12

Die Form Select's erfordern das jQuery Plugin Select2:

1
2  // Select2
3  <html>
4  <head>
5    ...
6    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
7    ...
8  </head>
9  <body>
10    ...
11