Membuat Form Dengan Bootstrap

Pada tutorial ini akan di jelaskan tentang bagaimana cara penulisan syntax, element-element HTML yang kita butuhkan untuk membuat form dengan bootstrap, karena untuk mendapatkan hasil form yang menarik bootstrap telah membuat design form menjadi tiga model. yaitu:

Form dengan model vertikal
form degan model vertikal ini merupakan form default bootstrap.
Form dengan model inline
form dengan model inline adalah sebuah form yang label dan form inputnya terletak sebaris.
form dengan model horizontal
form dengan model horizontal ini merupakan form yang memiliki bentuk horizontal. artinya posisi label dan input form terletak horizontal.

untuk membuat form dengan menggunakan class bootstrap, anda bisa menggunakan class “form-control” pada tag <input>, <textarea>, <select> dan element form yang bisa di gunakan lainnya. baca di sini tentang cara membuat form dengan HTML.

Membuat form vertikal dengan bootstrap

Form vertikal bootstrap merupakan bentuk default dari form bootstrap. artinya bentuk form vertikal ini merupakan bentuk yang di gunakan secara default di bootstrap. untuk membuat form dengan bootstrap silahkan perhatikan contoh dan penjelasan berikut ini.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<!DOCTYPE html>

<html>

<head>

 <title>Bootstrap Part 13 : Membuat Form dengan Bootstrap</title>

 <link rel="stylesheet" type="text/css" href="css/bootstrap.css">

 <script type="text/javascript" src="js/jquery.js"></script>

 <script type="text/javascript" src="js/bootstrap.js"></script>

</head>

<body>

   <div class="container">  

   <h1>Membuat Form dengan Bootstrap | www.malasngoding.com</h1> 

 <form>

  <div class="form-group">

   <label for="nama">Nama Anda:</label>

   <input type="text" class="form-control">

  </div>

  <div class="form-group">

   <label for="alamat">Alamat anda:</label>

   <input type="text" class="form-control" id="alamat">

  </div>  

  <button type="submit" class="btn btn-default">Submit</button>

 </form>

   </div>

</body>

</html>

membuat form dengan bootstrap

contoh form bootstrap di atas merupakan form dengan model default atau vertikal. untuk membuat form dengan bootstrap yang pertama harus di perhatikan adalah pertama tambahkan class “form-group” untuk membalut element sebuah form seperti label dan formnya. dan kemudian pada form berikan class “form-control”.

1

2

3

4

<div class="form-group">

 <label>Nama Anda:</label>

 <input type="text" class="form-control">

</div>

tentu sangat mudah bukan. karena anda hanya perlu menambahkan class-class yang sudah di sediakan oleh bootstrap untuk membuat form dengan bootstrap. sedikit tambahan lagi, untuk membuat tombol pada form bootstrap kita telah mempelajari tentang cara membuat tombol dengan bootstrap pada tutorial sebelumnya, jadi anda tinggal menyesuaikan sesuai keinginan anda saja.

silahkan baca tutorial bootstrap part 4 : Membuat tombol dengan bootstrap.

Membuat Form Inline dengan Bootstrap

Cara membuat form inline dengan bootstrap cara nya juga sangat mudah. anda hanya perlu menambahkan class “form-inline” pada tag <form>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<!DOCTYPE html>

<html>

<head>

 <title>Bootstrap Part 13 : Membuat Form dengan Bootstrap</title>

 <link rel="stylesheet" type="text/css" href="css/bootstrap.css">

 <script type="text/javascript" src="js/jquery.js"></script>

 <script type="text/javascript" src="js/bootstrap.js"></script>

</head>

<body>

 <div class="container">  

 <h1>Membuat Form dengan Bootstrap | www.malasngoding.com</h1> 

  <form class="form-inline">

   <div class="form-group">

    <label for="nama">Nama Anda:</label>

    <input type="text" class="form-control">

   </div>

   <div class="form-group">

    <label for="alamat">Alamat anda:</label>

    <input type="text" class="form-control" id="alamat">

   </div>  

   <button type="submit" class="btn btn-primary">Simpan</button>

  </form>

 </div>

</body>

</html>

maka hasilnya akan seperti berikut

membuat form inline dengan bootstrap

Membuat Form Horizontal dengan bootstrap

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

<!DOCTYPE html>

<html>

<head>

 <title>Bootstrap Part 13 : Membuat Form dengan Bootstrap</title>

 <link rel="stylesheet" type="text/css" href="css/bootstrap.css">

 <script type="text/javascript" src="js/jquery.js"></script>

 <script type="text/javascript" src="js/bootstrap.js"></script>

</head>

<body>

 <div class="container">  

  <h1>Membuat Form dengan Bootstrap | www.malasngoding.com</h1> 

  <form class="form-horizontal">

   <div class="form-group">

    <label class="control-label col-sm-2" for="nama">Nama Anda:</label>

    <div class="col-sm-10">

     <input type="text" class="form-control">

    </div>

   </div>

   <div class="form-group">

    <label class="control-label col-sm-2" for="alamat">Alamat anda:</label>

    <div class="col-sm-10">

     <input type="text" class="form-control" id="alamat">

    </div>

   </div>  

   <button type="submit" class="btn btn-danger">Simpan</button>

  </form>  

 </div>

</body>

</html>

membuat form horizontal dengan bootstrap

untuk membuat form horizontal seperti di atas anda bisa memperhatikan pada contoh di atas

1

<form class="form-horizontal">

kita bisa menggunakan class “form-horizontal” pada tag <form>. kemudian pada bagian label dan formnya

1

2

3

4

<label class="control-label col-sm-2" for="nama">Nama Anda:</label>

<div class="col-sm-10">

      <input type="text" class="form-control">

</div>

di sini untuk membuat form horizontal kita harus menggunakan sistem grid bootstrap untuk mentukan letaknya. mungkin jika anda belum mempelajari tentang system grid bootstrap akan agak membingungkan, untuk tutorial grid system bootstrap akan kita pelajari pada tutorial selanjutnya pengenalan grid system bootstrap untuk membuat halaman website yang responsive pada seluruh device.

sekian tutorial bootstrap part 13 : membuat form dengan bootstrap.

Search This Blog

World Tech Reader