Halo teman semua pada kesempatan hari ini saya akan memberikan tutorial membuat Form Login Vertikal
PENGERTIAN
Form Vertikal bootstrap merupakan bentuk default dari form bootstrap, maksudnya bentuk form vertical ini merupakan bentuk yang digunakan secara default dibootstrap.
LATAR BELAKANG
Karena form banyak digunakan untuk menginputkan data
MAKSUD DAN TUJUAN
Untuk menginputkan data serta untuk membuat tampilan form responsive.
ALAT DAN BAHAN
- Bootstrap
- Sublime text
- Laptop
- Pertama buat file bernama login
- Kemudian anda dapat membuat scriptnya seperti dibawah ini:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<title>LOGIN</title>
</head>
<body>
<div class="container">
<form>
<div class="form-group">
<label for="nama">Email </label>
<input type="email" class="form-control">
</div>
<div class="form-group">
<label for="password">Password </label>
<input type="password" class="form-control">
</div>
<button type="submit" class="btn btn-primary">Login</button>
<form>
</div>
</body>
</html>
Maka hasilnya akan muncul seperti dibawah ini:
Keterangan :
<div class="form-group">Yaitu digunakan untuk membalut element sebuah form seperti label dan formnya dan setelah itu ditambahkan dengan class="form-control"
KESIMPULAN
Dengan menambahkan class-class pada bootstrap kita dapat membuat form tersebut menjadi responsive
REFERENSI
http://www.malasngoding.com/membuat-form-dengan-bootstrap/
Sekian dan terimakasih
Wassalamualaikum wr.wb
0 komentar:
Posting Komentar