Dalam membuat layout login kali ini, menggunakkan Visual Code Studio dan juga menggunakan XAMPP.
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 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>
</form>
</div>
</body>
</html>
5. Buat file style.css untuk mengatur layout. lalu isikan kode-kode berikut ini:
*{
margin: 0;
padding: 0;
outline: 0;
font-family: 'Open Sans', sans-serif;
}
body{
height: 100vh;
background-image: url("po.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: 8px 10px;
margin-bottom: 15px;
border: none;
background-color: transparent;
border-bottom: 2px solid #2979ff;
color: #fff;
font-size: 20px;
}
.container form button{
width: 100%;
padding: 5px 0;
border: none;
background-color:#2979ff;
font-size: 18px;
color: #fafafa;
}
6. Buka localhost/form_login lalu akan terlihat tampilan dari codingan tersebut :
.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 :
<!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="regis.css">
<title>Document</title>
</head>
<body>
<div class="container">
<h3>REGISTER</h3>
<form action="" method="POST">
<table>
<tr>
<td>NIM</td>
<td><input type="nim"></td>
</tr>
<tr>
<td>Nama Mahasiswa</td>
<td><input type="text" name="nama_mahasiswa"></td>
</tr>
<tr>
<td>Tanggal lahir</td>
<td><input type="date" name="tanggal lahir"></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>
<input type="radio" name="jk" value="Laki-Laki">Laki-Laki
<input type="radio" name="jk" value="Perempuan">Perempuan
</td>
</tr>
<tr>
<td>Agama</td>
<td><select name="agama">
<option value="Islam">Islam</option>
<option value="Kristen">Kristen</option>
<option value="konghucu">konghucu</option>
<option value="Katolik">Katolik</option>
</td>
</tr>
<tr>
<td>Alamat</td>
<td><input type="text"></td>
</tr>
</table>
<button>Submit</button>
<button>Reset</button>
</form>
</div>
</body>
</html>
8. buat file style2.css untuk membedakan dengan style.css yang pertama, untuk mengatur layout register. dengan isi sebagai berikut :
.png)
9. pada tampilan login tadi, klik register maka akan mengarah pada form register seperti dibawah ini :
note : jika ingin mengubah background gambar, edit pada style.css pada body lalu mengganti link url gambar. (background-image: url("jhg.jpeg"); dan jangan lupa memasukkan gambar pada file form_login.
Komentar
Posting Komentar