Tutorial Membuat Login Form Dengan Html & CSS
Assallamuallaikum Wr Wb
Sudah lama saya tidak mengisi postingan di blog ini pada kesempatan kali ini saya akan memberikan sedikit tutorial tentang bagaimana cara membuat form login dengan HTML dan CSS. Form login ini belum disambungkan dengan php dan database.
Karena pada tutorial ini saya memfokuskan untuk desain form
Karena pada tutorial ini saya memfokuskan untuk desain form
Pada gambar diatas form login ini tidak menggunakan Javascript dan Jquery. Form Login ini juga hanya menggunakan kode HTML dan CSS, jadi hanya desain saja. Daripada basa basi langsung saja berikut dibawah ini adalah tutorialnya :
1. Toolkit yang saya gunakan hanya sublime text 3, untuk pemula saya tidak menyarankan dreamweaver. Kenapa sublime text 3 ? karena tool ini sangat mudah digunakan dan tidak membutuhkan spesifikasi PC yang besar. Kemudian xampp untuk wadah atau tempat server yang digunakan agar tampilan web dinamis.
gambar diatas adalah tampilan awal Sublime Text 3
2 Lalu save
atau perintah dikeyboard Ctrl+S untuk melakukan save
Atau memilih .php juga bisa.
4. Kemudian ketikkan sintak html berikut di Sublime
Text 3. Anda cukup mengetikkan <html> nanti akan muncul command yang
akan memunculkan kerangka seperti diatas.
5. setelah itu ketikkan sintak diatas untuk login
formnya.
6. setelah mengetikkan sintak pada nomer 6 diatas, maka setelah disave maka dirunning, hasil sintaks pada nomer 6 adalah
seperti gambar diatas. Belum selesai sampai disitu saja, untuk mendesain agar menarik kita memberikan CSS.
7. Buat file baru di Sublime lalu beri nama file
tersebut sesuka anda yang penting
dibelakang nama tersebut diberi .css untuk desainnya.
8. Setelah membuat file css ketik sintak pada gambar
diatas untuk memperindah tampilan web kita.
9. Gambar diatas adalah form login yang sudah dipadukan
dengan css. Jangan lupa file .html harus sefolder dengan .css agar .css bisa berjalan.
Sekian dari tutorial saya diatas ini bila ada kekurangan dan kesalahan yang disengaja maupun tidak disengaja saya mohon maaf sebesar-besarnya.
Waassallamualaikum Wr Wb
Sumber :
http://rizkidzgn.blogspot.co.id/2016/12*cara-membuat-form-login-sederhana-tapi.html
http://codeuser.blogspot.com/2016/02*membuat-form-login-menggunakan-html-dan.html
http://ilmukita.org*desain-form-login-dengan-html-dan-css/
https://www.malasngoding.com*belajar-css-mengubah-background-dengan-css/
http://www.dianagung.com/blog*kode-warna-css-lengkap
dengan sedikit perubahan
NB: ganti tanda (*) dengan tanda(/)
I love this blog ... Thanks for sharing this wonderful information...Don't forget to check this Animated Login Form using HTML CSS & JavaScript
BalasHapus