3.

Forms and Event Handling

3.1 Building blocks of a Form, properties and methods of form, button, text, text area, checkbox, radio
button, select element.

3.2 Form events- mouse event, key events.

3.3 Form objects and elements.

3.4 Changing attribute value dynamically.

3.5 Changing option list dynamically

3.6 Evaluating checkbox selection

3.7 Changing a label dynamically

3.8 Manipulating form elements

3.9 Intrinsic JavaScript functions, disabling elements, read only elements.

❖ Forms in java script

1. Form is an html element which takes input from the user using various controls like
Textbox, Textarea ,Radio Buttons ,Checkboxes ,action list etc

2. The inputted data can be validated on client browser using javascript (e.g., required
fields are filled, email addresses are properly formatted, passwords are strong, etc.).
Performing validation on the client side provides immediate feedback to users, reducing
the chances of invalid data being sent to the server and enhancing user experience

3. When the user clicks the submit button, JavaScript will perform the validation checks. If
the data is valid, the form is then submitted to the server for further processing (e.g.,
saving the data to a database, processing payments).

4. HTML forms are mainly used for development of dynamic web pages

5. Form element is used to create html forms

6. There may be other elements such as input, text area ,select and others inside the form
element

7. Syntax:

<form>
//other form Element
<form>
❖ Attributes of forms

1. Name : This is used to identify the perticular form on the webpage

2. Action : This specify the URL ( address ) where to submit the form For example:
action="submit_form.php"

3. Method : Determines (detect or explore )the HTTP method used to send form data when
submitting the form data to the server

i)GET : In GET method the form data is appended to the URL as a query string ,
this is default method. (suitable for non-sensitive data).

ii)Post : In post method the form data is not appended to the URL or Sends form
data in the body of the request (suitable for sensitive data).

Note : POST Request: When you fill out a form to buy a toy and click “Submit,”
the form data (like your name and toy request) is sent in the body of the request
to the server. The URL you see might look something like
www.example.com/buy—the details of what you’re buying are in the request
body, not the URL.

In the computer world, the request body is the part of an HTTP request that
contains the actual data being sent to the server.

4. Target : Determines where to display the response after submitting the

form. Values include:bv
• _self: Opens in the same frame (default).
• _blank: Opens in a new window or tab.
• _parent: Opens in the parent frame.
• _top: Opens in the full window

1.
❖ Button Element using input Element

1. The <button> element in HTML is used to create interactive buttons on a webpage

Attributes of <input>

1. Type
The type attribute of the <input> element determines (DETECTS) the type of control it
represents.

For buttons, common values include:

- button: A generic button that can do different things when clicked.

- submit: A button that sends the form’s information.
- reset: A button that clears the form and returns it to its original state.

Eg.,

<input type="button" value="Click Me!" onclick="alert('Button clicked!')">

<input type="submit" value="Submit Form">

<input type="reset" value="Reset Form">

Common Attributes for <input> Buttons

type: Specifies the type of button.

Values: "button", "submit", "reset"

Example: <input type="button" value="Click Me" />

value: Defines the text displayed on the button.

Example: <input type="submit" value="Submit" />

name: (Optional) Specifies a name for the button, which can be useful when handling form data.
Example: <input type="button" name="myButton" value="Click Me" />

1.Text Element :-

i] the input element : -

In HTML, the <input> element is used to create interactive controls for web-based forms to
accept user input. One common type of <input> element is the text input, which allows users
to enter a single line of text.

1. type
• Description: Specifies that the input field is a single-line text input.
• Value: "text"
• Example: <input type="text" />

2. name
• Description: Defines the name of the input element. This name is used when sending
form data and can be accessed via JavaScript.
• Example: <input type="text" name="username" />

3. value
• Description: Sets the initial value of the text input field. This value is displayed in the
input field when the page loads.
• Example: <input type="text" value="Default Text" />

