Membuat Form Menggunakan Pure CSS

Form dalam sebuah website atau aplikasi biasanya untuk mengambil atau mengisi data data yang diperlukan untuk informasi informasi yang berkaitan dengan aplikasi atau website tersebut. Form dapat ditemukan pada halaman web yang memilikiÂ fungsi komunikasi, bukan hanya komunikasi antar pengguna internet seperti chatting, social network, dan email, tetapi juga komunikasi antara pengguna internet dengan web server seperti format pendaftaran untuk membuat account sebuah situs. Hampir seluruh halaman web yang anda kunjungi mengandung unsur form didalamnya. Â Atau juga Form bisa di artikan salah satu elemen HTML yang sangat sering dijumpai bagi anda pengguna layanan internet.

Nah Kali ini saya akan menjelaskan bagaimana cara Membuat Form menggunakan Pure CSS.

Lanjut ke materi, langsung kita praktekan bagaimana caranya. Pertama kalian buka text editor kalian dan ketikan kode HTML di bawah ini dan simpan dengan nama index.html.

Index.html

<!DOCTYPE html>

<html lang="en">

<head>

                <meta charset="UTF-8">

                <title> Form Register Pure CSS </title>

                <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous" >

</head>

<body>

                <div class="pure-g" >

                   <div class="pure-u-1-3" > </div >

                   <div class="pure-u-1-3" >

                                <h2 style =" color: #666; text-align: center; " > Form Register Pure CSS </h2 >

                                                <form class ="pure-form pure-form-aligned" >

                                                    <fieldset>

                                                        <div class="pure-control-group">

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

                                                            <input id="name" type="text" placeholder ="Username">

                                                            <span class="pure-form-message-inline"> This is a required field. </span>

                                                        </div>


                                                        <div class ="pure-control-group" >

                                                            <label for ="password"> Password </label>

                                                            <input id ="password" type ="password" placeholder ="Password" >

                                                        </div>


                                                        <div class ="pure-control-group" >

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

                                                            <input id ="email" type ="email" placeholder ="Email Address">

                                                        </div>


                                                        <div class="pure-control-group">

                                                            <label for="foo"> Supercalifragilistic Label </label>

                                                            <input id="foo" type="text" placeholder="Enter something here...">

                                                        </div>


                                                        <div class="pure-controls">

                                                            <label for ="cb" class ="pure-checkbox">

                                                                <input id ="cb" type ="checkbox" > I've read the terms and conditions

                                                             </label>


                                                            <button type ="submit" class ="pure-button pure-button-primary"> Submit </button>

                                                        </div>

                                                    </fieldset> <!-- fieldset -->

                                                </form> <!-- form -->

                   </div>

                   <div class="pure-u-1-3"> </div >

                </div>

               

</body>

</html>

Hasil dari kode yang kita ketikan di atas adalah seperti di gambar di bawah ini.

Sekian Tutorial Membuat Form menggunakan Pure CSS, semoga bermanfaat.. keep coding :D.

Kategori