HTML Form in JS

 

1. HTML Forms

The HTML Forms can be used to collect data from the user.

Forms are of different kinds:

• Login/Sign in Form
• Registration Form
• Contact Us Form, etc.

1.1 HTML Form Element

The HTML

form

element can be used to create HTML forms. It is a container that can contain different types of Input elements like Text Fields, Checkboxes, etc.

1

<form></form>

HTML

Note

Whenever we click a button or press

Enter

key while editing any input field in the form, the

submit

event will be triggered.

2. Event Object Methods

2.1 preventDefault

The

preventDefault()

method prevents the occurrence of default action.

Here in the form, it prevents the default behaviour of the

submit

event.

1

2

3

4

5

let myFormEl = document.getElementById("myForm");

myFormEl.addEventListener("submit", function(event) {

event.preventDefault();

});

JAVASCRIPT

3. Event Types

There are different types of events.

• Keyboard Events
• Mouse Events
• Touch Events
• Form Events, etc.

3.1 Form Events

A Form Event is an event that can occur within a form.

Some of the form events are:

• blur
• focus
• change, etc.

3.1.1 Blur Event

The

blur

event happens when an HTML element has lost focus.

1

2

3

4

5

let nameEl = document.getElementById("name");

nameEl.addEventListener("blur", function(event) {

console.log("blur event triggered");

});

JAVASCRIPT

Try out the

preventDefault

method and

blur

event in the below Code Playground.

1. HTML Select Element

The HTML

select

element is used to create a drop-down list.

1

<select></select>

HTML

1.1 HTML Option Element

The HTML

option

element is used to create the menu option of a drop-down list.

The text content of the HTML

option

element is used as a label.

1

2

3

<select>

<option>Active</option>

</select>

HTML

1.1.1 The value Attribute

Every HTML

option

element should contain the HTML

value

attribute.

1

<option value="Active">Active</option>

HTML

2. HTML Input Element

2.1 Radio

The HTML

input

radio element is used to select one option among a list of given options.

1

2

<input type="radio" id="genderMale" value="Male" />

<input type="radio" id="genderFemale" value="Female" />

HTML

2.1.1 HTML name attribute

The HTML

name

Attribute specifies the name for an HTML Element.

1

<input type="radio" value="Male" name="gender" />

HTML

2.1.2 Radio Group

All the radio buttons with same name collectively called as a radio group.

We can select only one radio button within a radio group.

1

2

<input type="radio" value="Male" name="gender" />

<input type="radio" value="Female" name="gender" />

HTML

3. Boolean Attributes

For the HTML Boolean attributes, we only specify the name of the HTML attribute.

The presence of a boolean attribute represents the

true

value, and the absence represents the

false

value.

3.1 HTML selected attribute

The

selected

attribute specifies that an option should be pre-selected when the page loads.

1

<option value="Active" selected>Active</option>

HTML

3.2 HTML checked attribute

The

checked

attribute specifies that an input element should be pre-selected (checked) when the page loads.

1

<input type="radio" id="genderMale" value="Male" name="gender" checked />

HTML

Try out the HTML

select

element,

input

radio element and the boolean attributes in the below Code Playground.