[go: up one dir, main page]
Scribd
Upload
13 views37 pages

Unit 3

Uploaded by

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

Unit 3

Uploaded by

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

In HTML, the <form> element is used to create an interactive form for user

input. The <form> tag is a container that holds input elements such as text
fields, checkboxes, radio buttons, submit buttons, etc.

<form action="url" method="post/get">


<!-- Form elements like input, textarea, select, etc. -->
</form>

Properties of <form> tag

1. action: The URL where the form data will be sent.

Syntax

form.action = "url";

example:

<html>
<head>
<title>Form action Property</title>
</head>
<body>

<form id="form1" action="/submit-data" method="post">


<input type="text" name="username" placeholder="Username">
<input type="submit" value="Submit">
</form>
<script>
var form1 = document.getElementById('form1');
document.write("<h3>action Property:</h3>");
document.write("Initial action: " + form1.action + "<br>");
form1.action = "https://example.com/new-action";
document.write("Updated action: " + form1.action + "<br>");
</script>

</body>
</html>

2.
method: The HTTP method used to submit the form (GET or POST).

Syntax:

form.method = "post/get";

example

<html>
<head>
<title>Form method Property</title>
</head>
<body>

<form id="form2" action="/submit-data" method="post">


<input type="text" name="username" placeholder="Username">
<input type="submit" value="Submit">
</form>

<script>
var form2 = document.getElementById('form2');
document.write("<h3>method Property:</h3>");
document.write("Initial method: " + form2.method + "<br>");
form2.method = "get";
document.write("Updated method: " + form2.method + "<br>");
</script>

</body>
</html>

3. elements: A collection of all form controls (inputs, buttons, etc.) within


the form.

Syntax:

var elementArray = form.elements;

<html>
<head>
<title>Form elements Property</title>
</head>
<body>

<form id="form3">
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
<input type="submit" value="Submit">
</form>

<script>
var form3 = document.getElementById('form3');
var elements = form3.elements;
document.write("<h3>elements Property:</h3>");
document.write("Number of elements: " + elements.length + "<br>");
document.write("First element name: " + elements[0].name + "<br>");
</script>

</body>
</html>
4. enctype: The encoding type of the form data when submitted
encryption_type may be
4.1application/x-www-form-urlencoded
4.2 multipart/form-data
4.3 text/plain

Syntax:
form.enctype = "encryption_type";
<!DOCTYPE html>
<html>
<head>
<title>Form enctype Property</title>
</head>
<body>

<form id="form4" action="/submit-data" method="post"


enctype="multipart/form-data">
<input type="file" name="file">
<input type="submit" value="Upload">
</form>

<script>
var form4 = document.getElementById('form4');
document.write("<h3>enctype Property:</h3>");
document.write("Initial enctype: " + form4.enctype + "<br>");
form4.enctype = "application/x-www-form-urlencoded";
document.write("Updated enctype: " + form4.enctype + "<br>");
</script>
</body>
</html>
5. target:

target: The target window where the form results will be displayed.
Target value may be
1._self
2. _blank,
3. _parent
4. _top
form.target = "_blank";
<html>
<head>
<title>Form target Property</title>
</head>
<body>

<form id="form5" action="/submit-data" target="_blank">


<input type="text" name="username" placeholder="Username">
<input type="submit" value="Submit">
</form>

<script>
var form5 = document.getElementById('form5');
document.write("<h3>target Property:</h3>");
document.write("Initial target: " + form5.target + "<br>");
form5.target = "_self";
document.write("Updated target: " + form5.target + "<br>");
</script>

</body>
</html>

6. name:
name: The name of the form.
Syntax:
form.name = "form_name"

<html>
<head>
<title>Form name Property</title>
</head>
<body>

<form id="form6" name="loginForm">


<input type="text" name="username" placeholder="Username">
<input type="submit" value="Submit">
</form>

<script>
var form6 = document.getElementById('form6');
document.write("<h3>name Property:</h3>");
document.write("Initial name: " + form6.name + "<br>");
form6.name = "newFormName";
document.write("Updated name: " + form6.name + "<br>");
</script>

</body>
</html>

7. noValidate:
If set to true, disables the browser's default validation for form fields.

Syntax:

