Cara Membuat Form Sederhana Menggunakan Pure CSS
Halo teman-teman di panduan kali ini saya akan menjelaskan Cara Membangun Form Sederhana Menggunakan Pure CSS, sebelum kita masuk ke study case ada baiknya kita mengetahui terlebih dahulu apa itu Pure CSS, Pure CSS adalah sebuah Framework CSS, Pure CSS pun digunakan bagi pembuat project-project blog, di pure css terdapat beberapa fitur seperti, merancang layout blog menjadi memiliki tampilan yang dinamis, merancang fitur, form, tombol, table, dan lain-lain.
Nah namun di panduan kali ini kita akan membahas mengenai Cara Membangun Form Sederhana Menggunakan Pure CSS bagi merancang form di pure css tak lah sulit teman-teman hanya mengikuti step by step yang terdapat dibawah ini.
Yang pertama-tama silahkan teman-teman buka sebuah link dari pure css nya yaitu https://purecss.io/, bagi menjalankan pure CSS nya teman-teman dapat mengunduh pure CSS nya, atau teman-teman dapat menggunakan CDN yang terdapat di pure CSS nya, di panduan kali ini kita akan mencoba menggunakan CDN yang terdapat di 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 Membangun 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 telah membaca syarat dan ketentuan
</label>
<button type=submit class=pure-button pure-button-primary>Submit</button>
</div>
</fieldset>
</form>
</body>
</html>
Berikutnya silahkan di save seluruh filenya, dan kalau kita jalankan di browser, karenanya hasilnya akan terlihat seperti dibawah ini.
Bagai nama teman-teman lumayan gampang bukan Cara Membangun Form Sederhana Menggunakan Pure CSS nya, demikianlah dulu panduan saya kali ini mengenai Cara Membangun Form Sederhana Menggunakan Pure CSS semoga bermanfaat
Terimakasih.
Sumber https://kursuswebsite.org
