Tutorial membuat form login dengan HTML dan CSS

 Langsung saja kita mulai, pertama - tama masuk ke code editor anda, lalu bikin file bernama index.html(bebas penamaannya yang penting .html).

index.html

masukan code berikut:

<!DOCTYPE html>

<html>

<head>

<title>Membuat Desain Form Login Dengan HTML & CSS with RizalIhwan</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

 

<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>

</center>

</form>

</div>

 

</body>

</html>

 

Jika Teman - teman sudah sampai step pertama, kita masuk ke step ke dua, bikin file namanya style.css(bebas seperti nama html tadi namun ini harus .css ekstensinya).

 

style.css

 

masukan code berikut: 

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;

}

 

 nahhhh jika sudah semua step di lakukan maka hasilnya akan seperti berikut :

 

cukup sekian dan terima kasih, wasallamualaikum Wr,Wb.