Membuat Form Login – Pada materi praktikum kali ini kita akan membuat sebuah form login pada website yang biasa kita temui ketika ingin mendaftarkan diri pada sebuah web seperti facebook, gmail, IG, maupun youtube dan twitter.
kita sudah membahas bagaimana membuat website sederhana menggunakan HTML pada praktikum sebelumnya, sekarang saatnya kita menggabungkan materi sebelumnya dengan materi hari ini. yaitu membuat website form login menggunakan HTML dan CSS
apa yang dimaksud dengan CSS?
CSS adalah singkatan dari Cascading Style Sheet yang berfungsi untuk menjelaskan bagaiman element HTML dapat ditampilkan pada sebuah website, kertas maupun media online lainnya. CSS juga dapat menghemat banyak waktu dan pekerjaan, CSS dapat mengendalikan layout dari banyak halaman web menjadi satu halaman saja.
CSS juga dapat dibuat dalam bentuk internal file dan eksternal file dengan catatan file ekstensi CSS harus berbentuk .css misalnya style.css
untuk file css yang berada di luar file induk website, harus menggunakan tag element <link> pada bagian header website agar dapat menghubungkan file induk website dengan file CSS
adapaun file CSS biasanya ditulis didalam kurung kurawal {}. untuk penulisan CSS dapat menggunakan 3 buah tag element pada html yaitu tag “id” tag “class” dan tag element HTML itu sendiri
tag ID agar dapat dibaca oleh CSS kita harus menambahkan tanda pagar # didalam file css yang akan dibuat. misalnya ada sebuah tag element html
<div id="card"></div>maka di dalam css kita perlu menuliskan #card agar id=”card” dapat dibaca sebagai identitas css
kemudian adapula yang menggunakan tag element class, maka akan kita tuis didalam css menggunakan tanda titik diawal kata class yang dinginkan, misalnya
<div class="card"> </div>maka di dalam css kita perlu menuliskan .card agar class=”card” dapat dibaca sebagai identitas css
Struktur CSS
pada struktur CSS terbagi 2 bagian yaitu selector dan declaration
selector adalah element HTML yang akan anda ubah gayanya
Declaration adalah gaya yangakan digunakan pada element, dapat berisi banyak pilihan gaya yang dipisahkan oleh tanda titik koma. declaration juga dapat berisi value atau nilai dan juga nama dipisahkan oleh titik dua.
semua declaration harus berada didalam kurung kurawal {}
untuk mempelajari syntax yang lebih lengkap, kamu dapat mengunjungi website resminya yaitu W3School CSS
Langkah membuat Form Login menggunakan HTML dan CSS
Text Editor
untuk memudahkan membuat website, kita dapat menggunakan teks editor, salah satunya yang akan kita gunakan pada praktik ini adalah text editor Sublime, silahkan install terleih dahulu aplikasi sublime dan dapat di didownload melalui link berikut ini – Klik Disini
Buat file index.html
langkah pertama kita perlu membuat file induk website dengan nama index.html
silahkan buat dulu filenya dengan langkah sebagai berikut
1. buka aplikasi sublime
2. klik file – new file
3. ketik index.html dan simpan
4. klik file – save as dan simpan pada folder kerja kamu
buat file style.css
sama halnya langkah kedua, hanya perbedaan pada nama filenya saja dan tipenya yakni style.css
Buat struktur HTML
kemudian buka file index.html yang telah disimpan tadi menggunakan sublime
dan ketikkan html kemudian tekan tombol TAB pada keyboard, maka file index.html akan otomatis menjadi seperti dibawah ini
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
</body>
</html>buka file index.html dengan browser
kita dapat dengan mudah membuka file index.html dengan browser, klik kanan pada lembar kerja index.html – open in browser seperti gambar berikut
maka akan tampil hasil pertama yang kita buat
Ubah title
isilah pada tag element title dengan nama CSS dibagian index.html, dan jangan lupa untuk menyimpan setiap perubahan
<title>CSS</title>
Menambahkan link pada header
agar file css kita terhubung dengan file induk website, maka kita perlu menambahkan baris perintah link di bagian header seperti perintah berikut ini
<link rel="stylesheet" type="text/css" href="style.css">
Mengubah Background Website
dengan menggunakan CSS kita dapat mengubah warna background website sesuka kita. pindah ke file style.css kemudian ketikkan perintah berikut pada file css kamu
body{
background: -webkit-linear-gradient(bottom, green, yellowgreen);
background-repeat: no-repeat;
}jangan lupa simpan file tersebut dengan menekan tombol ctrl + s, maka hasilnya sebagai berikut ini :
Membuat Card
kemudian tambahkan baris perintah <div></div> di dalam elemen body, jangan lupa menambahkan id=”card”, perhatikan perintah berikut ini
<body>
<div id="card"></div>
</body>kemudian tambahkan perintah pada css kamu seperti kode berikut ini
#card {
background: #fbfbfb;
border-radius: 8px;
box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.65);
height: 410px;
margin: 6rem auto 30rem auto;
width: 329px;
}maka hasilnya adalah sebagai berikut :
Membuat Bagan Konten
kemudian tambahkan lagi <div> didalam div card yang sebelumnya kita buat, jangan lupa menambahkan id=”konten”
perhatikan syntax berikut ini :
<body>
<div id="card">
<div id="konten">
</div>
</div>tambahkan CSS berikut
#konten{
padding: 12px 44px;
}Membuat Judul Form
kemudian untuk membuat judul form kita tambahkan baris baru didalam tag div=”konten”, seperti berikut
<div id="judulform">
<h2>LOGIN</h2>
<div class="garisbawah"></div>kemudian pada bagian css tambahkan baris perintah berikut
#judulform {
font-family: sans-serif;
letter-spacing: 4px;
padding-bottom: 23px;
padding-top: 13px;
text-align: center;
}
.garisbawah {
background: -webkit-linear-gradient(right, green, yellowgreen);
height: 2px;
margin: -1.1rem auto 0 auto;
width: 89px;
}maka hasilnya seperti berikut ini
Membuat Form
kemudian tambahkan syntax form seperti berikut didalam div konten
<form class="formulir">
</form>didalam tag element form tambahkan baris berikut
<label style="padding-top:13px"> Email</label>
<input id="user-email" class="kotak" type="email" name="email" autocomplete="on" required />
<div class="gariskotak"></div>
<label style="padding-top:22px"> Password</label>
<input id="user-password" class="kotak" type="password" name="password" required />
<div class="gariskotak"></div>
<a href="#"><legend id="lupapass">Lupa password?</legend></a>maka hasilnya akan seperti berikut ini
kemudian buat css nya
a {
text-decoration: none;
}
label {
font-family: sans-serif;
font-size: 11pt;
}
#lupapass {
color: #2dbd6e;
font-family: "Raleway", sans-serif;
font-size: 10pt;
margin-top: 3px;
text-align: right;
}
.formulir {
align-items: left;
display: flex;
flex-direction: column;
}
.gariskotak {
background: -webkit-linear-gradient(right, #a6f77b, #2ec06f);
height: 1px;
width: 100%;
}
.kotak {
background: #fbfbfb;
border: none;
outline: none;
padding-top: 14px;
}maka hasilnya akan seperti berikut ini
