JavaScript Form

In this tutorial, we will learn, discuss, and understand the JavaScript form. We will also see the implementation of the JavaScript form for different purposes.

Here, we will learn the method to access the form, getting elements as the JavaScript form's value, and submitting the form.

Introduction to Forms

Forms are the basics of HTML. We use HTML form element in order to create the JavaScript form. For creating a form, we can use the following sample code:

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.

Other than action and methods, there are the following useful methods also which are provided by the HTML Form Element

• submit (): The method is used to submit the form.
• reset (): The method is used to reset the form values.

Referencing forms

Now, we have created the form element using HTML, but we also need to make its connectivity to JavaScript. For this, we use the getElementById () method that references the html form element to the JavaScript code.

The syntax of using the getElementById() method is as follows:

Using the Id, we can make the reference.

Submitting the form

Next, we need to submit the form by submitting its value, for which we use the onSubmit() method. Generally, to submit, we use a submit button that submits the value entered in the form.

The syntax of the submit() method is as follows:

When we submit the form, the action is taken just before the request is sent to the server. It allows us to add an event listener that enables us to place various validations on the form. Finally, the form gets ready with a combination of HTML and JavaScript code.

Let's collect and use all these to create a Login form and SignUp form and use both.

Login Form

The output of the above code on clicking on Login button is shown below:

SignUp Form

The output of the above code is shown below:

In this way, we can create forms in JavaScript with proper validations.