Cara Membuat Form Sederhana Menggunakan Pure CSS

Halo teman-teman pada tutorial kali ini saya akan menjelaskan Cara Membuat Form Sederhana Menggunakan Pure CSS, sebelum kita masuk ke study case ada baiknya kita mengetahui terlebih dahulu apa itu Pure CSS, Pure CSS merupakan sebuah Framework CSS, Pure CSS juga digunakan untuk pembuat project-project website, pada pure css terdapat beberapa fitur seperti, membuat layout website menjadi responsive, membuat menu, form, tombol, table, dan lain-lain.

Nah namun pada tutorial kali ini kita akan membahas tentang Cara Membuat Form Sederhana Menggunakan Pure CSS untuk membuat form pada pure css tidak lah sulit teman-teman hanya mengikuti step by step yang terdapat dibawah ini.

Yang pertama silahkan teman-teman buka sebuah link dari pure css nya yaitu https://purecss.io/, untuk menjalankan pure CSS nya teman-teman bisa mendownload pure CSS nya, atau teman-teman bisa menggunakan CDN yang terdapat pada pure CSS nya, pada tutorial kali ini kita akan mencoba menggunakan CDN yang terdapat pada pure CSS nya.

Berikutnya silahkan teman teman buka text editornya dan silahkan teman-teman save script dibawah ini dengan nama index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Cara Membuat Form Sederhana Menggunakan Pure CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css" integrity="sha384-UQiGfs9ICog+LwheBSRCt1o5cbyKIHbwjWscjemyBMT9YCUMZffs6UqUTd0hObXD" crossorigin="anonymous">
</head>

<body>
<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">
        </div>
        <div class="pure-control-group">
            <label for="email">Email</label>
            <input id="email" type="email" placeholder="Email Address">
        </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="password">Ulangi Password</label>
            <input id="password" type="password" placeholder="Ulangi Password">
        </div>

        <div class="pure-controls">
            <label for="cb" class="pure-checkbox">
                <input id="cb" type="checkbox"> Saya sudah membaca syarat dan ketentuan
            </label>

            <button type="submit" class="pure-button pure-button-primary">Submit</button>
        </div>
    </fieldset>
</form>
</body>
</html>

Selanjutnya silahkan di save semua filenya, dan jika kita jalankan pada browser, maka hasilnya akan terlihat seperti dibawah ini.

Bagai nama teman-teman cukup mudah bukan Cara Membuat Form Sederhana Menggunakan Pure CSS nya, sekian dulu tutorial saya kali ini tentang Cara Membuat Form Sederhana Menggunakan Pure CSS semoga bermanfaat

Terimakasih.

Cara Membuat Form Sederhana Menggunakan Pure CSS

Kategori