Belajar Bootstrap (21. Form)

Belajar Bootstrap (21. Form)

Form bootstrap

Form adalah halaman dimana kita disuruh untuk mengisikan pada kolom form yang sudah disediakan. Contohnya form pendaftaran yang meliputi nama, alamat, email, dan lain-lain. Dengan Bootstrap, form akan lebih cantik dan tentunya responsive. Ketik, Pahami, dan success . Untuk penggunaanya, berikut contoh kodenya:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
	<title>belajar form</title>
</head>
<body>
	<div class="container">
		<h2>dasar penggunaan form pada bootstrap</h2>
		<form role="form">
			<div class="form-group">
				<label for="email">Email :</label>
				<input type="email" class="form-control" id="email" placeholder="enter email here">
			</div>
			<div class="form-group">
				<label for="password">Password : </label>
				<input type="password" class="form-control" id="pass" placeholder="enter password here">
			</div>
			<div class="checkbox">
				<label><input type="checkbox"> Remember me </label>
			</div>
			<button type="submit" class="btn btn-info">Submit</button>
		</form>

		<h2>Kita dapat membuat form berbentuk inline, atau horizontal</h2>
		<h3>contoh inline</h3>
		<form role="form" class="form-inline">
			<div class="form-group">
				<label for="email">Email : </label>
				<input type="email" class="form-control" id="email" placeholder="enter email here">
			</div>
			<div class="form-group">
				<label for="password">Password : </label>
				<input type="password" class="form-control" id="pass" placeholder="enter password here">
			</div>
			<div class="checkbox">
				<label><input type="checkbox"> Remember me </label>
			</div>
			<button type="button" class="btn btn-info">Submit</button>
		</form>

		<h3>contoh horizontal</h3>
		<form role="form" class="form-horizontal">
			<div class="form-group">
				<label for="email" class="col-md-2">Email : </label>
				<div class="col-md-10">
					<input type="email" class="form-control" id="email" placeholder="enter email here">
				</div>
			</div>
			<div class="form-group">
				<label for="password" class="col-md-2">Password : </label>
				<div class="col-md-10">
					<input type="password" class="form-control" id="pass" placeholder="enter password here">
				</div>
			</div>
			<div class="form-group">
				<div class="checkbox col-md-offset-2 col-md-10">
					<label><input type="checkbox"> Remember me</label>
				</div>	
			</div>
			<div class="form-group">
				<div class="col-md-offset-2 col-md-10">
					<button type="button" class="btn btn-info">Submit</button>
				</div>	
			</div>
		</form>
	</div>
</body>
</html>

hasil

Semoga bermanfaat, sampai jumpa di postingan selanjutnya.

Written by @akhi_syabab

Leave a Reply

Your email address will not be published.Required fields are marked *