Untitled

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Passenger Registration</title>
    <style>
      body {
        background-color: teal;
        text-align: center;
        color: white;
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
      }

      .container {
        color: black;
        font-family: Arial;
        background-color: #dcdcdc;
        border-radius: 20px;
        box-shadow: 5px 5px 5px grey;
        padding: 20px;
        width: 300px;
        margin: 0 auto;
      }

      .error-message {
        color: red;
        margin-bottom: 10px;
      }

      input[type="text"],
      input[type="date"],
      textarea {
        width: 100%;
        padding: 8px;
        margin: 5px 0;
        box-sizing: border-box;
      }

      input[type="submit"],
      input[type="reset"] {
        background-color: dodgerblue;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
      }

      input[type="submit"]:hover,
      input[type="reset"]:hover {
        background-color: #0047ab;
      }
    </style>
  </head>
  <body>
    <div class="container" id="register-container">
      <h2>Passenger Registration</h2>
      <form id="registrationForm">
        <div class="error-message" id="errorMessage"></div>
        <label for="firstName">First Name:</label><br />
        <input
          type="text"
          id="firstName"
          name="firstName"
          maxlength="50"
          required
        /><br />
        <label for="lastName">Last Name:</label><br />
        <input
          type="text"
          id="lastName"
          name="lastName"
          maxlength="50"
          required
        /><br />
        <label for="dob">DOB:</label><br />
        <input type="date" id="dob" name="dob" required /><br />
        <label for="email">EmailID:</label><br />
        <input type="text" id="email" name="email" required /><br />
        <label for="address">Address:</label><br />
        <textarea
          id="address"
          name="address"
          rows="2"
          maxlength="100"
          required
        ></textarea
        ><br />
        <label for="contactNumber">Contact Number:</label><br />
        <input
          type="text"
          id="contactNumber"
          name="contactNumber"
          maxlength="10"
          required
        /><br /><br>
        <input type="submit" value="Register" />
        <input type="reset" value="Reset" />
      </form>
    </div>
    <script src="../js/register.js"></script>
  </body>
</html>
Editor is loading...