Selasa, 21 Maret 2017

Bootstrap: Form Input 2






Assalamu'alaikum wr.wb

Kemari saya sudah berbagi Cara Membuat Form Input dengan Bootstrap. Ini adalah lanjutan dari postingan kemarin.

Kontrol Statis

Jika anda perlu mamasukkan teks biasa disamping label dalam bentuk horisontal, gunakan class .form-control-static pada elemen <p>.

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/lib/bootstrap.min.css">
  <script src="/lib/jquery-1.12.2.min.js"></script>
  <script src="/lib/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Form Inline: control states</h2>
  <form class="form-inline" role="form">
    <div class="form-group">
      <label for="focusedInput">Focused</label>
      <input class="form-control" id="focusedInput" type="text">
    </div>
    <div class="form-group">
      <label for="inputPassword">Disabled</label>
      <input class="form-control" id="disabledInput" type="text" disabled>
    </div>
    <div class="form-group has-success has-feedback">
      <label for="inputSuccess2">Input with success</label>
      <input type="text" class="form-control" id="inputSuccess2">
      <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
    <div class="form-group has-warning has-feedback">
      <label for="inputWarning2">Input with warning</label>
      <input type="text" class="form-control" id="inputWarning2">
      <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
    </div>
    <div class="form-group has-error has-feedback">
      <label for="inputError2">Input with error</label>
      <input type="text" class="form-control" id="inputError2">
      <span class="glyphicon glyphicon-remove form-control-feedback"></span>
    </div>
  </form>
</div>

</body>
</html>

Sekian artikel kali ini.
Semoga Beermanfaat...!!!

Referensi:www.w3schools.com

Wassalamu'alaikum wr.wb


EmoticonEmoticon