Простая страница входа в HTML: методы и примеры - Fcodenotes

Чтобы создать простую страницу входа в HTML, вы можете использовать различные методы. Ниже я объясню некоторые из них:

Метод 1: HTML-форма с методом POST

<!DOCTYPE html>
<html>
<head>
  <title>Login Page</title>
</head>
<body>
  <h2>Login</h2>
  <form action="process-login.php" method="POST">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required><br><br>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required><br><br>
    <input type="submit" value="Login">
  </form>
</body>
</html>

В этом методе мы создаем HTML-форму с двумя полями ввода имени пользователя и пароля. Атрибут действия формы указывает URL-адрес, по которому данные формы будут отправлены, когда пользователь отправит форму. Атрибут метода имеет значение «POST» для безопасной отправки данных формы.

Метод 2: HTML-форма с методом GET

<!DOCTYPE html>
<html>
<head>
  <title>Login Page</title>
</head>
<body>
  <h2>Login</h2>
  <form action="process-login.php" method="GET">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required><br><br>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required><br><br>
    <input type="submit" value="Login">
  </form>
</body>
</html>

Этот метод аналогичен первому, но атрибут метода формы имеет значение «GET». Данные формы будут добавлены к URL-адресу, указанному в атрибуте действия.

Метод 3. Проверка JavaScript

<!DOCTYPE html>
<html>
<head>
  <title>Login Page</title>
  <script>
    function validateForm() {
      var username = document.forms["loginForm"]["username"].value;
      var password = document.forms["loginForm"]["password"].value;

      if (username == "" || password == "") {
        alert("Please enter both username and password.");
        return false;
      }
    }
  </script>
</head>
<body>
  <h2>Login</h2>
  <form name="loginForm" action="process-login.php" onsubmit="return validateForm()" method="POST">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required><br><br>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required><br><br>
    <input type="submit" value="Login">
  </form>
</body>
</html>

В этом методе мы добавляем код JavaScript для проверки формы перед ее отправкой. Функция validateForm() проверяет, заполнены ли поля имени пользователя и пароля. Если какой-либо из них пуст, отображается предупреждение и отправка формы блокируется.