<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <legend>Formulir Hibah Buku</legend> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="nama">Nama Lengkap</label> <div class="col-md-4"> <input id="nama" name="nama" placeholder="nama" class="form-control input-md" required="" type="text"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="kerja">Pekerjaan</label> <div class="col-md-4"> <input id="kerja" name="kerja" placeholder="perkerjaan" class="form-control input-md" required="" type="text"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="no_hp">Nomor HP</label> <div class="col-md-4"> <input id="no_hp" name="no_hp" placeholder="nomor hp" class="form-control input-md" required="" type="text"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="email">E-mail</label> <div class="col-md-3"> <input id="email" name="email" placeholder="@mail" class="form-control input-md" required="" type="text"> <span class="help-block">ex: email@gmail.com</span> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="alamat">Alamat</label> <div class="col-md-4"> <textarea class="form-control" id="alamat" name="alamat"></textarea> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="no_hp">Judul Buku</label> <div class="col-md-4"> <input id="no_hp" name="judul_buku" placeholder="judul buku" class="form-control input-md" required="" type="text"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="no_hp">Jumlah Exemplar</label> <div class="col-md-2"> <input id="no_hp" name="jmlh_ex" placeholder="jumlah exemplar" class="form-control input-md" required="" type="text"> </div> </div> <!-- Multiple Radios (inline) --> <div class="form-group"> <label class="col-md-4 control-label" for="cara_wakaf">Cara Wakaf</label> <div class="col-md-4"> <label class="radio-inline" for="cara_wakaf-0"> <input name="cara_wakaf" id="cara_wakaf-0" value="1" checked="checked" type="radio"> Diantar ke perpustakaan </label> <label class="radio-inline" for="cara_wakaf-1"> <input name="cara_wakaf" id="cara_wakaf-1" value="2" type="radio"> Jemput di alamat </label> <label class="radio-inline" for="cara_wakaf-2"> <input name="cara_wakaf" id="cara_wakaf-2" value="3" type="radio"> Diberi uang cash </label> </div> </div> <!-- Button (Double) --> <div class="form-group"> <label class="col-md-4 control-label" for="">PIC Perpustakaan</label> <div class="col-md-8"> <button id="" name="" class="btn btn-inverse">Khatib A. Latief</button> <button id="" name="" class="btn btn-inverse">HP: +62811683019</button> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="pesan">Pesan Untuk UPT Perpustakaan</label> <div class="col-md-4"> <textarea class="form-control" id="pesan" name="pesan"></textarea> </div> </div> <!-- Button (Double) --> <div class="form-group"> <label class="col-md-4 control-label" for="kirim"></label> <div class="col-md-8"> <button id="kirim" name="kirim" class="btn btn-success">Kirim Pesan</button> <button id="reset" name="reset" class="btn btn-danger">Hapus Text</button> </div> </div> </fieldset> </form>