Cara Membuat Form Accordion Dengan Bootstrap Dan PHP

di kesempatan kali ini saya akan menjelaskan cara merancang form accordion dengan bootstrap dan php. Perlu teman-teman ketahui, form accordion yakni form yang dapat di sembunyikan dan di tampilkan dengan hanya di klik di form tersebut, dan tujuan dari perancangan form accordion tersebut yakni bagi menghemat ruang di halaman laman teman-teman, tak hanya bagi form saja, accordion banyak digunakan bagi konten dan bagi element widget di laman. Namun di contoh disini saya akan memberikan contoh dengan form accordion di bootstrap dan php, seketika saja teman-teman dapat ikuti tahapan di bawah ini :

Berikut Tahapannya :

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

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

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>

sumber :kursuswebprogramming.com/blog/

(Visited 3 times, 1 visits today)

Berikut Tahapannya :

Leave a Reply Cancel reply