form.noValidate = true/false;

<html>
<head>
<title>Form noValidate Property</title>
</head>
<body>

<form id="form7" action="/submit-data">


<input type="email" name="email" required>
<input type="submit" value="Submit">
</form>

<script>
var form7 = document.getElementById('form7');
document.write("<h3>noValidate Property:</h3>");
document.write("Initial noValidate: " + form7.noValidate + "<br>");
form7.noValidate = true;
document.write("Updated noValidate: " + form7.noValidate + "<br>");
</script>

</body>
</html>
8. length:
length: The number of controls (elements) in the form.

Syntax:

var numberOfElements = form.length;

<html>
<head>
<title>Form length Property</title>
</head>
<body>

<form id="form8">
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
<input type="submit" value="Submit">
</form>

<script>
var form8 = document.getElementById('form8');
document.write("<h3>length Property:</h3>");
document.write("Number of elements: " + form8.length + "<br>");
</script>

</body>
</html>
Methods of the <form> Object:
1. submit(): Submits the form programmatically, bypassing any event
listeners or validations.
syntax
form.submit();

<html>
<head>
<title>Form submit() Method</title>
</head>
<body>

<form id="form9" action="/submit-data" method="post">


<input type="text" name="username" placeholder="Username">
<input type="submit" value="Submit">
</form>

<script>
var form9 = document.getElementById('form9');
document.write("<h3>submit() Method:</h3>");
form9.submit(); // Will submit the form immediately
document.write("Form submitted using submit() method.<br>");
</script>

</body>
</html>

2. reset(): Resets the form to its initial values


(like clicking a reset button).

Syntax

form.reset();

<html>
<head>
<title>Form reset() Method</title>
</head>
<body>

<form id="form10">
<input type="text" name="username" value="Default User">
<input type="password" name="password">
<input type="submit" value="Submit">
<input type="reset" value="Reset Form">
</form>

<script>
var form10 = document.getElementById('form10');
document.write("<h3>reset() Method:</h3>");
form10.reset(); // Will reset the form values immediately
document.write("Form values reset using reset() method.<br>");
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Form reset() Method</title>
</head>
<body>

<form id="form10">
<input type="text" name="username" value="Default User">
<input type="password" name="password">
<input type="submit" value="Submit">
<input type="reset" value="Reset Form">
</form>

<script>
var form10 = document.getElementById('form10');
document.write("<h3>reset() Method:</h3>");
form10.reset(); // Will reset the form values immediately
document.write("Form values reset using reset() method.<br>");
</script>

</body>
</html>

3. checkValidity(): Returns true if all form controls are valid according


to their validation constraints; otherwise, returns false.
Syntax

form.checkValidity()

<html>
<head>
<title>Form checkValidity() Method</title>
</head>
<body>
<form id="form11" action="/submit-data" method="post">
<input type="email" name="email" required>
<input type="submit" value="Submit">
</form>

<script>
var form11 = document.getElementById('form11');
document.write("<h3>checkValidity() Method:</h3>");
var validity = form11.checkValidity();
document.write("Form validity: " + (validity ? "Valid" : "Invalid") +
"<br>");
</script>

</body>
</html>

4. reportValidity():
Reports the validity of the form controls and triggers the browser's
built-in validation UI if any fields are invalid.
It returns true if the form is valid.
Syntax:
form.reportValidity();

<html>
<head>
<title>Form reportValidity() Method</title>
</head>
<body>

<form id="form12" action="/submit-data" method="post">


<input type="email" name="email" value="abc@gmail.com"
required>
<input type="submit" value="Submit">
</form>

<script>
var form12 = document.getElementById('form12');
document.write("<h3>reportValidity() Method:</h3>");
var validityReport = form12.reportValidity();
document.write("Form validity reported: " + validityReport
+"<br>");
</script>

</body>
</html>

Button in HTML:
In HTML, the <button> element is used to create interactive buttons
that can be used for various actions, such as submitting a form,
triggering JavaScript functions, or navigating to different pages.

Syntax:

<button type="button">Click Me</button>


Button Types
1. button: A generic button with no default behavior.
2. submit: Submits the form data to the server.
3. reset: Resets the form fields to their initial values.

