Tugas form login html

               FORM LOGIN HTML


Hasil Codingan HTML 






Codingan HTML


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Page</title>
    <style> 
}
.container {
    width: 350px;
    padding: 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: auto 50px;
        }
    
        .login-container {
            background: #ffffff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 300px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        .form-group input {
            width: 100%;
            padding: 10px;
            border: 1px solid #cccccc;
            border-radius: 4px;
        }
        .form-group input:focus {
            border-color: #007bff;
            outline: none;
        }
        .login-button {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
        }
        .login-button:hover {
            background-color: #0056b3;
        }
        .message {
            text-align: center;
            margin-top: 15px;
            color: red;
        }
    a {
        text-decoration: none;
    }
    </style>
</head>
<body>
    <div class="login-container">
        <center> <img src="Paskal.jpg" width="150" height="150"style="border-radius: 100%;">
            <center/>
              <h1><center>Form Login</h1>
        <form id="loginForm">
            <div class="form-group">
                <label for="username"></label>
                <input type="text" id="username" name="username" placeholder="username" required>
            </div>
            <div class="form-group">
                <label for="password"></label>
                <input type="password" id="password" name="password" placeholder="password" required>
            </div>
            <button type="button" class="login-button" onclick="validateLogin()">Login</button>
            <div class="message" id="message"></div>
        </form>
            <a href="contoh.html"> Lupa Sandi? </a>
            
            
  
</body>
</html>


Komentar

Posting Komentar

Postingan populer dari blog ini

MAKALAH MATERI PHP

       MAKALAH                             MATERI PHP Dibuat untuk memenuhi tugas RPL Disusun oleh : Paskal alfarado dastian  Kelas XI RPL 1 SMK JAMIYYATUL AULAD  TAHUN AJARAN 2025/2026                                                                                   BAB I                                  PENDAHULUAN  TAG DALAM PHP Ada banyak cara untuk menyisipkan PHP dalam scrit HTML, ada berbagai macam bentuk tag yang bisa digunakan, Contohnya: Cara 1 <?php ----------> menandai awal tag ?> ----------------> menandai akhir tag Cara 2 <? -------------> menandai awal tag ?>...
Baca selengkapnya

PENGALAMAN BELAJAR PEMOGRAMAN DASAR

 Pengalaman pertama saya belajar pemrograman dasar itu saya sangat bingung karna gak paham sama sekali, karna kirain saya jurusan RPL tuh kayak jurusan TKJ makanya saya tertarik buat masuk jurusan RPL tapi ternyata beda. Namun, setelah belajar dan mencoba memahami pemrograman dasar , seiring berjalannya waktu saya mulai sedikit paham tentang bahasa pemrograman. Misalnya, ketika belajar tentang variabel, saya mengerti bahwa variabel itu seperti wadah untuk menyimpan data.  Kesulitan terbesar yang saya alami adalah ketika menemukan error. Kadang hanya salah titik koma saja program tidak mau jalan, sehingga saya harus sabar mencari kesalahannya. Dari situ saya belajar bahwa pemrograman juga melatih ketelitian dan kesabaran.   Nama : Paskal alfarado Buat : pak widianto
Baca selengkapnya

Semua penjelasan komponen -komponen komputer

Gambar
 Disi saya akan sedikit menjelaskan tentang komponen komputer yg saya ketahui.   Motherboard adalah papan sirkuit utama di komputer/laptop yang menjadi tempat terhubungnya semua komponen, seperti CPU, RAM, hard disk/SSD, VGA, dan perangkat lainnya. Fungsi utamanya: menghubungkan, mengatur, dan mengalirkan data maupun daya antar komponen supaya komputer bisa berjalan. 1.SSD SSD (Solid State Drive) adalah perangkat penyimpanan data modern yang menggunakan chip memori flash, bukan piringan seperti HDD. Fungsinya: menyimpan sistem operasi, aplikasi, dan file dengan kecepatan baca/tulis sangat cepat, lebih awet, hemat daya, dan tidak berisik dibanding hard disk. 2.RAM RAM (Random Access Memory) adalah memori utama komputer yang menyimpan data sementara saat komputer bekerja. Fungsinya: membantu prosesor menjalankan program dengan cepat. Semakin besar RAM, semakin lancar multitasking (buka banyak aplikasi sekaligus). Kalau komputer dimatikan, data di RAM akan hilang. 3.Motherboard...
Baca selengkapnya