Dalam membuat layout login kali ini, menggunakkan Visual Code Studio dan juga menggunakan XAMPP.
5. Buat file style.css untuk mengatur layout. lalu isikan kode-kode berikut ini:
.png)
7. buat file register.html untuk membuat tampilan layout register. (link untuk mengarahkan ke tampilan register sudah ada pada index.html tadi) dengan langkah yang sama dengan index.html tetapi isi dari register.html sebagai berikut :
.png)
Langkah awalnya yaitu :
1. Pembuatan Folder dengan judul form_login pada folder xampp: Local Disk(C:) > XAMPP > htdocs > new folder
2. Membuka folder melalui VS Code pilih file pada pojok kanan atas > pilih open folder > cari file form_login
3. Buat file baru dengan format nama index.html lalu ketik tanda seru (!) klik enter. lalu edit Edit title pada baris 7 dan ganti kata “Document” dengan kata “Membuat
Form Login”.
4. Diatas title (baris 7) sisipkan kode utk akses CSS Eksternal.
- Isi dari index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Membuat Form Login</title>
</head>
<body>
<div class="container">
<h1>Login</h1>
<form>
<label>Username</label><br>
<input type="text"><br>
<label>Password</label><br>
<input type="password"><br>
<button>Log in</button>
<p class="register">
Belum punya akun?
<a href="register.html">Register</a>
</p>
</form>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
outline: 0;
font-family: 'Open Sans', 'sans-serif';
}
body{
height: 100vh;
background-image: url("fff.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.container{
position:absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
padding: 20px 25px;
width: 300px;
background-color: rgba(0,0,0,.7);
box-shadow: 0 0 10px rgba(255,255,255,.3);
}
.container h1{
text-align: left;
color: #fafafa;
margin-bottom: 30px;
text-transform: uppercase;
border-bottom: 4px solid #2979ff;
}
.container label{
text-align: left;
color: #90caf9;
}
.container form input{
width: calc(100% - 20px);
padding: 5px 8px;
margin-bottom: 15px;
border:none;
background-color: transparent;
border-bottom: 2px solid #2979ff;
color:#fafafa;
font-size: 20px;
}
.container form button{
width: 100%;
padding: 5px 0;
border:none;
background-color: #2979ff;
font-size: 18px;
color:#fafafa
}
.register{
color: white;
margin-top: 15px;
}
6. Buka localhost/form_login lalu akan terlihat tampilan dari codingan tersebut :
.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style2.css">
<title>Membuat Form Register</title>
</head>
<body>
<div class="container">
<h1>Register</h1>
<form>
<label>NIM</label><br>
<input type="text"><br>
<label>Nama Mahasiswa</label><br>
<input type="text"><br>
<label>Prodi</label><br>
<input type="text"><br>
<label>Tanggal Lahir</label><br>
<input type="date"><br>
<label>Jenis Kelamin</label><br>
<input type="radio" id="Laki-laki" name="gender" value="Laki-laki">
<label label for="Laki-laki">Laki-laki</label><br>
<input type="radio" id="Perempuan" name="gender" value="perempuan">
<label label for="Perempuan">Perempuan</label><br>
<label>Agama</label><br>
<select id="Agama" name="Agama">
<option value="Islam">Islam</option>
<option value="Kristen">Kristen</option>
<option value="Katholik">Katholik</option>
<option value="Hindu">Hindu</option>
<option value="Buddha">Buddha</option>
<option value="Konghucu">Konghucu</option>
</select><br>
<label>Alamat</label><br>
<input type="text"><br>
<button>register</button>
</body>
</html>
8. buat file style2.css untuk membedakan dengan style.css yang pertama, untuk mengatur layout register. dengan isi sebagai berikut :
*{
margin: 0;
padding: 0;
outline: 0;
font-family: "Open Sans", sans-serif;
}
body{
height: 100vh;
background-image: url("hhh.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 20px 25px;
width: 300px;
background-color: rgba(59, 47, 47, 0.7);
box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}
.container h1 {
text-align: left;
color: #fafafa;
margin-bottom: 30px;
text-transform: uppercase;
border-bottom: 4px solid #005eff;
}
.container label {
text-align: left;
color: #74c0ff;
}
.container form input{
padding: 5px 8px;
border:none;
background-color: transparent;
border-bottom: 2px solid #2979ff;
color:#fafafa;
font-size: 15px;
}
.container form button{
width: 100%;
margin-top: 25px;
padding: 10px;
border:none;
background-color: #2979ff;
font-size: 18px;
color:#fafafa
}
9. pada tampilan login tadi, klik register maka akan mengarah pada form register seperti dibawah ini :
.png)
note : jika ingin mengubah background gambar, edit pada style.css pada body lalu mengganti link url gambar. (background-image: url("hhh.jpg");) dan jangan lupa memasukkan gambar pada file form_login.
Komentar
Posting Komentar