1. Basic button:
<html>
<head>
<title>Basic Button</title>
</head>
<body>
<button type="button">Click Me</button>
</body>
</html>

2. Submit Button
<html>
<head>
<title>Submit Button</title>
</head>
<body>
<form action="/submit-form" method="post">
<input type="text" name="name" placeholder="Your Name">
<button type="submit">Submit</button>
</form>
</body>
</html>

3. Reset button
<html>
<head>
<title>Reset Button</title>
</head>
<body>
<form>
<input type="text" name="name" placeholder="Your Name">
<button type="reset">Reset</button>
</form>
</body>
</html>

2. Text Object

Syntax
<input type="text">

It is used to create single line text edit control.

Properties
 type="text": Specifies that the input field is for text.
 id: Unique identifier for the input field. Useful for linking with a <label>
or accessing it via JavaScript.
 name: Name of the input field, used to reference form data after
submission.
 placeholder: Provides a hint to the user about what to enter in the field.
This text disappears when the user starts typing.
 maxlength: Limits the number of characters that can be entered.
 minlength: Specifies the minimum number of characters required.
 required: Makes the field mandatory to fill out before submitting the
form.
 class: Allows you to apply CSS styles to the input field.

Example
<html >
<head>
<title>Simple Text Input</title>
</head>
<body>
<form>
Enter Name
<input
type="text"
id="name"
name="name"
placeholder="Enter your name"
maxlength="50"
minlength="2"
required>
</form>
</body>
</html>

3. TextArea
It is used to create multiple line edit control.

Syntax:

<textarea> </textarea>

Attributes / Properties:
 id: Unique identifier for the <textarea>, used for linking with a <label> or
accessing via JavaScript.
 name: Name of the <textarea>, used to identify form data after
submission.
 rows: Specifies the number of visible text lines.
 cols: Specifies the width of the <textarea> in terms of the number of
characters.
 placeholder: Provides a hint or instruction within the <textarea> that
disappears when the user starts typing.
 maxlength: Limits the number of characters the user can enter.
 minlength: Specifies the minimum number of characters required.
 required: Makes the field mandatory to fill out before form submission.

<html>
<head>
<title>Simple Textarea Example</title>
</head>
<body>
<form>
<label for="message">Message:</label>
<textarea
id="message"
name="message"
rows="4"
cols="50"
placeholder="Enter your message here..."
maxlength="200"
minlength="10"
required>
</textarea>
</form>
</body>
</html>

4. checkbox

In HTML,
Checkbox are used to allow the user to select multiple options from a set of
predefined options to create a checkbox in HTML, you use the <input> element
with type=”checkbox”

syntax

<input type="checkbox">
<input type="checkbox">: Defines a checkbox input field.
 id: Provides a unique identifier for the checkbox.
 name: Names the checkbox field, which is useful when processing
form data.
 checked: Makes the checkbox selected by default.
 required: Ensures that the checkbox must be checked before
submitting the form.
Example
<html>
<head>
<title>Checkbox Example</title>
</head>
<body>
<form>
<label>
<input type="checkbox" id="subscribe" name="subscribe" checked>
Subscribe to newsletter
</label><br>

<label>
<input type="checkbox" id="terms" name="terms" required>
I agree to the terms and conditions
</label>
</form>
</body>
</html>

Labels are used to make checkboxes more user-friendly and accessible. The
<label> element improves accessibility by linking the text to the checkbox, so
users can click on the label text to toggle the checkbox.

5. radiobutton
In HTML,
radio buttons are used to allow the user to select one option from a set of
predefined options.
They are created using the <input> element with type="radio".
syntax:

<input type="radio">

Properties/Label
<input type="radio">: Defines a radio button.

 id: Provides a unique identifier for the radio button, which can be
useful for linking with a <label>.
 name: Groups radio buttons together so that only one option in the
group can be selected at a time. All radio buttons with the same name
attribute are part of the same group.
 value: Defines the value that will be submitted with the form if this
radio button is selected.
<label>: Provides a label for the radio button, making it easier for users to
click on the text to select the option.

Example

<html>
<head>
<title>Radio Button Example</title>
</head>
<body>
<form>
<p>Select your favorite fruit:</p>

