CARA MUDAH BUAT LAYOUT FORM LOGIN DENGAN HTML & CSS
Membuat Layout Login Dengan Html & CSS
Di sini saya menggunakan program "Visual Studio Code" untuk melakukan coding, pastikan juga untuk sudah menginstal XAMPP.
1. Pembuatan folder. Pertama lakukan pembuatan folder dengan judul form_login pada folder xampp: Local Disk(C:) > XAMPP > htdocs > new folder (FormLogin)
.png)
.png)
3. Buat file baru dengan nama "index.html" Maka isi seperti ini:
<!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>
Belum punya akun?
<a href="daftar.html">Daftar di sini</a>
</p>
</form>
</div>
</body>
</html>
4. Selanjutnya buat juga buat file "style.css"
Isi seperti berikut
* {
margin: 0;
padding: 0;
outline: 0;
font-family: "Open Sans", sans-serif;
}
body {
height: 100vh;
background-image: url("login.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, 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 #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;
}
.container form p {
width: 100%;
padding: 5px 0;
border: none;
font-size: 18px;
color: #ffffff;
}
.container form a {
width: 100%;
padding: 5px 0;
border: none;
font-size: 18px;
color: #2979ff;
}
5. Dan tampilannya akan seperti ini:
.png)
6. Selanjutnya buat file baru untuk form register, buat file baru dengan nama "daftar.html" dan isi 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" />
<title>Register</title>
<link rel="stylesheet" href="style2.css" />
</head>
<body>
<div class="container">
<h1>Daftar</h1>
<form>
<label>NIM</label><br />
<input type="text" /><br />
<label>Nama Mahasiswa</label><br />
<input type="text" /><br />
<label>Agama</label><br />
<select>
<option>Islam</option>
<option>Kristen</option>
<option>Katolik</option>
<option>Budha</option>
<option>Hindu</option>
<option>Konghucu</option></select
><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>Prodi</label><br />
<select>
<option>Bisnis Digital</option>
<option>Multimedia</option>
<option>Keamanan Cyber</option></select
><br />
<label>Alamat</label><br />
<input type="text" /><br />
<button>
<a href="index.html">Register</a>
</button>
</form>
</div>
</body>
</html>
7. Selanjutnya buat juga buat file "style2.css" supaya membedakan dengan file sebelumnya bisa ditambahkan angka "2". Isi seperti berikut
body {
height: 100vh;
background-image: url("register.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
* {
margin: 0;
padding: 0;
outline: 0;
font-family: "Open Sans", sans-serif;
}
.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 button {
margin-top: 8px;
width: 100%;
padding: 4px 0;
border: none;
background-color: #2979ff;
font-size: 15px;
color: #fafafa;
}
8.Maka tampilannya akan seperti ini:
.png)
Jalankan hasilnya : Disini
Download bahan : Disini
.png&description=CARA MUDAH BUAT LAYOUT FORM LOGIN DENGAN HTML & CSS){kind=link}
Posting Komentar untuk "CARA MUDAH BUAT LAYOUT FORM LOGIN DENGAN HTML & CSS"