Hello World ; Siang Fans, Please Say Hello Haters :*
ketemu lagii sama admin Bhandell, yoloo #Nuenomaru ^_^ , lanjut Blog Walking lagi Gengs ;3
xixixhi, baru pulang gawe, maap yo admin2 yg ngolah Blog dan FP lg pada sibuk kerja, jdi maklumin aja yak, tpi OA Line dan sosmed yg lain akan kami pastikan, akan Update setiap harinya kok ^_^
Btw Kali ini Nue akan Share Cara Membuat Form Login Sederhana Dengan HTML dan CSS.
Hehehe tutorial utk artikel kali ini ringan dlu deh >.<" *yg dh master bisa minggir dlu bebz ;*
Lanjut intip tutornya gengs ;*
Pertama kali tentunya kita buat HTMLnya terlebih dahulu, kita buat file index.html yang isinya seperti berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login form TKJ Cyber Art</title>
<!-- Untuk CSS ditaruh pada file style.css, sehingga perlu dipanggil code ini -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="login">
<h3>Login</h3>
<fieldset>
<form action="">
<input type="text" name="username" placeholder="Username">
<input type="email" name="Email" placeholder="Email">
<input type="submit" name="submit" value="Login">
<div class="border-p"></div>
<p>OR</p>
<button>Login With Facebook</button>
</form>
</fieldset>
</div>
</body>
</html>
Setelah membuat htmlnya maka kita lanjut membuat CSSnya, buat file baru dengan nama style.css dan isi dengan kode:
body{
margin: 0;
padding: 0;
}
#login{
max-width: 340px;
margin:100px auto;
background: #f9f9f9;
box-shadow: 0 0 10px #aaa;
}
#login h3{
text-align: center;
padding: 25px 10px;
background-color: #2b2f3e;
color: #b0b0bc;
}
fieldset{
margin: 0;
border: none;
}
form{
padding: 0;
margin: 0;
padding: 15px;
}
input[type='text'],
input[type="email"]{
width: 100%;
padding: 1em;
margin-top: 1.2em;
color: #888;
}
input[type="submit"]{
width: 100%;
padding: 1.4em;
margin: 1.5em 0;
color: #888;
background-color:#00cdb1 ;
border:none;
color:#eee;
border-bottom: 4px solid transparent;
}
input[type="submit"]:hover{
opacity: 0.8;
border-color: #00adb1;
}
form p{
text-align: center;
color: #888;
width: 30px;
margin: 10px auto 0;
background: #f9f9f9;
position: relative;
bottom: 20px;
}
.border-p{
border-top: 1px solid #888;
margin: 10px 10px;
}
button{
background-color: #3b5998;
width: 100%;
padding: 1.4em;
margin-bottom: 1em;
color: #888; ;
border:none;
color:#eee;
border-bottom: 4px solid transparent;
}
button:hover{
opacity: 0.9;
border-color: #3b3998;
}
Setelah jadi semua, save hasil kerja Lu gengs, dan cek hasilnya di browser.
Maka hasilnya akan seperti dibawah ini:
Lu pada bisa menempatkan CSS dan HTML di tempat yang terpisah ataupun dalam satu file. Jika digabung menjadi satu, maka code CSS diatas ditempatkan dalam tag
<head> ... </head>
Tapi kalau penempatanya dipisah, maka halaman CSS perlu dipanggil dengan kode seperti ini
<link rel="stylesheet" href="assets/css/style.css">
Untuk contoh yang lain, cara membuat Form Login bisa cek ke mbah google aja / tanya2 di Forum, makin banyak Refrensi, tentunya Lu jdi makin Jozz Kreasikan Codingan Lu :3
Selanjutnya Silahkan Kreasikan Codingan Lu , oprek2 aja sendiri >.<"
Mudahkan x_O ?
Stay Cool and Keep ./Crotz , gaes <(")
bila ada kesalahan mohon di maafkan dan dibenarkan di kolom komentar kak.
bila ada kritik, dan pertanyaan langsung aja kak ke wall fanspage kami: TKJ CYBER ART
Nue cuma niat untuk Share Tutorial, yg bertujuan utk membantu para pemula kek Nue :')
Happy ngoding bro~
Sekian dan semoga bermanfaat .. terimakasih
Source and Thanks to: PONDOK PROGRAMMER
./Nuenomaru
 |
| Kami ada dan Berkarya bukan utk Di Sanjungi #keepcrootzgaes |
Visit and follow :
FP : TKJ Cyber Art
G+ : TKJ Cyber Art
youtube : TKJ Cyber Art
BBM : C0018D1A2
Line : http://line.me/ti/p/%40hjl8740i
10 comments
Bro update cara mencari site shop menchat shopify dengan pencarian mnggunakan dork :3
Add fb ane abilganas@gmail.com
Ane setia pngunjung blog ente :v
Ane
terimakasih telah setia membaca blog kami , bang :D
hahaha olshop lagi susah kak awkakw, kami lg gak maenan ituh >.<" , nanti kalo ada , akan kami update di blog kok.. hmm ke fanspage kami saja kak: www.fb.com/tkjcyberart.go.id
btw Salam sukses teruss utk kau bang hehehe
bang cara nambah button terus diganti warnanya gimana?
mohon bimbingannya
makasih gan
http://kuy-belajar.blogspot.co.id/2016/07/cara-membuat-tombol-di-html-menggunakan-tag-button.html
langsung ke situ saja gan, sekalian praktek
#Nuenomaru
makasih juga telah membaca artikel kami gan akwkwak
#Nuenomaru
thx gan... sangat bermanfaat, kalo bisa perbanyak lagi tutorial kaya css & html :v
bro bisa kirim file login html nya gk?aku ke bingungan karena gagal saat css
sangat bermanfaat.. terimakasih
EmoticonEmoticon