Cara membuat form dengan Bootstrap

Ditulis Oleh:
cara membuat form dengan bootstrap

Cara membuat form dengan bootstrap – Pada postingan sebelumnya saya pernah membahas mengenai cara membuat form di html. Pada postingan tersebut kita belajar dasar-dasar html dalam membuat form dengan pengenalan teori mengenai penggunaan atribut pada form dan contoh sederhana form dengan html. Pada artikel tersebut saya membuat contoh form login. Namun karena pada saat itu saya hanya berfokus pada elemen dalam html tanpa melihat sisi estetika/desainnya. Sehingga tampilan form terlihat tidak bagus saat tampil dibrowser. Berikut ini adalah contoh sintak dan hasil outputnya:

<!DOCTYPE html>
<html>
<head>
<title>Form Login</title>
</head>
<body>
<h2>Form Login</h2>
    <form action="#" method="post">
        <fieldset>
        <legend>Form Login</legend>
        <p>
            <label>Username:</label>
            <input type="text" name="username" placeholder="username" />
        </p>
        <p>
            <label>Password:</label>
            <input type="password" name="password" placeholder="password" />
        </p>
        <p>
            <input type="submit"/>
        </p>
        </fieldset>
    </form>
</body>
</html>
contoh form login tanpa bootstrap

Karena pada saat itu kita hanya berfokus pada komponen elemen html, maka tampilan style-pun belum terlihat. Itu sebabnya pada postingan kali ini saya akan membuat style untuk mendesain tampilannya dengan menggunakan framework css bootstrap.

Jika kalian belum mengetahui apa itu bootstrap ? dan bagaimana cara menggunakannya, Sebaiknya kamu belajar dulu konsepnya secara matang sebelum melanjutkan pembahasan kali ini. Sedangkan bila kalian yang sudah mengetahuinya kalian bisa belajar dari tutorial yang saya berikan dalam postingan ini.

Membuat form login dengan Bootstrap

<!DOCTYPE html>
<html>
<head>
 <!-- Load file CSS Bootstrap offline -->
<link rel="stylesheet" href="css/bootstrap.min.css">
  
</head>
<body>
<div class="container">
<h2>Form Login dengan Bootstrap</h2>
<form action="#" method="post">
     
 <div class="form-group">
       <label>Username:</label>
         <input type="text" name="username" class="form-control" placeholder="username" />
 </div>
 <div class="form-group">
       <label>Password:</label>
         <input type="password" name="password" class="form-control" placeholder="password" />
 </div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html> 
form login dengan bootstrap

Penjelasan:

Pada contoh form login dengan bootstrap diatas, saya membuat 3 komponen elemen html. yang pertama terdapat 2 tag input dengan type text untuk inputan username dan password untuk isian password dan kemudian terdapat button dengan tipe submit.

Untuk membuat form diatas saya menggunakan internal bootstrap. yang saya download dari https://getbootstrap.com/ . Lalu kemudian saya panggil dengan pemanggilan css internal pada tag <head>.

Layout saya menggunakan class container untuk membuat space pada setiap sisi. Untuk membungkus setiap elemen pada form saya menggunakan class form-group sedangkan untuk pada setiap elemen input saya memakai class form-control. Terakhir untuk button saya menggunakan class button primary dengan pemanggilan class btn btn-primary. Lihat detail class untuk setiap elemen berikut

sintak from login

Membuat form daftar dengan bootstrap

Karena form login hanya memuat beberapa komponen saja contohnya hanya tag input dengan tipe text dan password, serta button, namun sebenarnya terdapat banyak komponen lainnya seperti combo box (tag select), radio button, check box, dan lainnya yang perlu kita ketahui juga penggunannya dalam bootstrap. Sebenarnya konsepnya sama semua elemen html yang ingin dibuat style css dengan bootstrap perlu menggunakan atribut class untuk mengambil nilai style dari css bootstrap yang telah kita miliki.

<!DOCTYPE html>
<html>
<head>
 <!-- Load file CSS Bootstrap offline -->
<link rel="stylesheet" href="css/bootstrap.min.css">
  
</head>
<body>
<div class="container">
<h2>Form Login dengan Bootstrap</h2>
    <form action="#" method="post">
     
 <div class="form-group">
     <label>Nama:</label>
     <input type="text" name="username" class="form-control" placeholder="Nama" />
 </div>
    <div class="form-group">
  <label>Pilih Jurusan:</label>
  <select class="form-control">
    <option>Teknik Informatika</option>
    <option>Sistem Informasi</option>
    <option>Teknik Komputer</option>
    <option>Manajemen Informatika</option>
	 <option>Komputerisasi Akuntansi</option>
  </select>
</div> 
 <div class="form-group">
     <label>Jenis Kelamin:</label>
	
<div class="form-check">

  <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio">Laki-laki
  </label>
</div>
<div class="form-check">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio">Perempuan
  </label>
</div>
 </div>
 <div class="form-group">
     <label>Hobi:</label>
	
 <div class="form-check">

  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Sepak Bola
  </label>
</div>
<div class="form-check">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Membaca Buku
  </label>
</div>
<div class="form-check">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Berenang
  </label>
</div> 
<div class="form-check">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Bermain Gitar
  </label>
</div> 
<div class="form-check">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Traveling
  </label>
</div> 
 </div>

 <div class="form-group">
  <label>Alamat:</label>
  <textarea class="form-control" rows="5"></textarea>
</div> 
        <button type="submit" class="btn btn-primary">Submit</button>
       
    </form>
	</div>
</body>
</html> 

Pada contoh diatas saya membuat form daftar yang telah meliputi komponen :

  • Input : Untuk field nama
  • combo box : untuk field jurusan
  • radio button : untuk jenis kelamin
  • check box : untuk field hobi
  • textarea : untuk alamat.

Rekomendasi Bacaan:

Setiawan Dimas

Penulis di Kelasprogrammer.com, Senang dengan dunia programming khusus web development. Lulusan Sarjana Teknik Informatika STMIK Akakom Yogyakarta. Ingin berfokus pada Pemrograman web dan Internet Marketing.
Setiawan Dimas

Latest posts by Setiawan Dimas (see all)