Code Form Html Bootstrap

Code Form Html Bootstrap
Code Form Html Bootstrap

Form digunakan untuk mengumpulkan data yang diinput sendiri oleh user. pada implentasinya data tadi bisa masuk ke server atau dikirim melalui platform E-mail,

fungsi form diantaranya :

  1. form berfungsi untuk menghubungkan antara owner web dengan visitor.
  2. form dapat digunakan untuk bertanya bahkan memberi saran kepada owner web.
  3. form bisa dipakai untuk menghubungi pihak web.

Contoh Code Form Vertikal  Html Bootstrap


<!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">
<link rel="stylesheet" href="lib/bootstrap.min.css">
<script src="lib/jquery.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
</head> 
<body>

<div class="container">
<h2>FORM VERICAL<h2>
<form>
<div class="form-group">
<label for="email">email :</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">password :</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> remember me</label>
</div>
<button type="submit" class="btn btn-default">submit</button>
</form>
 </div>

</body>
</html>


Tampilan Form Html Vertical

tampilan form html vertical dekstop

Form Html Horizontal

<!DOCTYPE html>
<html lang="en">
<head>

 <title>Bootstrap Example</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="lib/bootstrap.min.css">
<script src="lib/jquery.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
</head> 
<body>

<div class="container">
<h2>FORM HORIZONTAL<h2>
<div class="form-horizontal">
<div class="form-group">
<label class ="control-label col-sm-2" for="email">email :</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class ="control-label col-sm-2" for="pwd">password :</label>
<button type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
</div>
 
<div class="form-group">

<div class ="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox">remember me </label>
</div>
</div>
</div>
<div class="form-group">
<div class ="col-sm-offset-2 col-sm-10">
</div>
<button type="submit" class="btn btn-default">submit</button>
</div>
</div>
</form>
>  </div>

</body>
</html>

Tampilan Form Html Horizontal

tampilan form html horizontal

Form Html (in line) Segaris

<!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">
<link rel="stylesheet" href="lib/bootstrap.min.css">
<script src="lib/jquery.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
</head> 
<body>

<div class="container">
<h2>FORM segaris<h2>
<form class="form-inline">
<div class="form-group">
<label for="email">Email :</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
 
<div class="form-group">

<label for="email">Password :</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div> 
<div class="form-group">
<div class ="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox">Remember me </label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
 </div>

</body>
</html>

Tampilan Form Html Segaris (in line)

tampilan form segaris (in line)

3 Contoh Code Form Html Bootstrap

contoh code form html diatas memuat 3 form berbeda mulai dari form yang vertikal, horizontal bahkan segaris dapat di gunakan sesuai kebutuhan.

sekian artikel tentang Code Form Html Bootstrap semoga bermanfaaat.

No comments:

Post a Comment

Iklan Atas Artikel

Meta Propeller atas artikel

cara mudah turial kode Java blog website grafika komputer jaringan komputer dan Arduino

Iklan Tengah Artikel 2

Iklan Bawah Artikel