<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>MSERVICE Booking Online</legend> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="fn">Nama Depan</label> <div class="col-md-4"> <input id="fn" name="fn" type="text" placeholder="Nama Depan" class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="ln">Nama Belakang</label> <div class="col-md-4"> <input id="ln" name="ln" type="text" placeholder="Nama Belakang" class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="email">E-mail</label> <div class="col-md-4"> <input id="email" name="email" type="text" placeholder="email" class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="add1">Alamat</label> <div class="col-md-4"> <input id="add1" name="add1" type="text" placeholder="Alamat Lengkap" class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="city">Kota</label> <div class="col-md-4"> <input id="city" name="city" type="text" placeholder="Kota" class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="zip">Kode Pos</label> <div class="col-md-4"> <input id="zip" name="zip" type="text" placeholder="Kode Pos" class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="phone">No. Telp</label> <div class="col-md-4"> <input id="phone" name="phone" type="text" placeholder="No. Telp" class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="identitas">No. Identitas</label> <div class="col-md-4"> <input id="identitas" name="identitas" type="number" placeholder="KTP/SIM" class="form-control input-md" required=""> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="jenis">Jenis Motor</label> <div class="col-md-4"> <select id="jenis" name="jenis" class="form-control input-md"> <option>MOGE > 500 CC</option> <option>Sport</option> <option>Bebek</option> <option>Matic</option> </select> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="tahun">Tahun Kendaraan</label> <div class="col-md-4"> <input id="tahun" name="tahun" type="text" placeholder="Contoh : 2016" class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="nopol">No. Polisi Kendaraan</label> <div class="col-md-4"> <input id="nopol" name="nopol" type="text" placeholder="Contoh : B 2016 MSM" class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="km">KM. Kendaraan</label> <div class="col-md-4"> <input id="km" name="km" type="text" placeholder="Contoh : 25000 km" class="form-control input-md" required=""> </div> </div> <!-- Date--> <div class="form-group"> <label class="col-md-4 control-label" for="date">Tanggal Booking Service</label> <div class="col-md-4"> <input id="date" name="date" type="date" placeholder="" class="form-control input-md" required=""> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="lokasi">Pilih Lokasi Service</label> <div class="col-md-4"> <select id="lokasi" name="lokasi" class="form-control input-md"> <option>SENAYAN</option> <option>Gedung 2</option> <option>Gedung 3</option> <option>Gedung 4</option> </select> </div> </div> <!-- Time--> <div class="form-group"> <label class="col-md-4 control-label" for="time">Waktu Perkiraan Datang Service</label> <div class="col-md-4"> <input id="time" name="time" type="time" placeholder="" class="form-control input-md" required=""> </div> </div> <!-- Multiple Radios (inline) --> <div class="form-group"> <label class="col-md-4 control-label" for="Training">Would you like to attend our Networking Reception on September 3, 2015?</label> <div class="col-md-4"> <label class="radio-inline" for="Training-0"> <input type="radio" name="Training" id="Training-0" value="yes" checked="checked"> Yes </label> <label class="radio-inline" for="Training-1"> <input type="radio" name="Training" id="Training-1" value="no"> No </label> </div> </div> <!-- Multiple Radios (inline) --> <div class="form-group"> <label class="col-md-4 control-label" for="Networking_Reception">Would you like to attend our Technical Product Update Session on September 4, 2015?</label> <div class="col-md-4"> <label class="radio-inline" for="Networking_Reception-0"> <input type="radio" name="Networking_Reception" id="Networking_Reception-0" value="meet_yes" checked="checked"> Yes </label> <label class="radio-inline" for="Networking_Reception-1"> <input type="radio" name="Networking_Reception" id="Networking_Reception-1" value="meet_no"> No </label> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="selectbasic">Select Basic</label> <div class="col-md-4"> <select id="selectbasic" name="selectbasic" class="form-control input-md"> <option>Option one</option> <option>Option two</option> </select> </div> </div> <!-- Multiple Radios (inline) --> <div class="form-group"> <label class="col-md-4 control-label" for="Dinner">Would you like to attend our Networking Dinner on September 4, 2015?</label> <div class="col-md-4"> <label class="radio-inline" for="Dinner-0"> <input type="radio" name="Dinner" id="Dinner-0" value="dinner_yes" checked="checked"> Yes </label> <label class="radio-inline" for="Dinner-1"> <input type="radio" name="Dinner" id="Dinner-1" value="dinner_no"> No </label> </div> </div> <!-- Button --> <div class="form-group"> <label class="col-md-4 control-label" for="submit"></label> <div class="col-md-4"> <button id="submit" name="submit" class="btn btn-primary">SUBMIT</button> </div> </div> </fieldset> </form>