使用bootstrap制作form表單的方法

發(fā)布時(shí)間：2020-08-28 10:10:43 來源：億速云閱讀：447 作者：小新欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)使用bootstrap制作form表單的方法的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。

Bootstrap可以輕松創(chuàng)建經(jīng)常看到的表單類型，編碼非常的簡(jiǎn)單。

制作表單的方法

首先利用<form>標(biāo)簽設(shè)置表單，然后為表單的每個(gè)元素設(shè)置class =”form - group“（用“<div>”等標(biāo)簽設(shè)置你想要設(shè)置class =”form-group“的范圍）。最后通過在<input>標(biāo)簽中設(shè)置class =”form-control“來完成。

我們來看bootstrap創(chuàng)建表單的具體示例

代碼如下

<!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">確認(rèn)
        </label>
      </div>
      <button type="submit" class="btu btn-default">發(fā)送</button>
    </form>
  </body>
</html>

運(yùn)行效果如下：

使用bootstrap制作form表單的方法

此外，還可以創(chuàng)建內(nèi)聯(lián)表單。我們只要在<form>標(biāo)簽中添加class =”form-inline“就可以了，在這里就不多說了，有興趣的朋友可以自己試一試。

感謝各位的閱讀！關(guān)于使用bootstrap制作form表單的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問一下細(xì)節(jié)

使用bootstrap制作form表單的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