fork download
copy 
  1. <!DOCTYPE html>
  2. <html lang="th">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>เข้าสู่ระบบ</title>
  7.   <style>
  8.     body {
  9.       font-family: sans-serif;
  10.       background-color: #f0f2f5;
  11.       display: flex;
  12.       justify-content: center;
  13.       align-items: center;
  14.       height: 100vh;
  15.     }
  16.     .login-box {
  17.       background: white;
  18.       padding: 2rem;
  19.       border-radius: 8px;
  20.       box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  21.       width: 300px;
  22.     }
  23.     .login-box h2 {
  24.       text-align: center;
  25.       margin-bottom: 1.5rem;
  26.     }
  27.     .login-box input {
  28.       width: 100%;
  29.       padding: 0.75rem;
  30.       margin-bottom: 1rem;
  31.       border: 1px solid #ccc;
  32.       border-radius: 4px;
  33.     }
  34.     .login-box button {
  35.       width: 100%;
  36.       padding: 0.75rem;
  37.       background-color: #1877f2;
  38.       border: none;
  39.       color: white;
  40.       font-weight: bold;
  41.       border-radius: 4px;
  42.       cursor: pointer;
  43.     }
  44.     .login-box button:hover {
  45.       background-color: #155bcb;
  46.     }
  47.   </style>
  48. </head>
  49. <body>
  50.  
  51.   <div class="login-box">
  52.     <h2>เข้าสู่ระบบ</h2>
  53.     <form id="loginForm">
  54.       <input type="text" id="username" placeholder="ชื่อผู้ใช้" required>
  55.       <input type="password" id="password" placeholder="รหัสผ่าน" required>
  56.       <button type="submit">เข้าสู่ระบบ</button>
  57.     </form>
  58.   </div>
  59.  
  60.   <script>
  61.     document.getElementById('loginForm').addEventListener('submit', function(e) {
  62.       e.preventDefault();
  63.       const username = document.getElementById('username').value;
  64.       const password = document.getElementById('password').value;
  65.  
  66.       // ตัวอย่างเงื่อนไข (สามารถเชื่อม backend จริงได้)
  67.       if (username === 'admin' && password === '1234') {
  68.         alert('เข้าสู่ระบบสำเร็จ');
  69.         // window.location.href = 'home.html'; // เปลี่ยนหน้า
  70.       } else {
  71.         alert('ชื่อผู้ใช้หรือรหัสผ่านไม่ถูกต้อง');
  72.       }
  73.     });
  74.   </script>
  75.  
  76. </body>
  77. </html>
Success #stdin #stdout 0.03s 25500KB
comments (?)
stdin
copy 
Standard input is empty
stdout
copy 
<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>เข้าสู่ระบบ</title>
  <style>
    body {
      font-family: sans-serif;
      background-color: #f0f2f5;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    .login-box {
      background: white;
      padding: 2rem;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      width: 300px;
    }
    .login-box h2 {
      text-align: center;
      margin-bottom: 1.5rem;
    }
    .login-box input {
      width: 100%;
      padding: 0.75rem;
      margin-bottom: 1rem;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    .login-box button {
      width: 100%;
      padding: 0.75rem;
      background-color: #1877f2;
      border: none;
      color: white;
      font-weight: bold;
      border-radius: 4px;
      cursor: pointer;
    }
    .login-box button:hover {
      background-color: #155bcb;
    }
  </style>
</head>
<body>

  <div class="login-box">
    <h2>เข้าสู่ระบบ</h2>
    <form id="loginForm">
      <input type="text" id="username" placeholder="ชื่อผู้ใช้" required>
      <input type="password" id="password" placeholder="รหัสผ่าน" required>
      <button type="submit">เข้าสู่ระบบ</button>
    </form>
  </div>

  <script>
    document.getElementById('loginForm').addEventListener('submit', function(e) {
      e.preventDefault();
      const username = document.getElementById('username').value;
      const password = document.getElementById('password').value;

      // ตัวอย่างเงื่อนไข (สามารถเชื่อม backend จริงได้)
      if (username === 'admin' && password === '1234') {
        alert('เข้าสู่ระบบสำเร็จ');
        // window.location.href = 'home.html'; // เปลี่ยนหน้า
      } else {
        alert('ชื่อผู้ใช้หรือรหัสผ่านไม่ถูกต้อง');
      }
    });
  </script>

</body>
</html>
https://ideone.com/lD8iPT
language:
PHP (php 7.3.5)
created:
3 days ago
visibility:
public

Share or Embed source code

Discover > Sphere Engine API

The brand new service which powers Ideone!

Discover > IDE Widget

Widget for compiling and running the source code in a web browser!