4. Maxlength
• Description: Specifies the maximum number of characters that can be entered into the
input field.
• Example: <input type="text" maxlength="20" />

5. size
• Description: Defines the width of the input field in characters. This is a visual width, not a
limit on the number of characters that can be entered.
• Example: <input type="text" size="30" />

2.TextArea

The <textarea> element in HTML is used to create a multi-line text input field, allowing users to
enter larger amounts of text. It supports various attributes like rows, cols, placeholder,
and maxlength to customize its appearance and behavior. This element is commonly used for
comments, feedback, and other text input needs in forms
Key Attributes of <textarea>

1. cols:

o Specifies the visible width of the text area in characters.

o Example: <textarea cols="50"></textarea>

2. rows:

o Specifies the visible number of lines in the text area.

o Example: <textarea rows="4"></textarea>

3. name:

o Defines the name of the textarea, which is used to reference the form data
after submission.

o Example: <textarea name="comments"></textarea>

4. placeholder:

o Provides a short hint that describes the expected value of the textarea.
o Example: <textarea placeholder="Enter your comments here..."></textarea>

5. maxlength:
o Specifies the maximum number of characters allowed in the textarea.
o Example: <textarea maxlength="200"></textarea>

6. wrap:
o Specifies how the text in the textarea is wrapped when submitted in a form.
o Values: soft (default, no wrapping), hard (wraps text),off:- input text is not
wrapped
o Example: <textarea wrap="hard"></textarea>
3. Checkbox Element (<input type="checkbox">):

A checkbox is an input element in HTML that allows the user to select one or more options from a set. It is
often used in forms when multiple choices are available.

Key Attributes of the Checkbox:

1. type: it creates checkbox in the form .

• Example: <input type="checkbox" />

2. name: Defines a name for the checkbox element, which is used when submitting form data.

• Example: <input type="checkbox" name="agreeToTerms" />

3. value: Sets the value that will be sent to the server when the checkbox is checked/selected.
Each checkbox can have its own value.

• Example: <input type="checkbox" value="Option1" />

4. checked: This attribute specifies that the checkbox should be checked by default when the
page loads.

• Example: <input type="checkbox" checked />

5. id: Used to uniquely identify the checkbox. Often combined with the <label> element to
enhance usability by linking a label to the checkbox.
6. Eg :
<form>
<label for="vehicle1"> I have a bike</label>
<input type="checkbox" id="vehicle1" name="vehicle" value="Bike"><br>

<label for="vehicle2"> I have a car</label>

<input type="checkbox" id="vehicle2" name="vehicle" value="Car"><br>

<label for="vehicle3"> I have a boat</label>

<input type="checkbox" id="vehicle3" name="vehicle" value="Boat"><br>
 <input type="submit" value="Submit">
</form>
7. Output:

4.Radio Button Element (<input type="radio">):

Radio buttons are used when you want to allow a user to select one option from a group of choices,

Using radio button user can select only one option

Key Attributes of Radio Buttons:

1. type: Specifies the input type as radio, indicating that this is a radio button.

• Example: <input type="radio" />

2. name: All radio buttons that belong to the same group must have the same name. This groups them
together, ensuring that only one button in that group can be selected at a time.

• Example: <input type="radio" name="gender" value="male" />

3. Value: Sets the value that will be sent to the server when the radio button is checked/selected.

• Example: <input type="radio" name="gender" value="female" />

4. checked: Specifies that a radio button should be selected by default when the page loads.

• Example: <input type="radio" name="gender" value="male" checked />

5. id: Used to uniquely identify a radio button. This is often used with the <label> element to make the
radio button more accessible.

5.Attributes of the <select> Element:

- The <select> element in HTML is used to create a drop-down list or a list box where the user
can select one or more options.
- It is commonly used in forms to gather user input.

i. name Attribute:
• Purpose: The name attribute is used to identify the <select> element when the form is
submitted. This attribute ensures that the selected option(s) are sent to the server with a key-
value pair where the key is the value of the name attribute.

