JavaScript Form

In this guide, we will explore, examine, and comprehend the concept of the JavaScript form. Additionally, we will investigate the application of the JavaScript form for various objectives.

In this section, we will explore the procedure for accessing the form, retrieving elements as the values of the JavaScript form, and submitting the form.

Introduction to Forms

Forms constitute the fundamental building blocks of HTML. To develop a JavaScript form, we utilize the HTML form element. Below is an example code snippet that demonstrates how to create a form:

Example


<html>

<head>

<title> Login Form</title>

</head>

<body>

<h3> LOGIN </h3>

<form ="Login_form" onsubmit="submit_form()">

<h4> USERNAME</h4>

<input type="text" placeholder="Enter your email id"/>

<h4> PASSWORD</h4>

<input type="password" placeholder="Enter your password"/></br></br>

<input type="submit" value="Login"/>

<input type="button" value="SignUp" onClick="create()"/>

</form>

</html>

In the code:

✅ Form name tag is used to define the name of the form. The name of the form here is "Login_form". This name will be referenced in the JavaScript form.
✅ The action tag defines the action, and the browser will take to tackle the form when it is submitted. Here, we have taken no action.
✅ The method to take action can be either post or get , which is used when the form is to be submitted to the server. Both types of methods have their own properties and rules.
✅ The input type tag defines the type of inputs we want to create in our form. Here, we have used input type as 'text', which means we will input values as text in the textbox.
✅ Net, we have taken input type as 'password' and the input value will be password.
✅ Next, we have taken input type as 'button' where on clicking, we get the value of the form and get displayed.

In addition to actions and methods, the HTML Form Element also includes several other beneficial methods:

✅ submit : This method is utilized to submit the form.
✅ reset : This method serves the purpose of resetting the form values.

Referencing forms

At this point, we have successfully constructed the form element utilizing HTML. However, we must also establish its connection to JavaScript. To achieve this, we employ the getElementById function, which links the HTML form element to the JavaScript code.

The structure for employing the getElementById method is outlined below:

Example


let form = document.getElementById('subscribe');

Using the Id, we can make the reference.

Submitting the form

Subsequently, it is essential to send the form by passing its value, and for this purpose, we utilize the onSubmit method. Typically, a submit button is employed to transmit the data inputted into the form.

The syntax of the submit method is as follows:

Example


<input type="submit" value="Subscribe">

Upon submitting the form, the action occurs immediately prior to the transmission of the request to the server. This provides an opportunity to attach an event listener, which facilitates the implementation of multiple validations on the form. Ultimately, the form is prepared utilizing a blend of HTML and JavaScript code.

Let's gather all of these elements to design a Login form and a SignUp form, and implement both functionalities.

Login Form

Example


<html>

<head>

<title> Login Form</title>

</head>

<body>

<h3> LOGIN </h3>

<form ="Login_form" onsubmit="submit_form()">

<h4> USERNAME</h4>

<input type="text" placeholder="Enter your email id"/>

<h4> PASSWORD</h4>

<input type="password" placeholder="Enter your password"/></br></br>

<input type="submit" value="Login"/>

<input type="button" value="SignUp" onClick="create()"/>

</form>

<script type="text/javascript">

function submit_form(){

alert("Login successfully");

}

function create(){

window.location="signup.html";

}

</script>

</body>

</html>

The result produced by the aforementioned code upon clicking the Login button is displayed below:

SignUp Form

Example


<html>

<head>

<title> SignUp Page</title>

</head>

<body align="center" >

<h1> CREATE YOUR ACCOUNT</h1>

<table cellspacing="2" align="center" cellpadding="8" border="0">

<tr><td> Name</td> 

<td><input type="text" placeholder="Enter your name" id="n1"></td></tr>

<tr><td>Email </td>

<td><input type="text" placeholder="Enter your email id" id="e1"></td></tr>

<tr><td> Set Password</td>

<td><input type="password" placeholder="Set a password" id="p1"></td></tr>

<tr><td>Confirm Password</td>

<td><input type="password" placeholder="Confirm your password" id="p2"></td></tr>

<tr><td>

<input type="submit" value="Create" onClick="create_account()"/>

</table>

<script type="text/javascript">

function create_account(){

var n=document.getElementById("n1").value;

var e=document.getElementById("e1").value;

var p=document.getElementById("p1").value;

var cp=document.getElementById("p2").value;

//Code for password validation

		var letters = /^[A-Za-z]+$/;

		var email_val = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

//other validations required code

if(n==''||e==''||p==''||cp==''){

alert("Enter each details correctly");

}

else if(!letters.test(n))

		{

			alert('Name is incorrect must contain alphabets only');

		}

else if (!email_val.test(e))

		{

			alert('Invalid email format please enter valid email id');

		}

else if(p!=cp)

{

alert("Passwords not matching");

}

else if(document.getElementById("p1").value.length > 12)

{

alert("Password maximum length is 12");

}

else if(document.getElementById("p1").value.length < 6)

{

alert("Password minimum length is 6");

}

else{

alert("Your account has been created successfully... Redirecting to logic-practice.com");

window.location="https://logic-practice.com/";

}

}

</script>

</body>

</html>

The output of the above code is shown below:

In this manner, we can develop forms in JavaScript that include appropriate validation mechanisms.

Introduction to Forms

Referencing forms

Submitting the form

Login Form

SignUp Form

Input Required