Cara Membuat Login Form Keren dengan HTML CSS

Cara Membuat Login Form Keren dengan HTML CSS
Cara Membuat Login Form Keren dengan HTML CSS - Pada artikel ini saya akan membuat form login keren dengan HTML dan CSS. Kode script ini saya dapatkan diyoutube yang mana bisa menjadikan sumber referensi anda untuk dijadikan yang lebih bagus lagi
Untuk Demonya bisa cek: Form Login

Cara Membuat Login Form Keren

Sebelum memulai membuat halaman login ini, anda perlu menyiapkan alat-alat, sebagai berikut.
  1. Komputer/PC. kalau tidak punya pinjam pergi ke warnet.
  2. Text Editor. Bebas pakai yang mana.
  3. Browser. Pakai Internet Explorer (Rekomendasi pakai Chrome).
  4. Niat. Agar belajarmu hari ini biar tidak sia-sia.
Untuk aplikasi text editornya anda bisa menggunakan Notepad, tetapi anda juga bisa memakai:
  • Sublime Text
  • Notepad++
  • Komodo Edit
  • Atom
  • BlueFish
  • Vim
  • Emacs
  • dan sebagainya..
1. Langkah pertama: membuat file "index.html" dan kemudian masukkan script dibawah ini:

<!DOCTYPE html>

<html>

<head>

 <title>Login Form</title>

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

</head>

<body>

<form class="box" action="https://www.ansoriweb.com/2020/01/cara-membuat-login-form-keren-dengan-html-css.html" method="post">

<h1>Login Here</h1>

<input type="text" name="" placeholder="Username">

<input type="password" name="" placeholder="Password">

<input type="submit" name="" value="Login">

</form>

</body>

</html>

2. Kemudian buat: sebuah file CSS dan beri nama "style.css", dan masukkan script kode berikut ini:

body{

 margin: 0;

 padding: 0;

 font-family: sans-serif;

 background: url(bg.jpg); 

 background-repeat: no-repeat;

 background-size: cover;

}

.box{

 width: 300px;

 padding: 40px;

 position: absolute;

 top: 50%;

 left: 50%;

 transform: translate(-50%,-50%);

 background: #191919;

 text-align: center;

}

.box h1{

 color: white;

 text-transform: uppercase;

 font-weight: 500;

}

.box input[type = "text"], .box input[type = "password"]{

 border: 0;

 background: none;

 display: block;

 margin: 20px auto;

 text-align: center;

 border: 2px solid #3498db;

 padding: 14px 10px;

 width: 200px;

 outline: none;

 color: white;

 border-radius: 24px;

 transition: 0.25s;

}

.box input[type = "text"]:focus,.box input[type = "password"]:focus{

 width: 280px;

 border-color: #2ecc71;

}



.box input[type = "submit"]

{

  border: 0;

 background: none;

 display: block;

 margin: 20px auto;

 text-align: center;

 border: 2px solid #2ecc71;

 padding: 14px 40px;

 outline: none;

 color: white;

 border-radius: 24px;

 transition: 0.25s;

 cursor: pointer;

}



.box input[type = "submit"]:hover

{

 background: #2ecc71;

}

3. Lalu Save: dan tarik file "index.html" kebrowser yang kamu miliki. Perlu kamu ingat! jika ingin mengganti gambar dicss body{}. Dan jangan lupa memindahkan file gambar tersebut ke folder yang telah dibuat.

Setelah selesai mengikuti panduan diatas, maka tampilan form login seperti dibawah ini.
Cara Membuat Login Form Keren dengan HTML CSS

Penutup
Itulah tadi Cara Membuat Login Form Keren dengan HTML CSS, jika ada pertanyaan atau masih bingung anda bisa berkomentar dikolom komentar. Selamat Ngoding dan sampai jumpa ditutorial berikutnya.
Next Post Previous Post
13 Comments
  • Masmient
    Masmient 30 January, 2020 21:13

    buat login apa ya

    • Ahmad Ansori
      Ahmad Ansori 31 January, 2020 12:54

      untuk halaman login gan/form login :)

  • Aorlin
    Aorlin 30 January, 2020 22:33

    Wah keren. Otw praktek. Heheh

    • Ahmad Ansori
      Ahmad Ansori 31 January, 2020 12:54

      sip gan, lanjutkan bakatmu

  • dadang
    dadang 14 August, 2020 23:49

    Gan, tutor bikin form komentar kek gini dong..

    • Ahmad Ansori
      Ahmad Ansori 17 August, 2020 20:23

      kalau bikin komentar seperti ini, silahkan daftar blogger.com

  • Hanif Muchtar
    Hanif Muchtar 30 January, 2021 17:18

    Mas untuk pemasangan ke halaman blog nya gimana ya?

    • Ahmad Ansori
      Ahmad Ansori 04 February, 2021 06:40

      untuk halaman blog blogger sepertinya tidak bisa.

  • bejonugroho
    bejonugroho 19 April, 2021 16:37

    terima kasih saya ikuti tutorialnya, cantik hasilnya

    • Ahmad Ansori
      Ahmad Ansori 20 April, 2021 18:51

      sama-sama mas

  • Unknown
    Unknown 11 September, 2021 11:18

    form register nya bro ada ga

  • yaring
    yaring 05 July, 2023 06:38

    Setelah form login berhasil dibuat, langkah selanjutnya untuk pemasangan ke website localhost bgmn, adakah tutorialnya ??

  • yaring
    yaring 05 July, 2023 06:39

    Asslam, setelah selessai membat form login berhasil, langkah selanjutnya untuk pemasangan ke website localhost bgmn bang ? adakah tutorialnya ?

Add Comment
comment url