Die Anleitung zu Bootstrap Form

View more Tutorials:

1- Die Überblick von Bootstrap Form

Für Layout Layout hat  Bootstrap 3 Wege für die Gliederung der Elemente in die Interface.

  1. Verwenden Sie die Klasse .form-group um die Elemente vertikal aufzugliedern.
  2. Verwenden Sie die Klasse .form-inline um die Elemente horizontal aufzugliedern.
  3. Stellen Sie die Elemente auf Grid (Netz), und dann die Elemente werden nach dem Grundsatz vom Grid System vom Bootstrap ​​​​​​​angezeigt.

.form-group

.form-inline

Grid

2- Vertikale Form (.form-group)

Damit die Elemente vertikal aufgegliedert werden, sollen Sie es durch ein Tag  <div class="form-group"> einwickeln. Diese Elemente haben die Breite, die das Vaterelement erfüllen
Vertical Form (.form-group)
<form>

   <!-- Vertical -->
   <div class="form-group">
      <label for="myEmail">Email</label>
      <input type="email" id = "myEmail" class="form-control" placeholder="Email">
      <label for="myPassword">Password</label>
      <input type="password" id="myPassword" class="form-control" placeholder="Password">
      <button type="submit" class="btn btn-primary">Submit</button>
   </div>

</form>
Das volle Beispiel sehen
form-group-example.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Form Example</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container-fluid mt-3">
         <h2>.form-group (Vertical)</h2>

         <form>
            <!-- Vertical -->
            <div class="form-group">
               <label for="myEmail">Email</label>
               <input type="email" id = "myEmail" class="form-control" placeholder="Email">
               <label for="myPassword">Password</label>
               <input type="password" id="myPassword" class="form-control" placeholder="Password">
               <button type="submit" class="btn btn-primary">Submit</button>
            </div>
         </form>
         
      </div>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>

3- Die vertikale Form (.form-inline) **

Damit die Elemente auf einer Linie aufgegliedert werden, können Sie sie durch das Tag  <div class="form-inline"> einwickeln. Allerdings können Sie auf die unterschiedlichen Linien liegen wenn das Vater-Element die zu wenig Breite hat.
Horizontal Form (.form-inline)
<form>
   <!-- Horizontal -->
   <div class="form-inline">
      <label for="myEmail">Email</label>
      <input type="email" id="myEmail" class="form-control" placeholder="Email">
      <label for="myPassword">Password</label>
      <input type="password" id="myPassword" class="form-control" placeholder="Password">
      <button type="submit" class="btn btn-primary">Submit</button>
   </div>
</form>

4- Form Grid

Das Netz-System (Grid System) ist ein starkes System um die Elemente auf die Interface aufzugliedern Und Sie können es benutzen um für Form anzuwenden

Grid

Das ist folgend ein Beispiel für die Verwendung des Grid System um die Elemente auf die Interface aufzugliedern. Achtung: Die Klasse  .row und  .form-row arbeiten gleich aber nach unserem Rat sollen Sie  .form-row benutzen
Grid example
<form>
   <div class="row">
      <div class="col-6 col-sm-4">
         <input type="text" class="form-control" placeholder=".col-6 .col-sm-4">
      </div>
      <div class="col-6 col-sm-8">
         <input type="text" class="form-control" placeholder=".col-6 .col-sm-8">
      </div>
   </div>
</form>

Grid + .form-group

Zum Beispiel: Die Verbindung zwischen  Grid und Klasse  .form-group:
Grid + .form-group example
<form>
   <div class="form-row">
      <div class="col-6 col-sm-4 form-group">
         <label>Product Code</label>
         <input type="text" class="form-control" placeholder=".col-6 .col-sm-4">
      </div>
      <div class="col-6 col-sm-8 form-group">
         <label>Product Name</label>
         <input type="text" class="form-control" placeholder=".col-6 .col-sm-8">
      </div>
   </div>
</form>

5- Zum Beispiel: Das komplizierte Form

