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

Pengertian MVC (Model, View & Controller)

  Pengertian MVC MVC adalah sebuah arsitektur perancangan kode program. Tujuannya untuk memecah kode program utama menjadi 3 komponen terpisah dengan tugas yang spesifik. Ketiga komponen tersebut adalah:  1. Model(Pengaksesan database) 2. View(Tampilan design/User Interface) 3. Controller(Alur logika program) Gabungan Model-View-Controller inilah yang disingkat sebagai MVC. Ide awal dari perlunya konsep MVC adalah agar aplikasi yang dibuat bisa mudah dikelola dan dikembangkan, terutama untuk aplikasi besar. Sebagai contoh, seorang web designer bisa fokus merancang bagian View saja, yakni tampilan design website yang terdiri dari kode HTML dan CSS plus sedikit JavaScript. Kode program untuk berkomunikasi dengan database bisa ditangani oleh programmer yang secara khusus bagian Model. Serta programmer lain mengatur alur logika program di bagian Controller. Dengan pemisahan seperti ini, kerja tim menjadi mudah dikelola. Selain itu dengan penerapan konsep MVC yang baik, setiap bag...
Posting Komentar
Baca selengkapnya

Perbedaan Backend Service dan Rest Api

Baik API maupun Web Service , keduanya jadi perangkat lunak yang banyak membantu fungsi di sebuah aplikasi atau website berjalan dengan mudah. Tapi, apa sebenarnya API atau web service itu?    Application Programming Interface(API) merupakan perangkat lunak yang membantu dua aplikasi untuk saling terhubung tanpa perlu mengetahui hal lain yang tidak diperlukan atau database rahasia, dan sebagainya. API jadi perangkat lunak yang fungsinya banyak menolong kegiatan sehari-hari manusia di abad ini. Untuk menggunakan aplikasi streaming musik misalnya, pengguna perlu untuk melakukan daftar pengguna yang bisa dilakukan melalui aplikasi lain seperti Facebook atau Gmail. Di kasus seperti itu, API akan menjadi penghubung antara aplikasi streaming musik yang membutuhkan data dari Facebook atau Gmail tanpa perlu tau bagaimana data itu disimpan dan sebagainya. Konsep dan fungsi API memang sangat memudahkan pengguna digital saat ini. Namun selain API, ada juga yang namanya web service. Di ...
Posting Komentar
Baca selengkapnya

Pengertian dan Sejarah mengenai SQL

-Pengertian Structured Query Language atau SQL mungkin merupakan poin penting dalam sebuah studi teknik komputer jaringan. Keberadaan SQL sebagai sebuah bahasa pemrograman memiliki sejarah dan perkembangan yang panjang. Tentu saja perkembangan tersebut dipengaruhi oleh perkembangan dunia teknologi yang dari tahun ke tahun semakin membaik dan terus diperbaharui. Sehingga mau tidak mau, banyak software diciptakan dengan teknologi baru namun tidak menghilangkan keberadaan SQL ini. -Sekilas Mengenai SQL Pengertian SQL secara umum bagi kalangan awam maupun pemula dalam dunia IT bisa diartikan sebagai bahasa yang digunakan dalam mengakses data. Khususnya untuk data yang memiliki basis relasional. Tentu saja bahasa komputer dalam data basis relasional ini berdasarkan standar yang dikeluarkan oleh American National Standard Institute (ANSI). Standardisasi SQL sudah ada sejak tahun 1986 dan memang diinisiasi oleh ANSI. Hingga saat ini banyak server dalam sebuah database maupun software mampu m...
Posting Komentar
Baca selengkapnya