Halo semua, berikut saya akan memberikan Source Code bagaimana cara membuat Desain Form sederhana dengan menggunakan HTML + Bootstrap .
Setelah kalian sudah membuat sebuah Navbar, Slider Responsive, dan Card pada menu index.html, kali ini saya akan memberikan Source Code yang berisi form yang bisa kalian tampilan pada menu “beli paket”. Buat yang belum tau silahkan kalian cek agar kalian tidak ketinggalan Pembelajaran tentang Navbar, Slider Responsive, dan Card. Kalian bisa copy judul dibawah ini :
- Navbar (Cara Membuat Navbar dengan menggunakan Bootstrap dan HTML)
- Slider Responsive (Cara Membuat Gambar Slider Responsive dengan CSS dan HTML)
- Card (Cara Membuat Card pada HTML + Bootstrap)
Disitu saya sudah menjelaskan apa saja file dan folder yang dibutuhkan. Disini kita membuat file baru bernama paketbeli.html yang berisi tentang desain Form. Berikut isi dari file belipaket.html.
paketbeli.html
<!DOCTYPE html> <html> <head> <title>Beli Paketnya kakak</title> <link rel="stylesheet" type="text/css" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <style type="text/css"> .left { text-align: left;} .right { text-align: right;} .center { text-align: center;} .justify { text-align: justify;} </style> </head> <body> <!-- navbar --> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#"> <img src="https://dosenit.com/wp-content/uploads/2020/10/Gunung-Fuji-Jepang-1024x640-1.jpg" class="image" border="0" width="30" height="30"> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="paketbeli.html">beli paket</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">HTML</a> <a class="dropdown-item" href="#">CSS</a> <a class="dropdown-item" href="#">PHP</a> <a class="dropdown-item" href="#">MYSQL</a> <a class="dropdown-item" href="#">JAVASCRIPT</a> <a class="dropdown-item" href="#">JQUERY</a> </div> </li> </ul> </div> </nav> <!-- navbar --> <!-- Menu --> <div class="container"> <h2 class="center">Pilih Paket Di PRAMEDIA</h2> <form action="" method="GET"> <div class="form-group"> <label>Nama:</label> <input type="text" name="" class="form-control" placeholder="Masukan Nama" value="" /> </div> <div class="form-group"> <label>Tanggal Lahir:</label> <input type="date" name="" class="form-control" value="" /> </div> <div class="form-group"> <label>Pendidikan:</label> <select name ="" id="inputPendidikan" class="form-control" value="" > <option selected>Pilih pendidikan</option> <option name ="" >SD</option> <option name ="" >SMP</option> <option name ="" >SMA</option> <option name ="" >KULIAH</option> </select> </div> <fieldset class="form-group"> <div class="row"> <legend class="col-form-label col-sm-2 pt-0">Pelajaran</legend> <div class="col-sm-10"> <div class="form-check" checked> <input class="form-check-input" type="radio" name="" id="" value=""> <label class="form-check-label" for="html"> HTML </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="" id="" value=""> <label class="form-check-label" for="css"> CSS </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="" id="" value=""> <label class="form-check-label" for="php"> PHP </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="" id="" value=""> <label class="form-check-label" for="mysql"> MYSQL </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="" id="" value=""> <label class="form-check-label" for="javascript"> JAVASCRIPT </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="" id="" value=""> <label class="form-check-label" for="jquery"> JQUERY </label> </div> </div> </div> </fieldset> <button type="submit" name="" class="btn btn-primary" value="simpan">Daftar</button> </form> </div> </body> </html>
Itulah Source Code desain form untuk file paketbeli.html. Kalau sudah semua silahkan digabungkan. Dan kalian sudah bisa membuat sebuah Navbar, Slider Responsive, Card, dan juga sebuah Form.
