Scribd
Upload
2 views2 pages

Forms

The document provides an overview of HTML forms, including types such as login, registration, and contact forms, and explains the HTML form element used to create them. It discusses event object methods like preventDefault to manage form submission behavior and outlines various event types, particularly focusing on form events like blur and their implementation in JavaScript. Additionally, it includes a code example to demonstrate the use of preventDefault and blur events.

Uploaded by

vinaykrishna132
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views2 pages

Forms

The document provides an overview of HTML forms, including types such as login, registration, and contact forms, and explains the HTML form element used to create them. It discusses event object methods like preventDefault to manage form submission behavior and outlines various event types, particularly focusing on form events like blur and their implementation in JavaScript. Additionally, it includes a code example to demonstrate the use of preventDefault and blur events.

Uploaded by

vinaykrishna132
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Forms | Cheat Sheet

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.
HTML

1 <form></form>

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.
JAVASCRIPT

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


2
3 myFormEl.addEventListener("submit", function(event) {
4 event.preventDefault();
5 });

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.


JAVASCRIPT

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


2
3 nameEl.addEventListener("blur", function(event) {
4 console.log("blur event triggered");
5 });

Try out the

preventDefault method and blur event in the below Code Playground.

HTML CSS JAVASCRIPT

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.
5 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.j
6 <script src="https://cdn.jsdelivr.net/npm/[email protected]/d
7 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.
8 </head>
9 <body>
10 <div class="container">
11 <h1 class="form-heading">Add User</h1>
12 <form id="myForm">
13 <div class="mb-3">
14 <label for="name">Name</label>
15 <input type="text" class="form-control" id="name" />
Reset Code Run Code

Submit Feedback MARKED AS COMPLETE

You might also like