• Importance in Forms: Without the name attribute, the selected data from the dropdown will
not be submitted as part of the form data.

• EXAMPLE-
<select name="fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="grapes">Grapes</option>
</select>

• <option value="apple">Apple</option>:
o Key: "apple"
o Value: "Apple"

ii. size Attribute:

• Purpose: The size attribute specifies how many options are visible at a time in the list box. By
default, only one option is visible at a time, but using the size attribute can display multiple
options at once.
• Usage: if you have a <select> element with 10 options and you set the size attribute to 5, only 5
options will be visible at a time. The remaining 5 options will be accessible by scrolling through
the list.
• Example :
<select size="5">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="grapes">Grapes</option>
<option value="orange">Orange</option>
<option value="mango">Mango</option>
<option value="pineapple">Pineapple</option>
<option value="strawberry">Strawberry</option>
<option value="blueberry">Blueberry</option>
 <option value="kiwi">Kiwi</option>
<option value="watermelon">Watermelon</option>
</select>

iii. multiple Attribute

• Purpose: The multiple attribute allows users to select more than one option at a time. When
present, it turns the dropdown into a list box that allows multi-selection.
• User Experience:

• Windows: The user can select multiple options by holding the Ctrl key.

• Mac: The user can select multiple options by holding the Cmd key.

• To select a range of options, the Shift key is used.

• Example
<select name="languages" multiple>
<option value="python">Python</option>
<option value="javascript">JavaScript</option>
<option value="java">Java</option>
<option value="csharp">C#</option>
</select>
o Explanation: Here, the user can select multiple programming languages from the list by
holding Ctrl/Cmd or Shift.

iv. Attributes of <option>:

1. value Attribute:

• Purpose: Specifies the value that will be sent to the server when the form is submitted. If the
value attribute is not set, the text inside the <option> tag will be sent.

• Example:

<select name="fruits">

<option value="apple">Apple</option>

<option value="banana">Banana</option>

<option value="grapes">Grapes</option>

</select>

• Explanation: In this case, if the user selects "Apple," the form will send apple as the value to the
server, not the displayed text "Apple."

2. selected Attribute:

• Purpose: Pre-selects an option when the page loads. The option with the selected attribute will
be the default option when the form is displayed.
• Usage: Useful for indicating the default or most common choice.
 • Example :
<select name="cars">
<option value="bmw">BMW</option>
<option value="audi" selected>Audi</option>
<option value="mercedes">Mercedes</option>
</select>
• Explanation: When the page loads, "Audi" will be the selected option by default.

Complete code

<form action="/submit" method="POST">

<label for="languages">Choose your favorite programming languages:</label><br>

<select name="languages" size="4" multiple>

<option value="python">Python</option>

<option value="javascript">JavaScript</option>

<option value="java">Java</option>

<option value="csharp">C#</option>

</select>

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

</form>

• Methods of form

• Onsubmit: same for onreset just change onsubmit method

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>onsubmuit method in java script</title>
<script>
function sub()
{
alert("form is submitted");
}
</script>

</head>
<body>
<form onsubmit="sub()">
Name : <input type="text" placeholder="type here" name="himanshu"
value="jadhav">
<br><br>
<input type="submit" name =" submit" value="submit">
</form>
</body>
</html>

• Onreset :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ONRESET</title>
<script>
function clean()
{
alert("data reset succesfully");
}
</script>
</head>
<body>
<form onreset="clean()">
Name :<input type="text" name="t1">
<input type="reset" name="himanshu" value="reset">

</form>
</body>
</html>
Events of form

i) Onchange
ii) Onselect
iii) Onblur
iv) Onfocous

1. onchange Event
Definition :

The onchange event occurs when the value of an input field changes and loses focus. It is commonly
used with <input>, <select>, and <textarea> elements. This event is triggered when the user makes a
change to the input and then either clicks away or presses the "Tab" key to leave the field.

