So erstellen Sie mit Bootstrap ein Formular-HTML-Tutorial-php.cn

So erstellen Sie mit Bootstrap ein Formular

不言

Freigeben： 2019-01-03 15:15:06

Original

11305 Leute haben es durchsucht

Bootstrap kann problemlos häufig vorkommende Formulartypen erstellen und die Codierung ist sehr einfach. In diesem Artikel werfen wir daher einen Blick darauf, wie Bootstrap zum Erstellen von Formularen verwendet wird.

So erstellen Sie mit Bootstrap ein Formular

So erstellen Sie ein Formular

Legen Sie zuerst das Formular mit dem Tag

fest und legen Sie es dann fest das Formular für jedes Element des Formulars. Legen Sie das Element class="form-group" fest (verwenden Sie Tags wie „

“, um den Bereich festzulegen, den Sie festlegen möchten, class="form-group"). Vervollständigen Sie es schließlich, indem Sie class = „form-control“ im -Tag festlegen.

Sehen wir uns ein konkretes Beispiel für die Bootstrap-Erstellung eines Formulars an

Der Code lautet wie folgt

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="utf-8">
    <title>sample</title>
    <script src="bootstrap-4.2.1-dist/js/bootstrap.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="bootstrap-4.2.1-dist/css/bootstrap.min.css" />
  </head>
  <body style="padding: 50px;">
    <form>
      <div class="form-group">
        <label for="email">电子邮箱</label>
        <input type="email" class="form-control" id="email" placeholder="电子邮箱">
      </div>
      <div class="form-group">
        <label for="pass">密码</label>
        <input type="password" class="form-control" id="pass" placeholder="密码">
      </div>
      <div>
      	<label for="file">文件上传:</label>

      	<input type="file" id="file">
      	<p class="help-block">显示文件帮助。</p>
      </div>
      <div class="check">
        <label>
          <input type="checkbox">确认
        </label>
      </div>
      <button type="submit" class="btu btn-default">发送</button>
    </form>
  </body>
</html>

Nach dem Login kopieren

Der Laufeffekt ist wie folgt:

So erstellen Sie mit Bootstrap ein Formular

Zusätzlich besteht die Möglichkeit, Inline-Formulare zu erstellen. Wir müssen nur class = „form-inline“ zum

-Tag hinzufügen. Interessierte Freunde können es selbst ausprobieren.

Zusammenfassend ist das Obige der gesamte Inhalt dieses Artikels. Für weitere spannende Inhalte können Sie auf andere verwandte Tutorial-Kolumnen auf der chinesischen PHP-Website achten! ! !

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit Bootstrap ein Formular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!