signup.html

<!-- signin -->
<link rel="stylesheet" href="CSS/signin.css">
<!-- !bootstrap alert -->
<!-- <div class="alert alert-success alert-dismissible fade show" ng-show="confirmAlert">
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    <strong>Success!</strong> Your order has been taken.
</div> -->
<div class="address-container">
  <a href="#/"><i class="fa-solid fa-house"></i></a>
  <div class="address">
      <a href="#/"> Home </a>/
      <a href="#!signup"> Signup </a>
  </div>
</div>
<div class="img-si">
    <img src="Image/icongrape.png" alt="logo" class="img-sign">
</div>
<form class="sign-in" name="myForm">
    <div>
        <h3>
            SIGN UP
        </h3>
    </div>
    <table id="sign-up-table">
        <tr>
            <td>
                <!-- Name Input -->
    <div class="form-outline mb-4">
        <div class="form-label"><label for="name" >Name</label></div>
        <input type="text" id="name" name="myName" ng-model="myName" required class="form-control"/><br>
        <span style="color: red;" class="error" ng-show="myForm.myName.$error.required && myForm.myName.$dirty">Name is required</span>
    </div>
            </td>
        </tr>
        <tr>
            <td>
                <!-- Email input -->
    <div class="form-outline mb-4">
        <div class="form-label"><label for="email" >Email Address</label></div>
        <input type="email" id="email" name="myEmail" ng-model="myEmail" pattern=".+@.+\.\w{2,3}" required class="form-control"/><br>
        <span style="color: red;" class="error" ng-show="myForm.myEmail.$error.required && myForm.myEmail.$dirty">Email is required</span>
        <span style="color: red;" class="error" ng-show="myForm.myEmail.$error.pattern && myForm.myEmail.$dirty">Invalid email</span>
    </div>
            </td>
        </tr>
        <tr>
            <td>
                <!-- Password input -->
    <div class="form-outline mb-4">
        <div class="form-label"><label for="password" >Password</label></div>
        <input type="password" id="password" name="myPass" ng-model="myPass" pattern="^(?=.*[a-z])(?=.*\d).{8,}$" required class="form-control"/>
        <span style="color: red;" class="error" ng-show="myForm.myPass.$error.required && myForm.myPass.$dirty">Password is required</span>
        <span  style="color: red;" class="error" ng-show="myForm.myPass.$error.pattern && myForm.myPass.$dirty">Wrong format</span>
    </div>
            </td>
        </tr>
        <tr>
            <td>
                <!-- confirm pass -->
    <div class="form-outline mb-4">
        <div class="form-label"><label for="conpassword" >Confirm Password</label></div>
        <input type="password" id="conpassword" name="mysPass" ng-model="mysPass" required class="form-control"/>
        <span style="color: red;" class="error" ng-show="myForm.mysPass.$error.required && myForm.mysPass.$dirty">Password is required</span>
    </div>
            </td>
        </tr>
        <tr>
            <td>
                <!-- tel -->
    <div class="form-outline mb-4">
        <div class="form-label"><label for="tel" >Telephone</label></div>
        <input type="tel" id="tel" required class="form-control"/>
    </div>
            </td>
        </tr>
        <tr>
            <td>
                <!-- address -->
    <div class="form-outline mb-4">
        <div class="form-label"><label for="address" >Address</label></div>
        <input type="text" id="address" class="form-control"/>
    </div>
            </td>
        </tr>
    </table>
    
    <!-- Submit button -->
        <button type="submit" ng-click="btn3()" class="btn2 btn-primary btn-block mb-4">Sign Up</button>
    <!-- 2 column grid layout for inline styling -->
    

  
</form>

<script src="/sourecode/JS/script.js"></script>