Cara menggunakan form login html keren

cara membuat form login transparan dengan html dan css – Halo Sobat, Pada kesempatan kali ini saya akan membagikan script form login keren transparan. File nya bisa kalian download di bawah jika tidak mau nulis scrpit nya. silahkan di pelajari script nya.

Table of Contents Show

Langkah langkah membuat form login HTML?
Apa yang dimaksud dengan form login?
Langkah langkah membuat Form password?
Untuk apa kita membuat fitur login?

Setiap website pasti menggunakan halaman login untuk masuk kehalaman admin. Halaman login biasnya berisi akun email dan password untuk melakukan login. selain itu, biasanya juga terdapat fitur register dan lupa kata sandi.

Pada tutorial kali ini kita akan membuat desain form login transparan seperti gambar di bawah :

membuat desain form login transparan

Membuat Desain Form Login Transparan dengan HTML dan CSS

1. Silahkan buat folder terlebih dahulu.

2. Kemudian buka aplikasi kode editor kalian, lalu buat file index.html simpan dalam folder yang sudah kalian buat tadi.

3. lalu masukkan script di bawah pada file index.html

<!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <title>Login Page</title>
    <link rel="stylesheet" href="style.css" media="screen" title="no title">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
      <div class="login">

          <div class="avatar">
            <i class="fa fa-user"></i>
          </div>

          <h2>Login Form</h2>

          <div class="box-login">
            <i class="fas fa-envelope-open-text"></i>
            <input type="text" placeholder="Email">
          </div>

          <div class="box-login">
            <i class="fas fa-lock"></i>
            <input type="text" placeholder="Password">
          </div>

          <button type="submit" name="login" class="btn-login">Login</button>
          <div class="bottom">
            <a href="#">Register</a>
            <a href="#">Forgot Password</a>
          </div>
      </div>
  </head>
  </html>

4. silahkan buka pada pada web browser kalian maka hasilnya akan seperti dibawah

5. kemudian kita tambahkan script css untuk membuat desain tampilannya.

6. Buat file style.css lalu simpan pada folder tadi

7. kemudian masukkan script dibawah

body {
   margin: 0;
   padding: 0;
   background: #90caf9 ;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   background-attachment: fixed;
   font-family: sans-serif;
 }
 .login {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-30%, -50%);
   background: rgba(4, 29, 23, 0.5);
   padding: 50px;
   width: 270px;
   box-shadow: 0px 0px 25px 10px black;
   border-radius: 15px;
 }
 .avatar {
   font-size: 30px ;
   background: #E59866;
   width: 50px;
   height: 50px;
   line-height: 50px;
   position: fixed;
   left: 50%;
   top: 0;
   transform: translate(-50%, -50%);
   text-align: center;
   border-radius: 50%;
 }
 .login h2 {
   text-align: center;
   color: white;
   font-size: 30px;
   font-family: sans-serif;
   letter-spacing: 3px;
   padding-top: 0;
   margin-top: -20px;
 }
 .box-login {
   display: flex;
   justify-content:space-between;
   margin: 10px;
   border-bottom: 2px solid white;
   padding: 8px 0;
 }
 .box-login i {
   font-size: 23px;
   color: white;
   padding: 5px 0;
 }
 .box-login input {
   width: 85%;
   padding: 5px 0;
   background: none;
   border: none;
   outline: none;
   color: white;
   font-size: 18px;
 }
 .box-login input::placeholder {
   color: white;
 }
 .btn-login
 .box-login input:hover{
   background: rgba(10, 10, 10,s 0.5);
 }
 .btn-login {
   margin-left: 10px;
   margin-bottom: 20px;
   background: none;
   border: 1px solid white;
   width: 92.5%;
   padding: 10px;
   color: white;
   font-size: 18px;
   letter-spacing: 3px;
   cursor: pointer;
   }
 .btn-login:hover{
   background: rgba(12, 30, 15, 0.5);
 }
 .bottom {
   margin-left: 10px;
   margin-right: 10px;
   display: flex;
   justify-content: space-between;
 }
 .bottom a {
   color: white;
   font-size: 15px;
   text-decoration: none;
 }
 .bottom a:hover {
 text-decoration: underline;
 }

8. Kemudian refresh index.html pada web browser kalian , maka hasilnya akan seperti dibawah

membuat halaman login html

9. Jika anda ingin menambahkan background gambar silahkan masukkan gambar ke folder tadi beri nama background

BACA JUGA : Cara Membuat Video Menjadi Gif di (WA,Youtube,IG,PC)

10. kemudian ubah pada script dibawah:

11. Masukkan nama gambar background sesuai dengan extensinya seperti dibawah :

10. Maka hasilnya akan seperti di bawah :

membuat desain form login transparan

Demikian cara membuat form login transparan dengan html dan css. Silahkan teman-teman download script nya di link dibawah :

DOWNLOAD SCRIPT

Sekian tutorial cara membuat form login transparan dengan html dan css. Semoga bermanfaat buat teman-teman semua. Semangat ngoding nya jangan menyerah. jangan lupa kunjungi artikel saya yang lainnya.

Cara Membuat Form Login yang Menarik dengan HTML.

Deklarasikan Dokumen HTML Anda. Sekarang, buka file html form login Anda. ... .

2. Buat Kepala Halaman Form Login. ... .

3. Beri Judul Halaman Form Login. ... .

3. Sisipkan File CSS. ... .

4. Buat Badan Form Login. ... .

Buat Layout Form Login. ... .

6. Beri Judul Form Login. ... .

7. Buat Kotak Form Login..

Form login adalah halaman yang di dalamnya terdapat sebuah inputan untuk memasukan username dan password sebagai akses untuk masuk ke dalam aplikasi.

Langkah langkah membuat Form password?

Bagaimana cara membuatnya ?.

Buat satu dokumen Google Form. Klik Baru --> Lainnya --> Google Form..

Ganti pertanyaan menjadi (a) Jawaban singkat, (b) Wajib diisikan setting enable, klik menu titik tiga dan klik (c) Validasi respon..

Isi bagian : (a) Pertanyaan dengan kata "Password", pilih (b) Teks, dan pilih (c) Berisi..

Login disebut juga “logon” atau “sign in” adalah istilah dalam hal keamanan komputer, yakni berupa proses pintu masuk bagi pengguna untuk mengakses sistem komputer. Login dimaksudkan untuk mengatur proses identifikasi. Proses Login minimal terdiri dari username/akun pengguna dan password untuk mendapatkan hak akses.