<label>
<input type="radio" id="apple" name="fruit" value="apple">
Apple
</label><br>

<label>
<input type="radio" id="banana" name="fruit" value="banana">
Banana
</label><br>

<label>
<input type="radio" id="cherry" name="fruit" value="cherry">
Cherry
</label>
</form>
</body>
</html>
output

6. Select Element
The <select> element in HTML is used to create a drop-down list,
allowing users to choose from multiple options.
Inside the <select> element, you use <option> elements to define the
available choices.
<select>: Defines the drop-down list.
properties
 id: Provides a unique identifier for the <select> element.
 name: Names the <select> element, which is useful for form submission.
 multiple:
with the multiple attribute, users can select more than one option by
holding down the Ctrl (or Command) key while clicking.

<option>: Defines each option in the drop-down list.


 value: Specifies the value to be sent when the form is submitted if this
option is selected.
 selected: Marks the option as the default selected option.

<select id="colors" name="colors" multiple>


<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
</select>

Example 1
<html>
<head>
<title>Single Selection Example</title>
</head>
<body>
<form>
<label for="fruit">Choose a fruit:</label>
<select id="fruit" name="fruit">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="cherry">Cherry</option>
<option value="date" selected>Date</option>
</select>
</form>
</body>
</html>

pro

Multiple selection
<!DOCTYPE html>
<html>
<head>
<title>Multiple Selection Example</title>
</head>
<body>
<form>
<label for="colors">Choose your favorite colors:</label>
<select id="colors" name="colors" multiple>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
<option value="purple">Purple</option>
</select>
</form>
</body>
</html>
Output

Form Events : Mouse Event and Key Event


Event: change in the state of an object is known as event.
Types of events
1. Window / Document Event
2. Mouse Event
3. Keyboard Event
1. Window Event/Document Event
 load: Triggered when the whole page has loaded.
 resize: Triggered when the window is resized.
 unload: Triggered when the page is being unloaded (e.g., when navigating away from
the page).
beforeunload: Triggered before the page is unloaded, often used to show a confirmation
dialog before the user leaves.

Example 1
<html>
<head>
<title>Window Events with HTML</title>
</head>
<body onload="windowLoaded()" onresize="windowResized()">
<h1>Window Event Example</h1>

<script>
function windowLoaded() {
console.log('Window has loaded');
}

function windowResized() {
console.log('Window resized');
}
</script>
</body>
</html>

Example 2
<html>
<head>
<title>Window Events Example</title>
<script>
window.onload = function() {
console.log('Window has loaded');
};

window.onresize = function() {
console.log('Window resized');
};

window.onbeforeunload = function(event) {
event.returnValue = 'Are you sure you want to leave?';
};
</script>
</head>
<body>
<h1>Check the console for window events</h1>
</body>
</html>

Mouse Events

 click: Fired when a mouse button is clicked.


 dblclick: Fired when a mouse button is double-clicked.
 mousedown: Fired when a mouse button is pressed down.
 mouseup: Fired when a mouse button is released.
 mousemove: Fired when the mouse pointer is moved.
 mouseover: Fired when the mouse pointer enters an element.
 mouseout: Fired when the mouse pointer leaves an element.
 contextmenu: Fired when the right mouse button is clicked.

<html>
<head>
<title>Mouse Events Example</title>
</head>
<body>
<h1>Check the document for mouse events</h1>
<div id="box"
style= "width: 400px; height:400px; border: 2px solid blue; text-align:center;
background-color:green"
onclick="handleClick(event)"
ondblclick="handleDblClick(event)"
onmousedown="handleMouseDown(event)"
onmouseup="handleMouseUp(event)"
onmousemove="handleMouseMove(event)"
onmouseover="handleMouseOver(event)"
onmouseout="handleMouseOut(event)"
oncontextmenu="handleContextMenu(event)">
Hover or Click Me
</div>

<script>
function handleClick(event) {
console.log('Box clicked! Coordinates: (' + event.clientX + ', ' + event.clientY + ')');
}

function handleDblClick(event) {
console.log('Box double-clicked!');
}

function handleMouseDown(event) {
console.log('Mouse button pressed: ' + event.button);
}

function handleMouseUp(event) {
console.log('Mouse button released');
}

