Friday, 8 September 2017

Sign-In or Login Page in HTML with validation

Everyone who is working on HTML know that it is a Hyper Text Markup language,which is used for designing the structure of any type of website.HTML  can be integrated with "CSS" and "JavaScript" for designing an attractive webpage and also remove some load from the server.In any webpage
HTML is used for draw the structure of the webpage whereas CSS is used for implementation of the design into the webpage and we can also used JavaScript for validation of that page(JavaScript also perform some logical implementation from server side,which reduce load from the server and increase webpage loading time).
While working on HTML  designing a sign in and signup page is basic part of the HTML Learning. so here in this blog, we will study "How to create a sign-in page in HTML" and also validate it by the use of JavaScript,by this method we not need to use the database for validation of our webpage.
Here is the HTML code of Sign-in webpage which include JavaScript too into it.


<HTML>
  <HEAD>
     <TITLE>Sign In</TITLE>
         <script language="javascript">
           function check(form){
               if(form.name.value=="Anantpal Rana"&& form.pass.value=="ARblog"){
                   alert("Sign In sucessfull");
                }
               else{
                   alert("wrong username or password");
                }
            }
        </script>
 </HEAD>
 <BODY bgcolor="lightgreen">
  <FORM>
    <TABLE border="2"align="center">
      <TR>
         <TD colspan="2"><center> LOGIN HERE </center></TD>
      </TR>
      <TR>
         <TD>User Name</TD>
         <TD><input type="text"name="name"/></TD>
      </TR>
      <TR>
         <TD>Password</TD>
         <TD><input type="password"name="pass"/></TD>
      </TR>
      <TR>
         <TD><input type="submit"onclick="check(this.form)"/></TD>
         <TD><input type="reset"/></TD>  
       </TR>
     </TABLE>
   </FORM>
 </BODY>
</HTML>

when we execute above code,we get the following result




when we enter the correct information(username & password) then we get the following result in browser with an alert prompt due to JavaScript and validate it as a correct info.



whereas we get the alert box into the web browser when we entered the wrong info.




we can use the link code instead of alert box to redirect the user on to the other page when he enter the correct info. By this way we can validate our page and its working without the linking of the database.
Thank you for reading my blog,if you facing any problem regarding to this then write it into the comment box i will try to resolve that.

No comments:

Post a Comment