Usage:

• The onchange event is used to perform an action or function when the user selects an option from
a dropdown or changes the value in a text input field.
• This event ensures that changes are detected and handled after the user has finished interacting
with the input element.

Example :

<DOCTYPE html>

<html>

<body>

<form>

<label for="username">Enter your name:</label><br>

<input type="text" id="username" onchange="alert('Value changed!')">

</form>

</body>

</html>

Explanation:
• In this example, the alert message will appear only after the user changes the value in the text field
and moves the cursor away (on loss of focus).

• Real-World Use: Validating form fields like email or phone number after the user makes changes.
 2. onselect Event

Definition:
The onselect event occurs when the user selects some text in an input field (either <input> or
<textarea>). This event can be used to detect when text within a text box is highlighted by the user.

Usage:
• This event is helpful when you need to provide some feedback or action when a user
selects text. For example, you might want to copy the selected text or change its style.

<!DOCTYPE html>

<html>

<body>

<textarea onselect="alert('Text selected!')">Select some text in this textarea.</textarea>

</body>

</html>

Explanation:
• When the user highlights or selects any part of the text inside the <textarea>, the alert box is
triggered.

• Real-World Use: Used in cases where selected text needs to be copied or highlighted for
further processing.

3. Onblur Event
Definition:
The onblur event occurs when an element loses focus. This is commonly used in form
validation to check the value of a field when the user moves away from it (for instance, tabbing
to the next field or clicking outside the element).
Usage:
• Useful in form validation, where you might want to check the correctness of an input after
the user finishes typing and moves away from the input field.
 Example
<html>

<head>

<title>onblur method in javascript</title>

<script>

function onblurex()

var element = document.getElementById("l");

if(element.value=="")

alert("enter the value");

</script>

</head>

<body>

<form>

<label for="l">Enter the age:</label>

<input type = "text" id="l" placeholder="enter the age" name="t1" onblur="onblurex()">

</form>

</body>

</html>

Output :
Onfocous :

Defination :

“The onfocus event happens when you click on or tab into an input field. It’s used to highlight the field
or show extra information.”

Usage:

• Form fields: Often used with form inputs such as <input>, <textarea>, and <select> elements.

• User experience: Can be used to guide users by providing hints or altering the UI (like changing
the background color )

Example :

<html>

<head>

<title>foucout event</title>

<script>

function funex()

document.getElementById("ex").style.backgroundColor="cyan";

</script>

</head>

<body>

<form>

<label for="ex">enter the namme</label>

<input type="text" name="himanshu" id="ex" placeholder="enter the name" onfocus="funex()">

</form>

</body>

</html>
Ouput :

Note : enter the name vali field

update ahe

Summary of every form element :

Mouse events and key events
Form events allows user to interact with the wepages form element like (button , textfield),

This interaction are generally done using either mouse or keyboard .

Mouse Event :
Mouse events are triggered when a user interacts with form elements using the mouse (clicking,
hovering, etc.).

1. Onclick
• When it happens : Fired when an elements is clicked .
• Common Use : used with checkbox , buttons , or any clickable elements.
• Example :
<form>
<label for="ex">enter the button</label>
<input type="button" name="himanshu" id="ex" onclick="alert('button click')" value="click me">
</form>
• Output :

• Explanation: When the user clicks the button, the alert box is shown.

2. Ondblclick:
•When It Happens: Fired when an element is double-clicked.
•Common Use: Often used for special actions, like opening an element in a new tab or editing
text.
• Example :
<label for="ex">enter the button</label>
<input type="button" name="himanshu" id="ex" ondblclick="alert('button
click')" value="click me">
• Output : same as above
• Explanation: When the user double-clicks the button, a message appears.
3. Onmouseup :
• When it happens : fired when the mouse button is released.
• Common use : used to detect when a click has been completed
• Examples : same as above just use this keyword
4. Onmousedown :

