Cara Sederhana Membuat Form Pendaftaran Dengan Bootstrap
Oleh: ![Unknown]( "Unknown")
Unknown |
5/13/2016 02:25:00 PM
Hallo sahabat aksesoris kamu, sudah seminggu terakhir ini ane tidak dapat membuat postingan di karenakan faktor M, Pada kesempatan kali ini ane mau berbagi tentang cara membuat form pendaftaran dengan bootstrap versi 3.3.6, kenapa sih gan harus pake bootstrap? form bootstrap ini dapat menyesuaikan ukuran pada suatu device seperti handphone, laptop, pc istilahnya responsive lah. untuk cara menginstall bootstrap sendiri mungkin agan sudah pada tau yah.
Mudah kok gan untuk memahami class-class dan install bootstrap, ok dari pada panjang lebar langsung aja gan ane share cara membuat form register tersebut. cekidot
1. Kunjungi http://getbootstrap.com/getting-started/ ( untuk mengetahui fungsi bootstarp )
2. Copy paste file html di bawah ini ke notepad
<!DOCTYPE html>3. Copy file css ini dan pastekan di bawah <head>
<html lang="en">
<head>
<title>Admin</title>
</head>
<body>
<div class="container">
<div class="row main">
<div class="panel-heading">
<div class="panel-title text-center">
<h1 class="title">Form Pendaftaran</h1>
<hr />
</div>
</div>
<div class="main-login main-center">
<form class="form-horizontal" method="post" action="#">
<div class="form-group">
<label for="nama" class="cols-sm-2 control-label">Nama Lengkap</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="nama" id="nama" placeholder="Masukkan Nama Lengkap"/>
</div>
</div>
</div>
<div class="form-group">
<label for="email" class="cols-sm-2 control-label">Email</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="email" id="email" placeholder="Masukkan Email"/>
</div>
</div>
</div>
<div class="form-group">
<label for="handphone" class="cols-sm-2 control-label">No. Handphone</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="handphone" id="handphone" placeholder="Masukkan No. Handphone"/>
</div>
</div>
</div>
<div class="form-group">
<label for="katasandi" class="cols-sm-2 control-label">Kata sandi</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock" aria-hidden="true"></i></span>
<input type="password" class="form-control" name="katasandi" id="katasandi" placeholder="Masukkan Katasandi"/>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-3 col-xs-9">
<label class="checkbox-inline">
<input type="checkbox" value="Setuju"> Saya Setuju dengan <a href="#">Kebijakan dan Ketentuan</a> yang berlaku.
</label>
</div>
</div>
<div class="form-group ">
<button type="button" class="btn btn-primary btn-lg btn-block login-button">Daftar</button>
</div>
<div class="login-register">
<a href="index.php">Masuk</a>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
4. Lalu save serta simpan kode html dan ccs tersebut dengan nama register.html ( atau terserah ente namanya )
5. Buka fille html dengan IE, Mozilla, Chrome dengan catatan pc/komputer harus online, bisa dengan offline juga dengan memberi link css, font, atau javascript pada file htmlnya, NB: ente harus download dulu komponen bootstrap yang sudah ane kasih link di atas.
6. Sampai disini ente sudah selesai dan tinggal konfigurasi dan memberikan fungsi php agar dapat berjalan dengan baik dan bisa terekam ke dalam database.
Sekian artikel singkat ini ane buat, kurang lebihnya ane mohon maaf. selamat mencoba dan semoga bermanfaat.
