Dalam website kita mungkin menyediakan form untuk menghubungi kita. Dalam aplikasi, form juga sangat penting untuk memasukkan data proses atau data transaksi. Saat ini kita akan membuat tampilan form menggunakan Bootstrap.
Source code utama tampilan form dalam Bootstrap pada artikel ini adalah:
<div class=”form-group”>
<label for=”nama”>Nama</label>
<input type=”text” name=”nama” class=”form-control” placeholder=”Nama anda” />
</div>
<div class=”form-group”>
<label for=”email”>Email</label>
<input type=”text” name=”email” class=”form-control” placeholder=”Email anda” />
</div>
<div class=”form-group”>
<label for=”telpon”>Telpon</label>
<input type=”text” name=”telpon” class=”form-control” placeholder=”No Tlp anda” />
</div>
<div class=”form-group”>
<label for=”pesan”>Pesan</label>
<textarea name=”pesan” class=”form-control”>
</textarea>
</div>
<button type=”submit” class=”btn btn-primary”>Kirim</button>
<button type=”reset” class=”btn btn-default”>Reset</button>
</form>
Sedangkan source secara keseluruhan adalah:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>Form dasar</title>
<link href=”css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”container”>
<form class=”form”>
<div class=”form-group”>
<label for=”nama”>Nama</label>
<input type=”text” name=”nama” class=”form-control” placeholder=”Nama anda” />
</div>
<div class=”form-group”>
<label for=”email”>Email</label>
<input type=”text” name=”email” class=”form-control” placeholder=”Email anda” />
</div>
<div class=”form-group”>
<label for=”telpon”>Telpon</label>
<input type=”text” name=”telpon” class=”form-control” placeholder=”No Tlp anda” />
</div>
<div class=”form-group”>
<label for=”pesan”>Pesan</label>
<textarea name=”pesan” class=”form-control”>
</textarea>
</div>
<button type=”submit” class=”btn btn-primary”>Kirim</button>
<button type=”reset” class=”btn btn-default”>Reset</button>
</form>
</div> <!– /container –>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script src=”js/bootstrap.min.js”></script>
</body>
</html>
Demo dapat dilihat di http://aris.proweb.asia/dist/coba20.html dengan tampilan seperti berikut ini:
Pada demo tersebut, pada input bagian nama pertama-tama akan muncul ‘Nama Anda’, saat kita mengetikkan pada input tersebut secara otomatis tampilan ‘Nama Anda’ akan hilang digantikan oleh apa yang anda ketik.
Informasi lebih lanjut silahkan mengunjungi http://getbootstrap.com/css/#forms .
Kunjungi www.proweb.co.id untuk menambah wawasan anda.