function handleMouseMove(event) {
document.getElementById('box').innerText = 'Mouse Position: (' + event.clientX + ', '
+ event.clientY + ')';
}

function handleMouseOver(event) {
document.getElementById('box').style.backgroundColor = 'lightcoral';
}

function handleMouseOut(event) {
document.getElementById('box').style.backgroundColor = 'lightblue';
}

function handleContextMenu(event) {
console.log('Right-click (context menu) event!');
}
</script>
</body>
</html>
MSBTE Question

Write a Java script to modify the status bar using on MouseOver and on MouseOut with
links. When the user moves his mouse over the link, it will display “MSBTE” in the status
bar. When the user moves his mouse away from the link the status bar will display nothing.

<html>
<head>
<title>Status Bar Example</title>
</head>
<body>
<h1>Status Bar Example</h1>
<p>
<a href="#"
onmouseover="changeStatus('MSBTE')"
onmouseout="changeStatus('')">
Hover over this link
</a>
</p>
<script>
function changeStatus(message) {
window.status = message;
}
</script>
</body>
</html>

KeyBoard Event:
Keyboard events in JavaScript allow you to respond to user interactions with the keyboard.
Common keyboard events include:
 keydown: Triggered when a key is pressed down.
 keypress: Triggered when a key that produces a character value is pressed down
(deprecated in modern browsers).
 keyup: Triggered when a key is released.
<html>
<head>
<title>Keyboard Events Example</title>
</head>
<body>
<h1>Type something to see keyboard events</h1>
<input type="text" id="textInput"
onkeydown="handleKeyDown(event)"
onkeyup="handleKeyUp(event)"
onkeypress="handleKeyPress(event)"
placeholder="Type here...">
<p id="output"></p>

<script>
function handleKeyDown(event) {
document.getElementById('output').innerText = 'Key down: ' + event.key;
}

function handleKeyUp(event) {
document.getElementById('output').innerText = 'Key up: ' + event.key;
}

function handleKeyPress(event) {
// Note: `keypress` is deprecated. Use `keydown` and `keyup` instead.
document.getElementById('output').innerText = 'Key press: ' + event.key;
}
</script>
</body>
</html>

Changing Attribute Values Dynamically

You can dynamically change text color, size, and font using
JavaScript by manipulating the CSS properties of HTML elements.
steps
1. select the element whose property or attribute value need to be
changed
2. Use element property to set the value to property of an element
3. To set the property by using backet or dot(.) notation
4. Writw function and call it on any events
Here’s a simple example to demonstrate how to do this:

<html>
<head>
<title>Change Text Style Example</title>
<style>
/* Initial styles for the text element */
#text {
color: black;
font-size: 16px;
font-family: Arial, sans-serif;
}
</style>
<script>
function changeTextStyle() {
// Get the text element by its ID
textElement = document.getElementById('text');

// Change text color


textElement.style.color = 'blue';

// Change text size


textElement.style.fontSize = '24px';
// Change text font
textElement.style.fontFamily = 'Courier New, monospace';
}
</script>
</head>
<body>
<h1>Change Text Style</h1>
<p id="text">This is some text whose style will be changed.</p>
<button onclick="changeTextStyle()">Change Text Style</button>
</body>
</html>

Output
before

After clicking button


Changing option list dynamically
To change the option list dynamically we have to use properties and
method of <select>
1. value:
Represents the value of the currently selected <option> element.
Example
select = document.getElementById('mySelect');
console.log(select.value); // Logs the value of the selected option
2. options:
Returns a collection of all <option> elements within the <select>
element.

Example
select = document.getElementById('mySelect');
console.log(select.options); // Logs the collection of option
elements

3. selectedIndex:
Represents the index of the currently selected <option> element.
Returns -1 if no option is selected.

Example

select = document.getElementById('mySelect');
console.log(select.selectedIndex); // Logs the index of the
selected option
4. length
Returns the number of <option> elements in the <select> element.
Example
select = document.getElementById('mySelect');
console.log(select.multiple); // Logs true or false
5. mutiple
Indicates whether the <select> element allows multiple
selections.

Example
select = document.getElementById('mySelect');
console.log(select.multiple); // Logs true or false
6. disabled
Indicates whether the <select> element is disabled.
Example

