Pada kesempatan kali ini saya akan mempraktekan tutorial membuat form menggunakan CSS.
1. Latar Belakang
Banyak yang menggunakan form sebagai inputan dari suatu program. banyak juga yang membutuhkan form tersebut .
2. Maksud Tujuan
Agar lebih memahami bagaimana cara membuat form responsive menggunakan bootstrap
3. Alat dan Bahan
Materi artikel form pada w3school https://www.w3schools.com/bootstrap/bootstrap_forms.asp
4. Langkah Kerja
1. Download file CSS framework bootstrap , bisa dilihat bagaimana cara
downloadnya Disini
2. Membuat file contoh, formlogin.php
Tulisan yang berwarna merah merupakan sintaks yang berfungsi untuk menghubungkan file php formlogin.php dengan file bootstrap.<!DOCTYPE html>
<html lang="en">
<head>
<title>Contoh Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Praktek membuat form Vertical </h2>
<br>
<h1><center>LOGIN</center></h1>
<form>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Masukkan Email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Masukkan password">
</div>
<center><button type="submit" class="btn btn-default">Submit</button></center>
</form>
</div>
</body>
</html>
3. Kemudian save di localhost/file system (var/www/html/)
4. Buka pada web browser sesuai nama folder dan nama file-nya . teman-teman langsung dapat mempraktekannya sendiri .
"localhost/form.php5. Kesimpulan
Kesimpulannya adalah pada bootstrap juga terdapat tutorial membuat form atau class yang khusus untuk form.
6. Referensi
- https://www.w3schools.com/bootstrap/bootstrap_forms.asp
Sekian Terimakasih
Wasaalamualaikum wr.wb
EmoticonEmoticon