Verbinden Sie die Klasse  .form-group, .form-row, .form-inline,.. um eine Form mit der komplizierten Aufgliederung zu schaffen.
complex-form-example.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Form Example</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container-fluid mt-3">
         <h4 class="mb-2">Complex Form</h4>
         <form>
            <div class="form-row">
               <div class="form-group col-sm-6">
                  <label for="myEmail">Email</label>
                  <input type="email" class="form-control"
                     id="myEmail" placeholder="Email">
               </div>
               <div class="form-group col-sm-6">
                  <label for="myPassword">Password</label>
                  <input type="password" class="form-control"
                     id="myPassword" placeholder="Password">
               </div>
            </div>
            <div class="form-group">
               <label for="inputAddress">Address</label>
               <input type="text" class="form-control"
                  id="myAddress" placeholder="1234 Main St">
            </div>
            <div class="form-group">
               <label for="inputAddress2">Address 2</label>
               <input type="text" class="form-control"
                  id="myAddress2" placeholder="Apartment, studio, or floor">
            </div>
            <div class="form-row">
               <div class="form-group col-sm-6">
                  <label for="myCity">City</label>
                  <input type="text" class="form-control" id="myCity">
               </div>
               <div class="form-group col-sm-4">
                  <label for="myState">State</label>
                  <select id="myState" class="form-control">
                     <option selected>Choose...</option>
                     <option>...</option>
                  </select>
               </div>
               <div class="form-group col-sm-2">
                  <label for="myZip">Zip</label>
                  <input type="text" class="form-control" id="myZip">
               </div>
            </div>
            <div class="form-group">
               <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="myCheck">
                  <label class="form-check-label" for="myCheck">
                  Check me out
                  </label>
               </div>
            </div>
            <button type="submit" class="btn btn-primary">Sign in</button>
         </form>
      </div>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>

6- HTML Input Types

Das Element  <input> ist ein der Elemente, die an einer Form teilnehmen. Bevor HTML5 geboren war, gibt es 9 Arten <input> als  button, checkbox, file, hidden, image, password, radio, reset, submit, text. Im Oktober 2014 wurde  HTML5 geboren. Es stellte 12 anderen Arten vom  <input> vor. Das sind  color, date, datetime-local, email, month, number, range, search, tel, time, url, week. Alle Arten werden durch  Bootstrap unterstützt und baute die Klasse zur Verwendung ein:
Bootstrap Class Typ Die Bezeichnung
.btn button Definieren, ein Button ist Định nghĩa một nút có thể nhấn (clickable)
reset Einen Button reset definieren, um die Werte von der Form einzustellen.
submit
Einen Button submit definieren.
.form-check-input
.form-check-label
checkbox Ein checkbox definieren.
radio Einen radio button definieren.
.form-control text (Nach Default). einen Feld definieren, um ein Text einzugeben
password Einen Feld definieren, um das Passwort einzugeben.
https://www.w3schools.com/images/html5_badge20.pngemail Einen Feld definieren, um die Email Addresse einzugeben.
https://www.w3schools.com/images/html5_badge20.pngsearch Einen Text-Feld definieren, um das Suchenwort einzugeben
https://www.w3schools.com/images/html5_badge20.pngurl Einen Feld definieren um ein URL einzugeben.
https://www.w3schools.com/images/html5_badge20.pngtel Einen Feld definieren um die Telefon-Nummer einzugeben.
https://www.w3schools.com/images/html5_badge20.pngnumber Einen Feld definieren um eine Zahl einzugeben.
.form-control https://www.w3schools.com/images/html5_badge20.pngcolor Einen Color Picker definieren (die Farbenauswähler)
.form-control-file file Einen Feld zum Anzeigen der gewählten File und den Button "Browse" zur File-Auswahl definieren.

hidden Einen versteckten Feld definieren.
image Eine Image als einen Button submit definieren.
 .form-control-range https://www.w3schools.com/images/html5_badge20.pngrange Einen control definieren um eine Wert in einer Range auszuwählen (wie slider)
.form-control https://www.w3schools.com/images/html5_badge20.pngdate Einen control definieren um das Datum auszuwählen (Jahr, Monat, Tag, aber die Zeit nicht einschließend)
https://www.w3schools.com/images/html5_badge20.pngtime Einen control definieren um die Zeit auszuwählen (die Zeitzone nicht einschließend)
https://www.w3schools.com/images/html5_badge20.pngdatetime-local Einen control definieren um das Datum und die Zeit auszuwählen (Jahr, Monat, Tag, Zeit aber die Zeitzone nicht einschließend)
https://www.w3schools.com/images/html5_badge20.pngmonth Einen control definieren um den Monat und das Jahr auszuwählen.
https://www.w3schools.com/images/html5_badge20.pngweek Einen control definieren um die Woche und das Jahr auszuwählen (die Zeitzone nicht einschließend).

button, reset, submit

Die Elemente  <input type="button|reset|submit"> sind eigentlich ein Button, Bootstrap verwenden die Klasse  .btn um sie anzuwenden. Sie können die Details in der Unterricht über  Bootstrap Button.

