Heim > Artikel > Web-Frontend > So erstellen Sie mit Bootstrap ein Formular

So erstellen Sie mit Bootstrap ein Formular

不言Original: 2019-01-03 15:15:0611271Durchsuche

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 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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So erstellen Sie AnkerlinksNächster Artikel：So erstellen Sie Ankerlinks

In Verbindung stehende Artikel

Mehr sehen