Membuat Desain Form Login Dengan CSS
Membuat Desain Form Login Dengan CSS
Membuat Desain Form Login Dengan CSS – halaman form login adalah sebuah halaman yang di akses oleh user ketika ingin mengakses halaman khusus seperti dashboard admin.
Ada beberapa teman-teman pembaca tutorial di malasngoding.com yang mengirim pesan ke saya melalui instagram untuk dibuatkan contoh desain dan cara mendesain halaman login yang mudah dan simple.
Oleh karena itu, pada Tutorial Membuat Desain Form Login Dengan CSS ini akan kita akan belajar :
- Desain halaman login
- Desain element form html
- Desain tombol login
- Dan lainnya, silahkan teman-teman simak saja ya 🙂
Membuat Desain Form Login Dengan CSS
Langsung saja kita mulai cara membuat form login dan desain form login sederhana dengan CSS.
Di contoh kasus ini saya membuat form nya dalam file HTML. teman-teman bisa menerapkan ke project PHP teman-teman atau menyesuaikan.
Di sini saya membuat file HTML dengan nama index.html. atau bebas terserah teman-teman.
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html> <html> <head> <title>Membuat Desain Form Login Dengan CSS - www.malasngoding.com</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Membuat Desain Form Login Dengan CSS <br/> www.malasngoding.com</h1> <div class="kotak_login"> <p class="tulisan_login">Silahkan login</p> <form> <label>Username</label> <input type="text" name="username" class="form_login" placeholder="Username atau email .."> <label>Password</label> <input type="text" name="password" class="form_login" placeholder="Password .."> <input type="submit" class="tombol_login" value="LOGIN"> <br/> <br/> <center> <a class="link" href="https://www.malasngoding.com">kembali</a> </center> </form> </div> </body> </html> |
Akan saya jelaskan dulu tentang file atau syntax HTML di atas, saya yakin teman-teman sudah membaca dan mempelajari semua tutorial HTML dasar dari malasngoding.com.
jika belum silahkan teman-teman baca dulu tutorial HTML dasar untuk pemula dari malasngoding.com.
Agar tidak rancu dalam mengikuti tutorial ini, sehingga teman-teman bisa lebih mudah memahami pembahasan Membuat Desain Form Login Dengan CSS ini.
di sini kita membuat form di dalam element <div> .. </div> yang kita beri class “kotak_login”.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div class="kotak_login"> <p class="tulisan_login">Silahkan login</p> <form> <label>Username</label> <input type="text" name="username" class="form_login" placeholder="Username atau email .."> <label>Password</label> <input type="text" name="password" class="form_login" placeholder="Password .."> <input type="submit" class="tombol_login" value="LOGIN"> <br/> <br/> <center> <a class="link" href="https://www.malasngoding.com">kembali</a> </center> </form> </div> |
pada form login yang kita buat di atas, kita juga membuat element <p></p> yang bertuliskan “silahkan login”. dan masing-masing form sudah kita berikan class. silahkan teman-teman baca lagi tutorial sebelumnya tentang class HTML di malasngoding.com.
kemudian tinggal kita buat file CSS nya, seperti yang sudah kita buat pada file HTML di atasm bahwa CSS nya kita akan menulisnya dengan External CSS.
|
1 |
<link rel="stylesheet" type="text/css" href="style.css"> |
Buat sebuah file CSS dengan nama style.css
style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
body{ font-family: sans-serif; background: #d5f0f3; } h1{ text-align: center; /*ketebalan font*/ font-weight: 300; } .tulisan_login{ text-align: center; /*membuat semua huruf menjadi kapital*/ text-transform: uppercase; } .kotak_login{ width: 350px; background: white; /*meletakkan form ke tengah*/ margin: 80px auto; padding: 30px 20px; } label{ font-size: 11pt; } .form_login{ /*membuat lebar form penuh*/ box-sizing : border-box; width: 100%; padding: 10px; font-size: 11pt; margin-bottom: 20px; } .tombol_login{ background: #46de4b; color: white; font-size: 11pt; width: 100%; border: none; border-radius: 3px; padding: 10px 20px; } .link{ color: #232323; text-decoration: none; font-size: 10pt; } |
syntax css di atas adalah syntax css sederhana yang juga sudah saya jelaskan pada tutorial CSS bahasa indonesia lengkap di malasngoding.com.
Sekarang yuk kita lihat hasilnya, silahkan teman-teman buka index.html nya di browser.
Membuat Desain Form Login Dengan CSS
Silahkan teman-teman download atau lihat demonya pada link berikut.
Sekian tutorial Membuat Desain Form Login Dengan CSS. semoga dapat bermanfaat. selanjutnya kita akan belajar membuat desain material untuk form login dengan css.
Terima kasih, sampai jumpa di tutorial selanjutnya.
Tutorial Menarik Lainnya
Membuat Navbar Responsive dengan HTML dan CSS
Membuat Slider Responsive Dengan CSS
Membuat Menu Dropdown Sederhana Dengan CSS
Kumpulan Kode Warna Flat Design