• When it happens : Fired when the mouse button is pressed down on an element.
• Common Use: Used to detect when a user starts clicking but hasn't released the click yet.
• Example : same example as above use the given keyword
• Explanation: When the user presses the mouse button down on the button, the event is triggered.
Common example :
<html>
<head>
<title>all mouse events</title>
</head>

<body>
<button onclick="alert('onclick')">onclick ahe me</button>
<br /><br />

<button ondblclick="alert('double click')">me double click ahe</button>

<br /><br />

<button onmousedown="alert('mouse down')">me mouse down ahe</button>

<br /><br />

<button onmouseup="alert('mouseup')">me mouse up ahe</button>

<br /><br />

<label for="sd"><b>note as same bki sobat pan possible ahe using input </b></label>
<input type="button" id="sd" value="me double click ahe" name="himanshu"
ondblclick="alert('double click')" />
</body>

</html>
output : bakinchyansathi pan asa op yeil code pramane
5. onmouseover Event
• When It Happens: The onmouseover event occurs when the user moves the mouse pointer onto
an element.
• Usage: This event is often used to change the appearance of an element (like a button) when the
user hovers over it.

6. onmouseout Event
When It Happens: The onmouseout event occurs when the mouse pointer moves away from an
element.
Usage: This event is used to:
• Undo changes made by the onmouseover event.
• Hide elements when the mouse moves away.

Common example of both events

<html>

<head>

<title>onmouseover and onmouseout event </title>

<script>

function over() {

document.frm1.b1.value = "mouseover";

function out() {

document.frm1.b1.value = "mouseout";

</script>

</head>

<body>

<form name="frm1">

<input type="button" name="b1" value="click me" onmouseover="over()" onmouseout="out()">

</form>

</body>

</html>

Output:
7. Oncontextmenu :
• The oncontextmenu event occurs when the user right-clicks on an element.
• It is commonly used to disable the default right-click menu or to provide custom actions when
right-clicking on an element.
Example :
<html>
<head>
<title>Document</title>
<script>
function menu() {
alert("right click");
}
</script>
</head>
<body>
<form>
<input type="button" name="hima" value="click" oncontextmenu="menu()">
</form>
</body>
</html>

Output :
Key Events
Key events are triggered when the user interacts with a form using the keyboard (typing or pressing specific
keys).

1. Onkeydown :
• When It Happens: Fired when a key on the keyboard is pressed down.
• Common Use: Used for capturing keys when they are pressed, like shortcuts or special actions.

2. Onkeyup :
• When It Happens: Fired when a key is released after pressing it.
• Common Use: Used for actions that occur after the user has finished typing a key, like form
validation.

3. Onkeypress :
• When It Happens: Fired when a key is pressed down and is held (similar to onkeydown, but
more specific to character keys).
• Common Use: Used to detect when a character is entered into a field.

Common example:

<html>

<head>

<title>key events </title>

<script>

function up() {

document.f1.updown.value = "keyup";

function down() {

document.f1.updown.value = 'keydown';

function press1() {

document.f1.press.value = "keypress";

</script>

</head>

<body>

<form name="f1">

<input type="text" name="press" placeholder="TYPE KAR RE BHAU" onkeypress="press1()">

 <br><br>

<input type="text" name="updown" placeholder="me press" onkeyup="up()" onkeydown="down()">

</form>

</body>

</html>

Output :
 ASSIGNMENT

1. Explain form and its uses.

2. Design a form with text field, checkbox and button.

3. Design a complete registration form for college admission.

4. Explain events in form. Describe any 6 types of different form

5. Explain mouse event with the help of an example

6. Describe intrinsic functions.

7. Write a program to change the label dynamically using java script.

8. What do you mean by evaluating program? checkbox selection with the help of a

9. Explain key events with the help of an example.