Materi Inatec kelas X (Sabtu,12-10-2019)

hai semuanya, kita akan melanjutkan materi minggu lalu ini. dan skrng kita akan buat form.   form digunakan untuk menerima inputan yang berasal dari user dan mengolah hasil inputan tersebut ke server. klik disini utk lebih tau.

Sebelum itu kita akan membuat kolom seperti ini , dan copy code pada meteri minggu lalu dan paste pada new file di text editor.

---

hapus semua content pada kolom 9,dan tambahkan dibawah kolom 9 ,menjadi

<form action="" method="post"></form>

dan tambahkan kolom 6 pertama menjadi,

<div class="col-md-6">

           <div class="form-group">

                 <label for="email">Email Address</label>

                  <input type="text" class="form-control input-sm" name="email" id="email">

               </div>

              <div class="form-group">

                            <label for="name">Name</label>

                            <div class="input-group">

                               <span class="input-group-addon">

                                        <span class="glyphicon glyphicon-user"></span>

                                </span>

                                <input type="text" class="form-control" name="name" id="name">

                            </div>

                        </div>

                    </div>

dan tambahkan juga kolom 6 ke dua menjadi,

<div class="col-md-6">

                        <div class="form-group">

                            <label for="birthDate">Tanggal Lahir</label>

                            <input type="date" class="form-control" name="birthDate" id="birthDate">

                        </div>

                    </div>

                    <span class="glyphicon glyphicon-check"></span>

                    <button type="submit" class="btn btn-xs btn-primary">

                            <span class="glyphicon glyphicon-check"></span>

                                Kirim!

                        </button>

                    <input type="submit" class="btn btn-lg btn-danger" value="kirim"><span class="glyphicon glyphicon-share"></span>>

                </form>

pada tag span , itu berarti template icon yg kalian bisa ambil dgn se enak jidat DISINI.

jadi code lengkapnya seperti ini,

<div class="container">

        <div class="row>">

            <div class="col-md-9">

                <form action="" method="post">

                    <div class="col-md-6">

                        <div class="form-group">

                            <label for="email">Email Address</label>

                            <input type="text" class="form-control input-sm" name="email" id="email">

                        </div>

                        <div class="form-group">

                            <label for="name">Name</label>

                            <div class="input-group">

                                <span class="input-group-addon">

                                        <span class="glyphicon glyphicon-user"></span>

                                </span>

                                <input type="text" class="form-control" name="name" id="name">

                            </div>

                        </div>

                    </div>

                    <div class="col-md-6">

                        <div class="form-group">

                            <label for="birthDate">Tanggal Lahir</label>

                            <input type="date" class="form-control" name="birthDate" id="birthDate">

                        </div>

                    </div>

                    <button type="submit" class="btn btn-xs btn-primary">

                            <span class="glyphicon glyphicon-check"></span>

                                Kirim

                        </button>

                    <input type="submit" class="btn btn-lg btn-danger" value="kirim"><span class="glyphicon glyphicon-share"></span>>

                </form>

            </div>

            <div class="col-md-3">

                <div class="panel panel-success">

                    <div class="panel-heading">

                        <h3 class="panel-title">

                            Menu Samping

                        </h3>

                    </div>

                    <div class="panel-body">

                        <ul>

                            <li>Siswa</li>

                            <li>Kelas</li>

                            <li>Sekolah</li>

                        </ul>

                    </div>

                </div>

            </div>

        </div>

    </div>

maka hasil nya akan seperti ini

Oke sekian itu saja dari saya, semoga bisa bermanfaat untuk kalian semua apa bila ada perkataan yg salah mohon dimaafkan dan comment aja,

apabila tidak ada yg mengerti ditanyakan saja oke.

"Tetap semangat, Jangan pantang menyerah"

#SkuyLiving

 

 

 

 

 

-