Selasa, 07 Maret 2017

Bootstrap Form Inputs

Assalamualaikum Wr.Wb



Mari kita lanjutkan postingan sebelumnya yaitu Membuat Form Dengan Bootstrap dan kali ini kita akan membahas form inputs,ini hampir sama dengan form biasa yang sudah kita bahas sebelumnya.Namun tetap ada perbedaannya,baiklah mari kita mulai satu persatu karena ada beberapa jenis form inputs.

  • Input
Ini merupakan jenis input biasa,masukkan tag atau script  di bawah ini

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>
<div class="container">
<form>
    <div class="form-group">
    <label>Nama:</label>
    <input type="text" class="form-control">       
    </div>
    <div class="form-group">
    <label>Password:</label>
    <input type="password" class="form-control">
    </div>
</form>
   
</div>
</body>
</html>

Dan inilah hasilnya


  • Text Area
Ini bisa di gunakan untuk menuliskan komentar atau semacamnya

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>
<div class="container">
<h2>Text Area</h2>
<form class="form-group">
<label>Comment:</label>
<textarea class="form-control" rows="5"></textarea>   
</form>
</div>
</body>
</html>

Dan hasilnya seperti di bawah ini

   
  • Checkbox
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>
<div class="container">
<h2>Checkbox</h2>
<form>
    <div class="checkbox">
        <label><input type="checkbox"> Bakso</label>
    </div>   
    <div class="checkbox">
    <label><input type="checkbox">Soto</label>       
    </div>
    <div class="checkbox">
    <label><input type="checkbox">Sate</label>
       
    </div>
</form>
</div>
</body>
</html>
Dan inilah hasilnya
  •  Radio Button
Hampir sama dengan checkbox bedanya hanya pada bentuknya radio button berbentuk bulat
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>
<div class="container">
<h2>Radio Button</h2>
<form>
    <div class="checkbox">
        <label><input type="radio"> Bakso</label>
    </div>   
    <div class="checkbox">
    <label><input type="radio">Soto</label>       
    </div>
    <div class="checkbox">
    <label><input type="radio">Sate</label>
       
    </div>
</form>
</div>
</body>
</html>
Dan inilah hasilnya
Ya itu tadi beberapa jenis form inputs yang prinsipnya hampir sama dengan form yang sudah kita bahas sebelumnya,oke mungkin cukup sekian dulu postingan kali ini.Terima kasih sudah mau berkunjung sampai jumpa di postingan berikutnya.

Referensi:http://w3schools.com/
 
Wassalamualaikum Wr.Wb   
Share:

0 komentar:

Posting Komentar