Emailme form log in

Here is an example of an HTML form for a login page:

<form action="/login" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username"><br><br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password"><br><br>
  <input type="submit" value="Login">
</form>

This form has two input fields: username and password. The action attribute specifies that the form should be submitted to the /login URL, and the method attribute specifies that the form should be submitted using the POST method.

You can also add some additional attributes to the form to make it more secure, such as:

• autocomplete="off" to prevent the browser from autofilling the form fields
• novalidate to prevent the browser from validating the form fields
• csrf-token to prevent cross-site request forgery attacks

Here is an updated version of the form:

<form action="/login" method="post" autocomplete="off" novalidate>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username"><br><br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password"><br><br>
  <input type="hidden" name="csrf-token" value="{{ csrf_token() }}">
  <input type="submit" value="Login">
</form>

You can also add some JavaScript code to the form to make it more interactive, such as:

• Using the addEventListener method to listen for the submit event and perform some validation before submitting the form
• Using the preventDefault method to prevent the form from being submitted if the validation fails

Here is an updated version of the form with some JavaScript code:

<form action="/login" method="post" autocomplete="off" novalidate>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username"><br><br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password"><br><br>
  <input type="hidden" name="csrf-token" value="{{ csrf_token() }}">
  <input type="submit" value="Login">
  <script>
    const form = document.querySelector('form');
    form.addEventListener('submit', (e) => {
      e.preventDefault();
      const username = document.querySelector('#username').value;
      const password = document.querySelector('#password').value;
      if (username && password) {
        form.submit();
      } else {
        alert('Please fill in both fields');
      }
    });
  </script>
</form>

This code listens for the submit event on the form and performs some validation before submitting the form. If the form is valid, it submits the form using the submit method. If the form is not valid, it displays an alert message asking the user to fill in both fields.