以下の内容はhttps://dk521123.hatenablog.com/entry/36103698より取得しました。

【Bootstrap4】Bootstrap 4 ～ Form 編 ～

UIフレームワーク

■ 公式サイト

https://getbootstrap.com/docs/4.1/components/forms/

■ サンプル

<!doctype html>
<html lang="jp">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <!-- Form -->
    <div class="container">
      <form>
        <div class="form-row">
          <div class="form-group col-md-6">
            <label for="inputEmail4">Email</label>
            <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
          </div>
          <div class="form-group col-md-6">
            <label for="inputPassword4">Password</label>
            <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
          </div>
        </div>
        <div class="form-group">
          <label for="inputAddress">Address</label>
          <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
        </div>
        <div class="form-group">
          <label for="inputAddress2">Address 2</label>
          <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
        </div>
        <div class="form-row">
          <div class="form-group col-md-6">
            <label for="inputCity">City</label>
            <input type="text" class="form-control" id="inputCity">
          </div>
          <div class="form-group col-md-4">
            <label for="inputState">State</label>
            <select id="inputState" class="form-control">
              <option selected>Choose...</option>
              <option>...</option>
            </select>
          </div>
          <div class="form-group col-md-2">
            <label for="inputZip">Zip</label>
            <input type="text" class="form-control" id="inputZip">
          </div>
        </div>
        <div class="form-group">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="gridCheck">
            <label class="form-check-label" for="gridCheck">
              Check me out
            </label>
          </div>
        </div>
        <button type="submit" class="btn btn-primary">Sign in</button>
      </form>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

■ フローティングラベル

https://blogs.yahoo.co.jp/dk521123/37672476.html
で扱ったフローティングラベル（placeholder が動いてラベルになる）を
Bootstrap4で実装したい

方法１：独自実装

https://coliss.com/articles/build-websites/operation/css/css-only-floating-label.html
を参考に実装。
サンプル 
<!doctype html>
<html lang="jp">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <style>
    .input-with-floating-label {
      position: relative;
      margin: auto;
      width: 100%;
      max-width: 280px;
    }
    .input-with-floating-label .label {
      position: absolute;
      top: 16px;
      left: 0;
      font-size: 16px;
      color: #9098a9;
      font-weight: 500;
      transform-origin: 0 0;
      transition: all 0.2s ease;
    }
    .input-with-floating-label .border {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 2px;
      width: 100%;
      background: #07f;
      transform: scaleX(0);
      transform-origin: 0 0;
      transition: all 0.15s ease;
    }
    .input-with-floating-label input {
      -webkit-appearance: none;
      width: 100%;
      border: 0;
      font-family: inherit;
      padding: 12px 0;
      height: 48px;
      font-size: 16px;
      font-weight: 500;
      border-bottom: 2px solid #c8ccd4;
      background: none;
      border-radius: 0;
      color: #223254;
      transition: all 0.15s ease;
    }
    .input-with-floating-label input:hover {
      background: rgba(34,50,84,0.03);
    }
    .input-with-floating-label input:not(:placeholder-shown) + span {
      color: #5a667f;
      transform: translateY(-26px) scale(0.75);
    }
    .input-with-floating-label input:focus {
      background: none;
      outline: none;
    }
    .input-with-floating-label input:focus + span {
      color: #07f;
      transform: translateY(-26px) scale(0.75);
    }
    .input-with-floating-label input:focus + span + .border {
      transform: scaleX(1);
    }
    </style>
    <title>Hello, world!</title>
  </head>
  <body>
    <!-- Form -->
    <div class="container">
      <h1>Floating Labels</h1>
      <form>
        <div class="form-row">
          <div class="form-group col-md-6">
            <label for="inputEmail4" class="input-with-floating-label">
              <input type="email" id="inputEmail4" placeholder=" ">
              <span class="label">Email</span>
            </label>
          </div>
          <div class="form-group col-md-6">
            <label for="inputPassword4" class="input-with-floating-label">
              <input type="password" id="inputPassword4" placeholder=" ">
              <span class="label">Password</span>
            </label>
          </div>
        </div>
      <button type="submit" class="btn btn-primary">Sign in</button>
      </form>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script src="">https://cdn.jsdelivr.net/npm/floating-form-labels@1.2.4/dist/floatingFormLabels.min.js">
    <script>
    $('.ffl-wrapper').floatingFormLabels();
    </script>
  </body>
</html>

方法２：プラグインを使う

 * 以下の製品を使う

【補足】
 * 別に、Bootstrapを使わなくてもフローティングラベルを実装できるみたい
https://github.com/tonystar/float-label-css
ライセンス (MIT)
https://github.com/tonystar/float-label-css/blob/master/LICENSE
サンプル (いまいち) 
<!doctype html>
<html lang="jp">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="">https://cdn.rawgit.com/tonystar/float-label-css/v1.0.2/dist/float-label.min.css"/>
    <style>

    </style>
    <title>Hello, world!</title>
  </head>
  <body>
    <!-- Form -->
    <div class="container">
      <form>
        <div class="form-row">
          <div class="form-group col-md-6 has-float-label">
            <input type="email" id="inputEmail4" placeholder="Email">
            <label for="inputEmail4">Email</label>
          </div>
          <div class="form-group col-md-6 has-float-label">
            <input type="password" id="inputPassword4" placeholder="Password">
            <label for="inputPassword4">Password</label>
          </div>
        </div>
      <button type="submit" class="btn btn-primary">Sign in</button>
      </form>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>
その他の製品
https://www.cssscript.com/bootstrap-4-form-floating-labels/
https://www.cssscript.com/demo/bootstrap-4-form-floating-labels/ (デモ)

方法３：Material Design for Bootstrap 4を使う

 * 以下の関連記事を参照のこと。
https://blogs.yahoo.co.jp/dk521123/37674556.html

関連記事

Bootstrap 4 ～ 入門編 ～

https://blogs.yahoo.co.jp/dk521123/28015251.html

Material Design for Bootstrap 4 ～ フローティングラベル ～

https://blogs.yahoo.co.jp/dk521123/37674556.html

フローティングラベル（placeholder が動いてラベルになる）

https://blogs.yahoo.co.jp/dk521123/37672476.html

途中入力離脱防止 ～ beforeunloadイベント ～

https://blogs.yahoo.co.jp/dk521123/37672934.html


以上の内容はhttps://dk521123.hatenablog.com/entry/36103698より取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます
不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14