Maharashtra's Most Trusted

with more than 0 members

Chapter 3 - Form & Event Handling

For MSBTE Diploma CO / IT / AIML Branch

Forms in HTML -: 

In HTML, a form is a section that allows users to input data and submit it to a server for processing. Forms are essential for interactive web applications, such as login pages, search engines, and online shopping. The main element to create a form is the <form> tag, which contains various input controls like text fields, checkboxes, radio buttons, and submit buttons.

Basic Structure of a Form

 

  • action: Specifies the URL where the form data will be sent when the form is submitted.
  • method: Defines how the data is sent to the server. Common values are:
    • GET: Sends data via the URL, visible to users.
    • POST: Sends data in the body of the request, often used for sensitive data.

Common Form Elements

Text Input (<input type="text">)

 

Password Input (<input type="password">)

Radio Buttons (<input type="radio">)

Checkbox (<input type="checkbox">)

Select Dropdown (<select>)

Textarea (<textarea>)

Submit Button (<input type="submit">)

Example of a Complete Form

Event Handling in Java Script -: 

When an event occurs, an event object is created automatically and passed to the event handler function. This object contains useful information about the event, such as the element that triggered the event, mouse coordinates, key presses, etc.

Form events in JavaScript are events triggered by actions on form elements like input fields, select boxes, checkboxes, and the form itself. These events allow you to capture and respond to user interactions within a form, such as when a user submits the form, changes a field, or focuses on an input element.

Mouse Event 

Mouse events in JavaScript are triggered when a user interacts with a web page using a mouse or similar input device. These events are particularly useful in forms when you want to enhance user interactions such as providing feedback when hovering over buttons or inputs, or responding to clicks or double clicks on form elements.

Here are some common mouse events that are useful in forms:

Common Mouse Events

  1. click: Fired when an element is clicked.
  2. dblclick: Fired when an element is double-clicked.
  3. mousedown: Fired when a mouse button is pressed down on an element.
  4. mouseup: Fired when the mouse button is released.
  5. mouseover: Fired when the mouse pointer is moved onto an element.
  6. mouseout: Fired when the mouse pointer is moved away from an element.
  7. mousemove: Fired continuously as the mouse pointer moves over an element.

Mouse Events in the Context of Forms

Let’s look at how to handle mouse events within a form. These can enhance user interaction with feedback on form elements such as buttons, checkboxes, or input fields.

1. click Event on a Form Button

The click event is the most commonly used mouse event in forms, especially for submit buttons or any button-like elements.

Example: Submit Button with Click Event

 

2. mouseover and mouseout Events on Form Elements

The mouseover and mouseout events are used to detect when the mouse enters and leaves an element. These are useful for providing visual feedback, like changing styles when a user hovers over a form element.

Example: Changing Button Color on Hover

 

3. mousedown and mouseup Events on Buttons

The mousedown event fires when the mouse button is pressed down, and mouseup fires when the mouse button is released. These events can be used to provide feedback when a button is clicked, even before the click event occurs.

Example: Button Press Feedback

 

4. mousemove Event for Real-Time Feedback

The mousemove event fires continuously as the mouse moves over an element. This can be used to create real-time interactive feedback in forms, such as dynamically tracking mouse position or displaying real-time hover effects.

Example: Tracking Mouse Movement Over a Form

 

5. dblclick Event on Form Elements

The dblclick event is fired when a user double-clicks on an element. This is less commonly used in forms but can be useful in special cases, such as resetting form fields or triggering secondary actions.

Example: Reset Form on Double Click

 

Mouse Event 

Key events in JavaScript are triggered when the user interacts with the keyboard. These events are especially useful in forms to capture user input, validate fields in real-time, or trigger actions like submitting the form when the “Enter” key is pressed. There are three main key events:
  1. keydown: Triggered when a key is pressed down.
  2. keyup: Triggered when a key is released.
  3. keypress: Triggered when a key that produces a character value is pressed. However, this event is now considered deprecated, and it’s recommended to use keydown or keyup instead.

Example: Key Event Handling in a Form

Let’s explore how key events work in a form using an example where we:

  1. Prevent non-numeric input in a field.
  2. Submit the form when the “Enter” key is pressed.
  3. Display the key being pressed in real-time.

Example Code:

<!DOCTYPE html>
<html lang=”en”>
<head>
  <meta charset=”UTF-8″>
  <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
  <title>Keyup and Keydown Example</title>
  <style>
    #output {
      margin-top: 20px;
      font-size: 18px;
      font-weight: bold;
    }
    #inputField {
      padding: 10px;
      width: 200px;
      font-size: 16px;
    }
  </style>
</head>
<body>
 
  <form id=”myForm”>
    <label for=”inputField”>Type something:</label>
    <input type=”text” id=”inputField” name=”inputField”>
    <div id=”output”>Key Pressed: None</div>
  </form>
 
  <script>
    const inputField = document.getElementById(“inputField”);
    const output = document.getElementById(“output”);
 
    // Keydown event (changes background color)
    inputField.addEventListener(“keydown”, function(event) {
      output.textContent = “Key Down: ” + event.key;  // Display the key pressed
      inputField.style.backgroundColor = “lightblue”;  // Change background color on key down
    });
 
    // Keyup event (resets background color)
    inputField.addEventListener(“keyup”, function(event) {
      output.textContent = “Key Up: ” + event.key;  // Display the key released
      inputField.style.backgroundColor = “”;  // Reset background color on key up
    });
  </script>
 
</body>
</html>
 

 

end of chapter 3 -------->

Chapter 3 Assignment - Form & Event Handling
Chapter 3 Assignment - Form & Event Handling

Explore Other Chapters

Chapter 1 Notes - Basics of Java Script Programming
Chapter 2 Notes - Array, Function & String
Chapter 3 Notes - Form & Event Handling
Chapter 4 Notes - Cookies & Browser Data
Chapter 5 Notes - Regular Expression, Rollover & Frames
Chapter 6 Notes - Menus, Navigation & Webpage Protection