Konten [Tampil] Show
Untuk Demonya bisa cek: Form Login Cara Membuat Login Form KerenSebelum memulai membuat halaman login ini, anda perlu menyiapkan alat-alat, sebagai berikut.
Untuk aplikasi text editornya anda bisa menggunakan Notepad, tetapi anda juga bisa memakai:
Baca Juga: Cara Membuat Formulir Pendaftaran Sederhana
2. Kemudian buat: sebuah file CSS dan beri nama "style.css", dan masukkan script kode berikut ini:
3. Lalu Save: dan tarik file "index.html" kebrowser yang kamu miliki. Perlu kamu ingat! jika ingin mengganti gambar dicss body{}. Dan jangan lupa memindahkan file gambar tersebut ke folder yang telah dibuat. Setelah selesai mengikuti panduan diatas, maka tampilan form login seperti dibawah ini. Baca Juga: Pengertian Activity Diagram : Tujuan, Simbol, Contoh Penutup Itulah tadi Cara Membuat Login Form Keren dengan HTML CSS, jika ada pertanyaan atau masih bingung anda bisa berkomentar dikolom komentar. Selamat Ngoding dan sampai jumpa ditutorial berikutnya.Jangan Lupa Bagikan :D
Halo semuanya, pasti kalian sudah familiar dengan form login dan juga form register. Untuk form login ini biasanya meminta username dan password user sebelum masuk ke sebuah aplikasi. Untuk form registrasi biasanya digunakan untuk mendaftarkan username dan password akan bisa masuk melalui form login. Pada artikel ini, kalian akan mengetahui cara membuat sebuah form login dan registrasi dengan HTML dan CSS. HTML berfungsi untuk membuat halaman web dan struktur dari form login dan form register. Sedangkan CSS untuk mendesain tampilan dari kedua form tersebut. Form di HTML cukup mudah di buat. Bagaimana ? Apakah kalian sudah tidak sabar untuk mengetahui cara membuat form login dan form register dengan HTML dan CSS ? Mari simak penjelasan berikut ini : Section Artikel 1. Apa yang perlu di persiapkan ?Jika kalian masih baru belajar membuat sebuah program, maka yang kalian butuhkan untuk membuat form login dan form register ini adalah :
Persiapan membuat form login dan form register dengan HTML dan CSS1.Buat folder Langkah pertama, yaitu membuat folder khusus. Ini akan menjadi wadah untuk menyimpan file HTML dan CSS form login dan form register. Disini untuk folder saya memberikan nama DesainLogin. Jangan lupa untuk folder nya di taruh ke dalam folder xampp > htdocs . 2.Buat File HTML dan CSS di Text Editor Langkah kedua, yaitu buka Text Editor kalian, lalu pilih open folder yang sudah kalian buat. Setelah sudah buat file baru bernama index.html untuk form login, register.html untuk form register, dan style.css untuk CSS. Cara Membuat Form Login dan Form Register Keren dengan Menggunakan HTML dan CSSSetelah kalian sudah menyiapkan semua bahan yang telah ditentukan, Kalian bisa memulai cara membuat form login yang menarik di HTML. Saya akan menjelaskannya satu per satu dan secara detail, jadi Kalian tidak perlu takut akan merasa kebingungan. Yuk, kita mulai sekarang! 1. Memasukkan Source Code HTML di menu index.html dan register.htmlHal pertama yang dilakukan adalah memasukkan source code dibawah ini ke dalam menu index.html index.html <!DOCTYPE HTML> <html> <head> <title>Login</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1>Login</h1> <form> <label>Username</label><br> <input type="text"><br> <label>Password</label><br> <input type="password"><br> <button>Log in</button> <p> Belum punya akun? <a href="register.html">Register di sini</a> </p> </form> </div> </body> </html> Source Code yang berisi register.html <!DOCTYPE HTML> <html> <head> <title>Halaman Login</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1>Register</h1> <form> <label>Username</label>\ <br> <input type="text"> <br> <label>Email</label> <br> <input type="text"> <br> <label>Password</label> <br> <input type="password"> <br> <button>Register</button> <p> Sudah punya akun? <a href="index.html">Login di sini</a> </p> </form> </div> </body> </html> Nah di form login dan form register terdapat <!DOCTYPE HTML> <html> <head> <title>Halaman Login</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1>Register</h1> <form> <label>Username</label>\ <br> <input type="text"> <br> <label>Email</label> <br> <input type="text"> <br> <label>Password</label> <br> <input type="password"> <br> <button>Register</button> <p> Sudah punya akun? <a href="index.html">Login di sini</a> </p> </form> </div> </body> </html>0 yang berfungsi untuk masuk ke halaman aplikasi atau udah registrasi akun. Sebagai bocoran, fungsi dari <div class=”container”> akan lebih terasa nanti ketika kita sudah bermain dengan CSS. Tapi sebelum sampai ke sana, kita fokus dulu untuk menyusun struktur form login keren Kalian. Setelah sudah memasukkan Source Code HTML ke Form Login dan Form Register. Silahkan masukkan Source Code berikut kedalam file style.css style.css *{ margin: 0; padding: 0; outline: 0; font-family: 'Open Sans', sans-serif; } body{ height: 100vh; background-image: url(https://dosenit.com/wp-content/uploads/2020/10/Gunung-Fuji-Jepang-1024x640-1.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; } p { color: white; font-family: 'Open Sans', sans-serif; padding-top: 10px; } h1 { text-align: center; padding-left: 100px; padding-bottom: 20px; } a { color: white; font-family: 'Open Sans', sans-serif; } .container{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); padding: 20px 25px; width: 300px; background-color: rgba(0,0,0,.7); box-shadow: 0 0 10px rgba(255,255,255,.3); } .container h1{ text-align: left; color: #fafafa; margin-bottom: 30px; text-transform: uppercase; border-bottom: 4px solid #752BEA; } .container label{ text-align: left; color: #90caf9; } .container form input{ width: calc(100% - 20px); padding: 8px 10px; margin-bottom: 15px; border: none; background-color: transparent; border-bottom: 2px solid #752BEA; color: #fff; font-size: 20px; } .container form button{ width: 100%; height: 40px; padding: 5px 0; border: none; background-color:#752BEA; font-size: 18px; color: #fafafa; border-radius: 20px; } Sesudah kalian masukkan semua silahkan kalian membuka index.html di browser kalian. Dan hasilnya seperti ini Gimana keren kan ? Dan berikut merupakan form register.html Untuk isi form dari register bisa kalian tambahkan sendiri sesuai dengan kebutuhan. Selamat mencobaa. Sebelum itu saya akan menjelaskan detail tentang isi dari style.css. Berikut untuk penjelasannya : 1. Desain Format Layout Form LoginLangkah awal, yaitu membuat desain layout form. Disini kalian bisa mengatur margin, padding, outline, serta jenis font yang ingin kalian gunakan. Penerapan keempat property di atas dapat kalian temukan di bawah ini. Kalian bisa mengubah-ubah ukuran maupun jenis font ini sesuai kebutuhan. *{ margin: 0; padding: 0; outline: 0; font-family: 'Open Sans', sans-serif; } 2. Memberikan Background Berupa Gambar Di Menu LoginLanjut ke cara membuat form login keren berikutnya, yaitu memberi background. Silakan gunakan property <body>. Di dalam property ini, terdapat beberapa atribut:
Penggunaan kelima atribut di atas pada form login keren ini bisa Kalian temukan pada syntax berikut. body{ height: 100vh; background-image: url(https://dosenit.com/wp-content/uploads/2020/10/Gunung-Fuji-Jepang-1024x640-1.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; } 3. Membuat Tulisan Agar Rapih dan Mudah di BacaNah langkah selanjutnya adalah kalian harus merapikan tulisan yang mengandung syntax seperti <h1>, <p>, <a>. Di syntax seperti <h1>, dan <p> ada sebuah syntx padding yang berarti digunakan untuk memberikan jarak. Jadi padding-bottom berarti memberikan jarak dari bawah ke tulisan. Untuk syntax nya seperti contoh dibawah : p { color: white; font-family: 'Open Sans', sans-serif; padding-top: 10px; } h1 { text-align: center; padding-left: 100px; padding-bottom: 20px; } a { color: white; font-family: 'Open Sans', sans-serif; } 4. Desain Kotak Form Login dan Form RegisterBeranjak dari background, kini saatnya kita mendesain kotak form. Di awal, kita sudah menggunakan div class=”container”. Dengan begitu, komponen yang berada dalam wadah tersebut mengelompok menjadi beberapa bagian sesuai dengan tagnya: kotak form, judul form, kolom username dan password, serta tombol form. Sebagai awalan, kita akan mendesain kotak form terlebih dahulu. Ada beberapa property yang kita gunakan:
Berikut syntax lengkap untuk mendesain kotak form login : .container{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); padding: 20px 25px; width: 300px; background-color: rgba(0,0,0,.7); box-shadow: 0 0 10px rgba(255,255,255,.3); } 5. Mendesain Kolom InputSekarang, kita bergerak ke bawah label teks, yaitu kolom input. Beberapa komponen yang diperlukan sudah kita pelajari pada tahap sebelumnya, sehingga Anda hanya perlu mengulang saja. |