text, password, email, search, url, tel, number

Die Element  <input> mit der obengemeinten Typen ist ein Feld (field) damit der Benutzer die Textuellen Daten einzugeben. Bootstrap verwendet die Klasse  .form-control um für die Elemente anzuwenden.
text, password, email, search, url, tel, number
<form>
   <div class="form-group">
      <label for="myTel1">Input Tel (Default)</label>
      <input type="tel" id="myTel1">
   </div>
   <div class="form-group">
      <label for="myTel2">Bootstrap Input Tel</label>
      <input type="tel" id="myTel2" class="form-control">
   </div>
</form>

color

Bootstrap verwendet die Klasse  .form-control um für  <input type="color"> anzuwenden. Aber es scheint, dass es nicht so gut wie erwartet funktioniert. (mindesten bis die Version  4.1).
Das folgende Beispiel ist 2 Elemente  <input type="color">, Ein Element wurde für die Klasse  .form-control nicht angewendet und ein Element wird für die Klasse . form-control angewendet:
Unten ist es ein Beispiel, das eine Gegenmaßnahme des obengemeinten Problem bringt:
input[type=color].form-control {
     height: 40px;
}
input-color-example.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Form Example</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
      <style>
         input[type=color].form-control {
         height: 40px;
         }
      </style>
   </head>
   <body>
      <div class="container-fluid mt-3">
         <h4 class="mb-5">Input type="color"</h4>
         <form>
            <div class="form-group">
               <label for="myColor1">Input Color (Default)</label>
               <input type="color" id="myColor1">
            </div>
            <div class="form-group">
               <label for="myColor2">Bootstrap Input Color (.form-control)</label>
               <input type="color" class="form-control input-sm" id="myColor2">
            </div>
         </form>
      </div>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>

checkbox, radio

Für  Bootstrap schließt ein volles Element  checkbox (or  radio) 2 Elemente   <input> und  <label> , die durch  <div class="form-check"> eingewickelt werden. Bootstrap verwendet die Klasse .form-check-input um für  <input> anzuwenden und verwendet die Klasse .form-check-label um für  <label> ​​​​​​​anzuwenden.
Achtung: <label> muss hinter vom   <input type="checkbox|radio"> gestellt werden.
checkbox/radio
<form>
   <div class="form-group">
      <div class="form-check">
         <input type="radio" id="myRadio1" class="form-check-input">
         <label for="myRadio1">Bootstrap Input Radio</label>
      </div>
   </div>
   <div class="form-group">
      <div class="form-check">
         <input type="checkbox" id="myCheckbox2" class="form-check-input">
         <label for="myCheckbox2" class="form-check-label">Bootstrap Input Checkbox</label>
      </div>
   </div>
</form>
Verwenden Sie das Attribut  disabled für das Element   <input type="checkbox|radio"> um es zu deaktivieren. Der Benutzer kann mit diesem Element nicht interagieren, gleichzeitig deaktiviert es die Elemente  <label> in einem gleichen  .form-check wie das oben <input>.
disabled checkbox/radio
<form>
   <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
      <label class="form-check-label" for="defaultCheck1">
      Default checkbox
      </label>
   </div>
   <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
      <label class="form-check-label" for="defaultCheck2"
      Disabled checkbox
      </label>
   </div>
</form>

range

<input type="range"> wird in  HTML ab die Version 5 eingeführt. Es erlaubt dem Benutzer, eine Wert in einem Bereich auszuwählen.  Bootstrap verwendet die Klasse  .form-control-range um für dieses Element anzuwenden.
Input range
<form>
   <div class="form-group">
      <label for="myRange1">Input Range (Default)</label>
      <input type="range" id="myRange1" min="5" max="10" step="0.01">
   </div>
   <div class="form-group">
      <label for="myRange2">Bootstrap Input Range</label>
      <input type="range" id="myRange2" min="5" max="10" step="0.01"
         class="form-control-range">
   </div>
</form>

file

<input type="file"> erlaubt dem Benutzer, eine File hochzuladen.  Bootstrap verwendet die Klasse  .form-control-file um für das Element anzuwenden.
Form file
<form>
   <div class="form-group">
      <label for="myFile1">Input File (Default)</label>
      <input type="file" id="myFile1">
   </div>
   <div class="form-group">
      <label for="myFile2">Bootstrap Input File</label>
      <input type="file" class="form-control-file" id="myFile2">
   </div>
</form>

