Form Login menjadi bagian penting apabila kita membuat aplikasi yang berbasis user manajemen. Misalnya, aplikasi yang memiliki membership seperti toko online, forum dan lain sebagainya.
Membuat form login, sangatlah mudah, hanya saja diperlukan kemampuan HTML dan CSS yang cukup. Namun, sobat koder tidak perlu khawatir, berikut akan saya berikan contoh membuat form login yang simple dan menarik hanya dengan HTML dan CSS.
Contoh tampilan akhir
Source codenya:
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 | <style type="text/css"> body {background: #f3f3f3} #body-form { width:400px; margin:0 auto; margin-top:150px; border: 1px solid #0e90d2; text-align: center; background: #fff; box-shadow: 2px 2px 2px #999; } #title-form { width:100%; background:#0e90d2; margin:0; padding:10px 0; font-size: 16px; color: #fff; } .row {width:100%;margin-bottom:5px} .row:last-child {margin:0} form {padding:10px} form input {padding:10px; width: 90%} input[name="submit-btn"]{width: 20%;background-color: #0e90d2;border:none;color:#fff}</style><div id="body-form"><h2 id="title-form">Login Form</h2><form><div class="row"><input name="username" placeholder="Your Username" type="text"></div><div class="row"><input name="username" placeholder="Your Password" type="password"></div><div class="row"></div></form></div> |
0 Comment to "Membuat Login Form Simple dan Menarik"
Post a Comment