Cara Membuat Form Accordion Dengan Bootstrap Dan PHP

pada kesempatan kali ini saya akan menjelaskan cara membuat form accordion dengan bootstrap dan php. Perlu teman-teman ketahui, form accordion adalah form yang dapat di sembunyikan dan di tampilkan dengan hanya di klik pada form tersebut, dan tujuan dari pembuatan form accordion tersebut adalah untuk menghemat ruang di halaman website teman-teman, tidak hanya untuk form saja, accordion banyak digunakan untuk konten dan untuk element widget pada website. Namun pada contoh disini saya akan memberikan contoh dengan form accordion di bootstrap dan php, langsung saja teman-teman bisa ikuti tahapan di bawah ini :

Berikut Tahapannya :

Teman-teman buat terlebih dahulu satu buah file dengan nama index.php, dan tuliskan kode seperti berikut :

<style>
.form-inline .form-group { margin-right:10px; }
.well-primary {
color: rgb(255, 255, 255);
background-color: rgb(66, 139, 202);
border-color: rgb(53, 126, 189);
}
.glyphicon { margin-right:5px; }
</style>
<?php
echo "<div class='container'>
    <div class='row'>
        <div class='col-md-12'>
            <div class='panel-group' id='accordion'>
                <div class='panel panel-default'>
                    <div class='panel-heading'>
                        <h4 class='panel-title'>
                            <a data-toggle='collapse' data-parent='#accordion' href='#collapseOne'><span class='glyphicon glyphicon-file'>
                            </span>DETAILS</a>
                        </h4>
                    </div>
                    <div id='collapseOne' class='panel-collapse collapse in'>
                        <div class='panel-body'>
                            <div class='row'>
                                <div class='col-md-6'>
                                    <div class='form-group'>
                                        <label for='grant1'>Grant#</label>
                                        <input type='text' class='form-control' id='grant1' placeholder='GRANT#' required />
                                        <div>Grant Activity and Number: R34 DE002449-01</div>
                                    </div>
                                    <div class='form-group'>
                                        <label for='grant2'>Grant# (alternative)</label>
                                        <input type='text' class='form-control' id'grant2' placeholder='GRANT# (Alternare)' required />
                                    </div>
                                    <div class='form-group'>
                                        <label for='grantparent'>Grant# (Parent)</label>
                                        <select class='form-control' id='grantparent'>
                                            <option></option>
                                            <option>Data1772457</option>
                                            <option>Data4516</option>
                                            <option>Data24572457</option>
                                        </select>
                                    </div>
                                </div>
                                <div class='col-md-6'>
                                    <div class='form-group'>
                                        <label for='shorttitle'>Short Title</label>
                                        <input type='text' class='form-control' id='shorttitle' placeholder='Dentistry Includes Nutrition Reminders (DINR)' required />
                                        <div>Â </div>
                                    </div>
                                    <div class='form-group'>
                                    <label for='title'>Title</label>
                                        <input type='text' class='form-control' id='shorttitle' placeholder='Dentistry Includes Nutrition Reminders (DINR)' required />
                                    </div>
                                    <div class='form-group'>
                                    <label for='suplimenta'>Suplimental Grants</label>
                                        <input type='text' class='form-control' id='suplimenta' required />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class='panel panel-default'>
                    <div class='panel-heading'>
                        <h4 class='panel-title'>
                            <a data-toggle='collapse' data-parent='#accordion' href='#collapseTwo'><span class='glyphicon glyphicon-th-list'>
                            </span>Administration</a>
                        </h4>
                    </div>
                    <div id='collapseTwo' class='panel-collapse collapse'>
                        <div class='panel-body'>
                            <div class='row'>
                                <div class='col-md-6'>
                                    <div class='form-group'>
                                        <label for='grantpo'>Grant PO</label>
                                        <select class='form-control' id='grantpo'>
                                            <option>Data1772457</option>
                                            <option>Data4516</option>
                                            <option>Data24572457</option>
                                        </select>
                                    </div>
                                </div>
                                <div class='col-md-6'>
                                    <div class='well well-sm well-primary'>
                                        <label for='grantor'>Grantor</label>
                                        <select class='form-control' id='grantor'>
                                            <option>Data1772457</option>
                                            <option>Data4516</option>
                                            <option>Data24572457</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>";


?>

100

101

102

103

104

<style>

.form-inline .form-group { margin-right:10px; }

.well-primary {

color: rgb(255, 255, 255);

background-color: rgb(66, 139, 202);

border-color: rgb(53, 126, 189);

}

.glyphicon { margin-right:5px; }

</style>

<?php

echo "<div class='container'>

</span>DETAILS</a>

</h4>

</div>

<label for='grant1'>Grant#</label>

<div>Grant Activity and Number: R34 DE002449-01</div>

</div>

<label for='grant2'>Grant# (alternative)</label>

</div>

<label for='grantparent'>Grant# (Parent)</label>

</select>

</div>

<label for='shorttitle'>Short Title</label>

</div>

<label for='title'>Title</label>

</div>

<label for='suplimenta'>Suplimental Grants</label>

</div>

</span>Administration</a>

</h4>

</div>

<label for='grantpo'>Grant PO</label>

</select>

</div>

<label for='grantor'>Grantor</label>

</select>

</div>

</div>";

Jika sudah save file tersebut, dan lihat hasilnya pada browser teman-teman.

Sampai disini penjelasan saya mengenai cara membuat form accordion dengan bootstrap dan php, semoga bermanfaat.

Cara Membuat Form Accordion Dengan Bootstrap Dan PHP

Berikut Tahapannya :

Facebook DUMET School

Konsultasi Gratis

Categories