date, time, datetime-local, week, month

Die Version  HTML5 wird einige Typen für  <input> vorgestellt, damit der Benutzer die Information über das Datum und die Zeit eingeben kann.  Bootstrap verwendet die Klasse  .form-control für dieses Typ.
Input Date
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Form Example</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container-fluid mt-3">
         <h4 class="mb-5">Input type="date" (.form-control)</h4>
         <form>
            <div class="form-group">
               <label for="myDate1">Input Date (Default)</label>
               <input type="date" id="myDate1">
            </div>
            <div class="form-group">
               <label for="myDate2">Bootstrap Input Date</label>
               <input type="date" id="myDate2" class="form-control"
                  min="2018-01-01" max="2018-12-31" value="2018-05-18">
            </div>
         </form>
      </div>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>
<input type="date">
Input Date
<div class="form-group">
   <label for="myDate2">Bootstrap Input Date</label>
   <input type="date" id="myDate2" class="form-control"
      min="2018-01-01" max="2018-12-31" value="2018-05-18">
</div>
<input type="datetime-local">
Input Datetime-Local
<div class="form-group">
   <label for="myDateTimeLocal2">Bootstrap Input DateTimeLocal</label>
   <input type="datetime-local" id="myDateTimeLocal2" class="form-control"
      min="2018-06-07T00:00" max="2018-06-14T00:00" value="2018-06-08T14:02">
</div>
<input type="time">
Input Time
<div class="form-group">
   <label for="myTime2">Bootstrap Input Time</label>
   <input id="myTime2" class="form-control"
      type="time"
      min="9:00" max="18:00" value="13:07">
</div>
<input type="week">
Input Week
<div class="form-group">
   <label for="myWeek2">Bootstrap Input Week</label>
   <input id="myWeek2" class="form-control"
      type="week"
      min="2018-W27" max="2018-W35" value="2018-W30">
</div>
<input type="month">
Input Month
<div class="form-group">
   <label for="myMonth2">Bootstrap Input Month</label>
   <input id="myMonth2" class="form-control"
      type="month"
      min="2018-03" value="2018-05">
</div>

7- Form Textarea, Select

Das Element  <textarea> wird verwendet um eine Region zu erstellt, damit der Benutzer die textuellen Daten auf einer oder mehreren Linie eingeben kann.  Bootstrap verwendet die Klasse   .form-control für das Element.
Textarea
<form>
   <div class="form-group">
      <label for="myTextarea1">Textarea (Default)</label>
      <textarea id="myTextarea1" rows="3">Line1<br>Line2</textarea>
   </div>
   <div class="form-group">
      <label for="myTextarea2">Bootstrap Textarea</label>
      <textarea id="myTextarea2" class="form-control" rows="3"></textarea>
   </div>
</form>
Das Element  <select> wird benutzt um eine Liste der Options zu erstellen. Und der Benutzer kann eine oder mehr von diesen auswählen.
Form Select
<form>
   <div class="form-group">
      <label for="mySelect1">Select (Single Select)</label>
      <select id="mySelect1" class="form-control">
         <option value="js">Javascript</option>
         <option value="css">Css</option>
         <option value="bootstrap" selected>Bootstrap</option>
      </select>
   </div>
   <div class="form-group">
      <label for="mySelect2">Select (Multi Select)</label>
      <select id="mySelect2" class="form-control" multiple>
         <option value="js">Javascript</option>
         <option value="css">Css</option>
         <option value="bootstrap" selected>Bootstrap</option>
      </select>
   </div>
</form>

8- Disabled Form

Grundsätzlich können Sie das Attribut  disabled für  <input>,<texarea>,<select> um es zu deaktivieren. Allerdings wenn Sie alle solche Elementen deaktivieren möchten, wickeln Sie durch  <fieldset disabled> ein
Achtung: Das Attribut  disabled vom  <fieldset> kann in einem Browser nicht funktionieren. Zum Beispiel  IE , die Version 11 oder älter. Deshalb müssen Sie die benutzerdefinierten  Javascript für diesen Browser benutzen.
fieldset disabled
<form>
   <fieldset disabled>
      <div class="form-group">
         <label for="myEmail">Email</label>
         <input type="email" id = "myEmail" class="form-control" placeholder="Email">
         <label for="myPassword">Password</label>
         <input type="password" id="myPassword" class="form-control" placeholder="Password">
         <button type="submit" class="btn btn-primary">Submit</button>
      </div>
   </fieldset>
</form>

View more Tutorials: