I set my grid-view class display to grid with columns of 1fr 1fr.SignUpLogIn.jsp code:
<div class="grid-view"><!-- Image Section --><div class="img-section"><img src="img/imgGS.jpg" alt="GS Image"/></div><!-- End Image Section --><!-- Form Section --><form method="get" action=""><!-- Top Section --><div class="header"><header><h1> GAB SECURITY</h1></header></div><!-- End Top Section --><!-- Middle Section --><div class="middle-section"><!-- First Row --><div class="first-row"><h1> Create an account</h1><p> Enter your credentials to create an account</p></div><!-- End First Row --><!-- Second Row --><div class="second-row"><label> Email Address</label><input type="email" id="email-address" name="eAddress"><div class="name-section"><div class="first-name-div"><label> First Name</label><input type="text" id="first-name" name="fName"></div><div class="last-name-div"><label> Last Name</label><input type="text" id="last-name" name="lName"></div></div><div class="pass-section"><label> Password</label><input type="password" id="user-password" name="password"><img src="img/eye-close-icon.png" id="eye-icon" onclick="showHide();"/></div></div><!-- End Second Row --><!-- Third Row --><input type="button" id="create-acc-btn" value="Sign Up"><!-- Third Row --></div><!-- End Middle Section --><!-- Bottom Section --><div class="footer"><footer> Already have an account? <span><a href="#">Sign In</a></span> </footer></div><!-- End Bottom Section --></form><!-- End Form Section --></div>This is the output:
What I want to achieve is when user click the Sign In link below, I want to change the form from Sign Up Form to Sign In Form in the same file (SignInLogin.jsp) since this forms will have two different action/Servlet.
Thank you.