<!DOCTYPE html>
<html lang="en">
<head>
  <title>OPTIMISM LABORATORY CENTRE</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <script src="js/bootstrap.bundle.min.js"></script>
</head>
<body>

<nav class="navbar navbar-expand-xxl bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
       <img src="assets/optimismlogo.png" alt="OPTIMISM LOGO" style="width:100px; height:80px;" class="rounded-pill">
    </a>
    <span class="navbar-text text-white"><small>OPTIMISM LABORATORY RECORD MANAGEMENT SYSTEM</small></span>

      <ul class="navbar-nav">
     
      <li class="nav-item">
        <a class="nav-link" href="#">SIGN UP</a>
      </li>
    </ul>
  </div>
</nav>

 

<!--/////////////-->
 
 <div class="container mt-3">

 <div  class="mt-4 p-5 bg-white text-dark rounded" style="margin-top:50px;">
  <h6>EMPLOYEE REGISTRATION FORM:</h6> 
    
  <form action="https://www.w3schools.com/action_page.php" class="was-validated">
    <div class="row">
    <div class="col">
    <div class="form-floating mb-3 mt-3"> 
      <input type="text" class="form-control" id="fname" style="height:20px;" placeholder="First name" name="fname" required>
       <label for="fname">First Name:</label>
      <div class="valid-feedback">Valid.</div>
      <div class="invalid-feedback">First name required.</div>
    </div>
</div>
 <div class="col">
       <div class="form-floating mb-3 mt-3"> 
      <input type="text" class="form-control" id="mname" placeholder="Middle name" name="mname" required>
       <label for="mname">First Name:</label>
      <div class="valid-feedback">Valid.</div>
      <div class="invalid-feedback">Middle name required.</div>
    </div>
 </div>
 

    <div class="col">
    <div class="form-floating mb-3 mt-3"> 
      <input type="text" class="form-control" id="lname" placeholder="Last name" name="lname" required>
       <label for="lname">Last Name:</label>
      <div class="valid-feedback">Valid.</div>
      <div class="invalid-feedback">Last name required.</div>
    </div>
</div>
</div>
<div class="row">
<div class="col">
   <div class="form-floating mb-3 mt-3"> 
      <input type="email" class="form-control" id="email" placeholder="Email address" name="email" required>
       <label for="fname">Email:</label>
      <div class="valid-feedback">Valid.</div>
      <div class="invalid-feedback">Email required.</div>
   </div>
    </div>
 
   <div class="col">

   <div class="form-floating mb-3 mt-3"> 
      <input type="number" class="form-control" id="Phone" placeholder="Phone number" name="Phone" required>
       <label for="Phone">Phone number:</label>
      <div class="valid-feedback">Valid.</div>
      <div class="invalid-feedback">Phone number required.</div>
    </div>
  </div>
 
  <div class="col">
       <div class="form-floating mb-3 mt-3"> 
      <input type="text" class="form-control" id="address" placeholder="Address" name="address" required>
       <label for="address">Address:</label>
      <div class="valid-feedback">Valid.</div>
      <div class="invalid-feedback">Address required.</div>
    </div>
 </div>
</div>
<div class="row">
    <div class="col">
       <div class="form-floating mb-3 mt-3"> 
      <input type="text" class="form-control" id="citizen" placeholder="Citizenship" name="citizen" required>
       <label for="citizen">Citizenship:</label>
      <div class="valid-feedback">Valid.</div>
      <div class="invalid-feedback">Citizen required.</div>
    </div> 
  </div>
    <div class="col">
     <div class="form-floating mb-3 mt-3"> 
      
     <select class="form-select" id="cat" name="cat">
      <option value="Manager">Manager</option>
      <option value="Receiption and cashier">Receiption and Cashier</option>
      <option value="Doctor">Doctor</option>
      <option value="Pharmacy">Pharmacy</option>
      <option value="Laboratory">4</option>
    </select> 
     <div class="valid-feedback">Valid.</div>
      <div class="invalid-feedback">Date of birth required.</div>
     </div>
 </div>
 
  <div class="col">
   <div class="form-floating mb-3 mt-3"> 
      <input type="date" class="form-control" id="dob" placeholder="Date of birth" name="dob" required>
       <label for="dob">Date of birth:</label>
      <div class="valid-feedback">Valid.</div>
      <div class="invalid-feedback">Date of birth required.</div>
    </div>
  </div>
</div>
<div class="row">
    <div class="col">
    <div class="form-floating mb-3 mt-3"> 
      <select class="form-select" id="gender" name="gender">
      <option value="Male">Male</option>
      <option value="Female">Female</option> 
    </select> 
     <div class="valid-feedback">Valid.</div>
    </div>
      </div>
  
  <div class="col">
   <div class="form-floating mb-3 mt-3"> 
      <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd" required>
       <label for="pwd">Password</label>
      <div class="valid-feedback">Valid.</div>
      <div class="invalid-feedback">Password required.</div>
    </div>
  </div>
    <div class="col">
    <div class="form-floating mb-3 mt-3"> 
      <input type="password" class="form-control" id="cpwd" placeholder="Confirm password" name="cpwd" required>
       <label for="cpwd">Confirm password</label>
      <div class="valid-feedback">Valid.</div>
      <div class="invalid-feedback">Confirm password.</div>
    </div>
      </div>
</div>
<div class="row">
  <div class="col-xl">
</div>
  <div class="col-xl">
</div>
<div class="col">

  <button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>

 </div>
<!--///////////////--->
</body>
<div class="footer" style="width:100%;  position:absolute; bottom:0; left:0; z-index:0;">
  
<nav class="navbar navbar-expand-sm bg-secondary">
  <div class="container-fluid justify-content-center">
     
    <span class="navbar-text text-white"><small>Sponsered by Optimism International Company Limited. Developed by Hassan Jeremiah-(+255 758912113/689749960)<small></span>

     
  </div>
</nav>
</div>
<!-- Mirrored from www.w3schools.com/bootstrap5/tryit.asp?filename=trybs_navbar_brand&stacked=h by HTTrack Website Copier/3.x [XR&CO'2014], Mon, 05 Sep 2022 15:39:45 GMT -->
</html>
