Langsung ke konten utama

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.
 

Komentar

Posting Komentar

Postingan populer dari blog ini

Keunggulan dalam menggunakan framework Laravel

      Pengembangan website akan terasa lebih mudah jika menggunakan tool yang tepat. Contohnya pemilihan framework php yang akan digunakan Framework yang baik adalah framework yang sesuai dengan kebutuhan aplikasi web yang akan Anda bangun. Tidak hanya itu, framework juga harus bisa menyederhanakan proses pembuatan dan menghasilkan performa yang aplikasi web yang lebih maksimal. Nah! Salah satu framework yang sangat populer saat ini adalah Laravel. Framework ini terkenal kesederhanaannya dan menghasilkan aplikasi web yang powerful. Artikel ini akan membahas soal apa itu Laravel, manfaat Laravel, fitur-fitur Laravel, hingga tips Laravel untuk pemula.  Apa itu Laravel? Anda pasti tahu bahasa pemrograman PHP? Laravel adalah satu-satunya framework yang membantu Anda untuk memaksimalkan penggunaan PHP di dalam proses pengembangan website. PHP menjadi bahasa pemrograman yang sangat dinamis, tapi semenjak adanya Laravel, dia menjadi lebih powerful, cepat, aman, dan simpe...
Posting Komentar
Baca selengkapnya

Melihat Pengaruh Penggunaan Sosial Media Saat Ini

  Rasa-rasanya hampir seluruh masyarakat Indonesia mengenal istilah sosial media. Penggunaan dan perkembangan sosial media terus berkembang hingga saat ini. Sejalan dengan mudahnya akses internet bagi banyak orang, internet of things (IoTs), dan faktor-faktor lainnya. Pengertian Sosial media Sosial media adalah teknologi berbasis komputer yang memfasilitasi dan mempermudah penggunanya dalam berekpresi, berinteraksi, dan mendapatkan informasi secara online (daring). Dalam penggunaannya memudahkan seseorang untuk membagikan idenya, karya-karyanya, pikirannya, melalui komunitas yang terbangun secara online. Sosial media mengunakan teknologi berbasis website atau aplikasi, dengan bantuan internet dan perangkat seperti komputer ataupun smartphone untuk mengaksesnya. Fitur Umum Sosial Media Saat ini banyak sekali jenis dari media sosial yang bisa kamu temukan. Fiturnya dan tujuan penggunaannya yang berbeda membuat sulit bagi para ahli mendefiniskan sosial media itu sendiri. Namun ada beb...
Posting Komentar
Baca selengkapnya

Situs FREELANCE terbaik

Berikut Beberapa Contoh Situs Freelance Di Indonesia Terbaik: Fiverr Situs freelance yang berbasis di Israel ini mungkin sedikit di luar jangkauan orang Indonesia. Tetapi, tidak melepas kemungkinan bagi anda yang ingin mencoba keberuntungan Anda di situs ini. Fiverr menyediakan para Freelancer kesempatan untuk menjual keahliannya dimulai dari harga 5 USD. Fiverr merupakan situs yang menyediakan beragam bidang pekerjaan, dari desain grafis, writing, development, bahkan musik. Meski merupakan situs yang cukup baru di bidang Freelance, Fiverr sudah menarik pengguna yang cukup banyak secara internasional. Sribulancer Sribulancer adalah situs Freelance yang berbasis di Indonesia. Tapi jangan salah, Sribulancer tersedia bagi Anda bagi yang ingin bekerja bahkan hingga ranah internasional. Sribulancer menyediakan pilihan gaji baik Rupiah atau US Dollar. Situs yang satu ini cocok bagi Anda yang memiliki keahlian seperti desain grafis, back-end dan front-end developer, copywriting, tran...
Posting Komentar
Baca selengkapnya