search

Apa kode untuk halaman login di html?

1 years ago
Komentar: 0
Dibaca: 5

Formulir pendaftaran dan pendaftaran di situs web Anda dapat menghasilkan penjualan, perolehan prospek, dan pertumbuhan pelanggan

Show

Sebagian besar situs web menggunakan HTML5. HTML adalah bahasa yang digunakan untuk berkomunikasi di Internet. Anda harus mulai dari awal ketika mempelajari bahasa pemrograman

Pada artikel ini, saya akan menunjukkan kepada Anda cara membuat formulir login sederhana dalam HTML dan CSS, sehingga Anda dapat langsung menggunakannya.

Demo

https. // www. mesin tenun. com/bagikan/3e82e84661584c9c922c3f8cd779014e

Langkah-langkah untuk Diikuti

1) Buat Folder Proyek dan buka di IDE pilihan Anda dan tautkan HTML dengan CSS dengan kode di bawah ini

<head>
  <link rel="stylesheet" href="style.css" />
</head>

2) Selanjutnya, buat struktur halaman login menggunakan HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <title>Login Form Demo</title>
  </head>
  <body>
    <div class="login-wrapper">
      <form action="" class="form">
        <h2>Login</h2>
        <div class="input-group">
          <input type="text" name="loginUser" id="loginUser" required />
          <label for="loginUser">User Name</label>
        </div>
        <div class="input-group">
          <input
            type="password"
            name="loginPassword"
            id="loginPassword"
            required
          />
          <label for="loginPassword">Password</label>
        </div>
        <input type="submit" value="Login" class="submit-btn" />
      </form>
    </div>
  </body>
</html>
_

3) Selanjutnya, kami menambahkan CSS untuk menata halaman login kami

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-size: cover;
  font-family: sans-serif;
}
.login-wrapper {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.form {
  position: relative;
  width: 100%;
  max-width: 380px;
  padding: 80px 40px 40px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 10px;
  color: #fff;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5);
}
.form::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: rgba(255, 255, 255, 0.08);
  transform: skewX(-26deg);
  transform-origin: bottom left;
  border-radius: 10px;
  pointer-events: none;
}
.form img {
  position: absolute;
  top: -50px;
  left: calc(50% - 50px);
  width: 100px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
}
.form h2 {
  text-align: center;
  letter-spacing: 1px;
  margin-bottom: 2rem;
  color: white;
}
.form .input-group {
  position: relative;
}
.form .input-group input {
  width: 100%;
  padding: 10px 0;
  font-size: 1rem;
  letter-spacing: 1px;
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background-color: transparent;
  color: inherit;
}
.form .input-group label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 0;
  font-size: 1rem;
  pointer-events: none;
  transition: 0.3s ease-out;
}
.form .input-group input:focus + label,
.form .input-group input:valid + label {
  transform: translateY(-18px);
  color: white;
  font-size: 0.8rem;
}
.submit-btn {
  display: block;
  margin-left: auto;
  border: none;
  outline: none;
  background: #ff652f;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}
.forgot-pw {
  color: inherit;
}

#forgot-pw {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  z-index: 1;
  background: #fff;
  opacity: 0;
  transition: 0.6s;
}
#forgot-pw:target {
  height: 100%;
  opacity: 1;
}
.close {
  position: absolute;
  right: 1.5rem;
  top: 0.5rem;
  font-size: 2rem;
  font-weight: 900;
  text-decoration: none;
  color: inherit;
}

4) Sebelum Menerapkan CSS, hasilnya terlihat seperti ini

Apa kode untuk halaman login di html?

5) Setelah Menerapkan CSS hasil akhir kita akan terlihat seperti ini

Apa kode untuk halaman login di html?

Hasil Akhir dalam Bentuk Video

https. // www. mesin tenun. com/bagikan/3e82e84661584c9c922c3f8cd779014e

Lihat situs yang diterapkan di sini

Halaman login telah berhasil dibuat. Saya harap artikel ini bermanfaat bagi Anda. Silahkan ajukan pertanyaan di kolom komentar jika ada

Bagaimana cara membuat halaman login di HTML dan CSS?

Langkah-Langkah yang Harus Diikuti. .
Buat Folder Proyek dan buka di IDE pilihan Anda dan tautkan HTML dengan CSS dengan kode di bawah ini. .
Selanjutnya, buat struktur untuk halaman login menggunakan HTML. .
Selanjutnya, kami menambahkan CSS untuk menata halaman login kami. .
Sebelum Menerapkan CSS, hasilnya terlihat seperti ini

Bagaimana cara menambahkan halaman login ke situs web saya?

Cara Membuat Halaman Login untuk Situs Web Saya .
Buat formulir login menggunakan pembuat formulir. Beberapa pembuat situs web dan sistem manajemen konten memiliki pembuat formulir bawaan, sementara yang lain memerlukan plugin. .
Buat halaman masuk. .
Sematkan formulir login di halaman login

Bagaimana Anda memasukkan nama pengguna dan kata sandi dalam HTML?

Demo HTML. .
.

Bagaimana cara membuat halaman login di HTML menggunakan notepad?

Bagaimana cara membuat formulir login di html? .
Buka Notepad atau Adobe Dreamweaver atau editor Html lainnya. Saya menggunakan Dreamweaver. .
Salin kode HTML lengkap di bawah ini dan tempel di editor Anda. <. .
Now apply the CSS to all Elements for better presentation. First create CSS