select = document.getElementById('mySelect');
console.log(select.disabled); // Logs true or false

Methods
1. add(option, index)
Adds a new <option> element to the <select> element at the specified index.

Syntax: select.add(option[, index])

select = document.getElementById('mySelect');
const newOption = new Option('Bengaluru',);
select.add(newOption);

2. remove(index):
Removes the <option> element at the specified index.
Syntax:
select.remove(index)
Example
select = document.getElementById('mySelect');
const option = select.item(1); // Gets the option at index 1
3. item(index):
Returns the <option> element at the specified index.
Syntax:
select.item(index)

Example
select = document.getElementById('mySelect');
const option = select.item(1); // Gets the option at index 1

<html>
<body>
<select id="mySelect">
<option value="Pune">Pune</option>
<option value="Mumbai">Mumbai</option>
<option value="Chennai">Chennai</option>
<option value="Delhi">Delhi</option>
<option value="Kolkata">Kolkata</option>
</select>
<br>
<hr>
<h2>ADD CITY</h2>
Enter the name of city
<input type="text" id="ct">
<br>
<input type="button" value="Add" onclick="addCity()">
<br>
<hr>
<h2>Remove the city</h2>
Enter the index of city
<input type="text" id="index">
<br>
<input type="button" value="Remove" onclick="removeCity()">
<br>
<script>

function addCity()
{

select = document.getElementById('mySelect');
city = document.getElementById('ct').value;

const newOption = new Option(city);


select.add(newOption);
}
function removeCity()
{
select = document.getElementById('mySelect');
index = document.getElementById('index').value;
select.remove(index);
}
</script>
</body>
</html>

Evaluating Checkbox selections

To evaluate Checkbox selections dynamically we have to use


properties and method of <checkbox>
1. checked:
Indicates whether the checkbox is checked.
<input type="checkbox" id="myCheckbox" checked>
<script>
checkbox = document.getElementById('myCheckbox');
console.log(checkbox.checked); // true if checked, false if not
</script>
2. disabled
Indicates whether the checkbox is disabled and cannot be
interacted with.
Example

<input type="checkbox"id="myCheckbox" disabled>


<script>
const checkbox = document.getElementById('myCheckbox');
console.log(checkbox.disabled); // true if disabled, false if enabled
</script>

4. value
The value sent to the server when the checkbox is checked.
Example
<input type="checkbox"id="myCheckbox">
<script>
checkbox = document.getElementById('myCheckbox');
console.log(checkbox.id); // 'myCheckbox'
</script>

Methods of <input type="checkbox">

1. focus():
Sets focus to the checkbox.

<input type="checkbox"id="myCheckbox">
<button onclick="focusCheckbox()">
Focus Checkbox
</button>
<script>
function focusCheckbox() {
checkbox = document.getElementById('myCheckbox');
checkbox.focus();
}
</script>

2. blur():
Removes focus from the checkbox.
<input type="checkbox"id="myCheckbox">
<button onclick="blurCheckbox()">Blur Checkbox</button>
<script>
function blurCheckbox() {
checkbox = document.getElementById('myCheckbox');
checkbox.blur();
}
</script>

3. click()

Simulates a click on the checkbox.


<input type="checkbox"id="myCheckbox">
<button onclick="clickCheckbox()">
Click Checkbox
</button>
<script>
Function clickCheckbox()
{
checkbox = document.getElementById('myCheckbox');
checkbox.click();
}
</script>

Example
<html>
<body>
<form id="form1">
Red
<input type="checkbox" name="Red" value="Red"> Red
<br>

Green
<input type="checkbox" name="Green" value="Green"> Green
<br>

Blue
<input type="checkbox" name="Blue" value="Blue"> Blue
<br>
</form>
<p id="msg">display</p>
<input type="button" value="show" onclick="showSelection()">

<script>
function showSelection()
{
form1=document.getElementById("form1")
msg="";
for(i=0;i<form1.elements.length;i++)
{
if(form1.elements[i].checked)
{
msg=msg+form1.elements[i].value+" true";
}
}
document.getElementById("msg").innerHTML=msg;
}
</script>
</body>
</html>

You might also like