Scribd
Upload
4 views

CSS Chapter 3Notes

Uploaded by

NTR Thor OP
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

CSS Chapter 3Notes

Uploaded by

NTR Thor OP
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

Course : Client Side Scripting Language(Elective)

Unit III : Form and Event Handling

Unit Outcomes(UOs)
3a. Write JavaScript to design a form to accept input values for the given problem.
3b. Use JavaScript to implement form events to solve the given problem.
3c. Develop JavaScript to dynamically design specified attribute value to the given form control.
3d. Use the intrinsic function with specified parameters.

Contents
3.1 Building of blocks of a form, properties and methods of form, button, text, text area,
checkbox, radio button, select element.
3.2 Form Events – mouse events, 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.

What is form? Give uses of form.


• Form is a typical layout on the web page by which user can interact with the web page.
• Typical component of form are text, text area, checkboxes, radio buttons and push buttons.
• These components of form are also called as form controls or controls.
• All these form contents appear in the <form> tag. The form has an attribute action which gets executed
when user clicks a button on the form.

• Uses of Form
• Collect information from customer or from student through online registration.
• Forms are used for online Survey.
• Conducting online examination, for getting Feedback and so on.
• Information present in the form is submitted to server for further processing.

Explain form tag with all its attributes


• HTML <form> element attributes
• Forms are among the most useful features of the HTML language.
• An HTML form begins with the <form>tag.
• This tag indicates that a form is beginning and it enables form elements to be used.
• In HTML there are various attributes available for <form> element which are given below:

HTML action attribute


• The action attribute of <form> element defines the process to be performed on form when form is
submitted, or it is a URI to process the form information.
• The action attribute value defines the web page where information proceed. It can be .php, .jsp,
.asp, etc. or any URL where you want to process your form.
Attribute Description
action It is the form’s ACTION Attribute, or the program to which the form data will be submitted.
method It Specifies the HTTP methods used to submit the form. such as GET,POST.
GET – Defalult. Appends the form data to the URL in name/value Pairs
POST – Send the form-data as an HTTP post transaction
name This attribute denotes the name of the form
Target It specifies the window in which the result of the form will be displayed. Normally this is done
in main window, replacing the form itself.
The target values can be as follows:
1. _blank:Open in a new window
2. _self :opens in the same frame as it was clicked (default)
3. _parent:open in the parent frameset .
4. _top:opens in the full body of the window
5. framename:opens in named frame
<html>
<head>
<script>
function validateForm()
{
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()"
method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>

Explain text element with example


• It is the most commonly used form element.
• You can use it to prompt for a name, address or any other information.
• With javascript you can display the text automatically in the textfield.
• Syntax:
• <input type=“text” name=“t1” value=“Hello” size=“20”>
• It creates a text field called “t1” default value “Hello” and allows to enter upto 20 characters data.
• JavaScript treats this as a text object.
• Each text object has following properties:
• name: It is the name given to text field. This is also used as the object name.
• defaultValue: It is the default value and corresponds to the VALUE attribute. It is read-only
property.
• value: It is the current value. It starts with defaultValue but can be changed either by user or by
function.
• Many times we are using this attribute to read the value entered by user or to change the value
• Ex: Following Ex. changes the textfield value:
document.order.username.value=“AAA”
<html>
<head>
<title> My Page</title>
</head>
<body>
<form>
<label>Input String Text:</br>
<input type="text" size="25" value="">
<label><brInput String Text area:</br>
</form>
</body>
</html>

Explain textarea element with example


• These are defined with their own tag <textarea> and represented by textarea object.
• Textarea allows user to enter multiline data which is not possible with textfield.
• A text area can hold an unlimited number of characters, and the text renders in a fixed-width font
(usually Courier).
• The size of a text area can be specified by the cols and rows attributes, or even better
• Example:
<textarea name=“ta1” rows=“2” cols=“30”>
This is a TextArea.
</textarea>
• It creates a textarea called “ta1” with 2 rows and 30 cols.
• The text between the tags <textarea></textarea> is displayed as a default initial value of it.

<html>
<head>
<title> My Page</title>
</head>
<body>
<form>
<label><br>Input String Text area:</br>
<textarea cols="40" rows="5" name="myname">
</textarea>
</form>
</body>
</html>

Explain checkbox element with example.


• It is a form element that looks like a small box.
• Clicking on it switches between the checked and unchecked states.
• Checkboxes let a user select ZERO or MORE options of a limited number of choices.
Syntax:
<input type="checkbox">
Example:
<form>
<input type="checkbox" name=“lang" value=“C++"> C++
</form>
<html>
<head>
<title> My Page</title>
</head>
<body>
<form name="checkboxform">
<div align="left"><br>
<br> Select the fruits of your choice</br>
<input type="checkbox" name="option1" value="Mango" >Mango</br>
<input type="checkbox" name="option2" value="Apple" >Apple</br>
<input type="checkbox" name="option3" value="Grapes">Grapes</br>
</form>
</body>
</html>

Explain radio button element with example.


• Another element for decisions is the radio button.
• These are similar to check boxes, but they exist in groups and only one button can be checked in
the group.
Syntax:
<input type=“radio">
Example:
<form>
<input type=“radio" name=“r1" value=“Option1"> O1
<input type=“radio" name=“r1" value=“Option2"> O2
</form>

<html>
<head>
<title> My Page</title>
</head>
<body>
<form name="radioform">
<div align="left"><br>
<br> Select the fruits which you like the most</br>
<input type="radio" name="group1" value="Mango" >Mango</br>
<input type="radio" name="group1" value="Apple" >Apple</br>
<input type="radio" name="group1" value="Grapes" >Grapes</br>
</br>
<br> Select the flower which you like the most</br>
<input type="radio" name="group2" value="Rose" >Rose</br>
<input type="radio" name="group2" value="Lotus" >Lotus</br>
<input type="radio" name="group2" value="Jasmine" >Jasmine</br>
</form>
</body>
</html>

Explain button element with example.


• Buttons use input tag and can be used with one of three different types:
• type=“button”: It is a generic button. It performs no action on its own, but you can assign it one
using a javascript event hndler.
• type=“submit”: It is a submit button. It causes the data in the form fields to be sent to script.
• type=“reset”: It is a reset button. It sets all the form fields back to their default value or blank.
Example:
<input type="button">
<input type=“submit">
<input type=“reset">
<html>
<head>
<title> My Page</title>
</head>
<body>
<form name="buttomform"action="file:///C:/Users/pc/Desktop/text.html"
method="post">
<div align="center">
<input type="text" size="35" value="">
<br><input type="submit" value="send">
<input type="reset" value="Reset"><br>
</form>
</body>
</html>

Explain select element with example.


• It is useful for multiple choice selections.
• The <select> HTML tag is used to define selection list or drop down list of text items.
• The content between the opening <option> and closing </option> tags is what the browsers will
display in a drop-down list.
Example:
<form >
<select name="color">
<option value=“Red">Red</option>
<option value=“Green">Green</option>
<option value=“Blue">Blue</option>
</select>
</form>

<html>
<head>
<title> My Page</title>
</head>
<body>
<form name="dropdownformform">
<div align="center">
<select name="My Menu">
<option value="Mango">Mango</option>
<option value="Banana">Banana</option>
<option value="Apple">Apple</option>
</select>
</form>
</body>
</html>

Create a HTML document that has the form with the following controls
a) A text box to collect the customer name
b) Four checkboxes, one for the following items:
i) Four HTML textbooks for Rs. 1000 ii) Eight XML textbooks for Rs. 2000
iii) Four Javabeans textbooks for Rs. 2500 iv) Eight UML textbooks for Rs. 1500
c) A Collection of radio button that are labelled as follows –
<html>
<body>
<center><h2>Registration Form</h2></center>
<hr/>
<form>
<table>
<tr>
<td>Name:</td>
<td><input type="text" size="25" value=""></td>
</tr>
<tr>
<td>Select the desired items:</td>
<td>
<select name="f">
<option value="4 HTML Books(Rs.1000)">4 HTML Books(Rs.1000)</option>
<option value="8 XML Books(Rs.2000)">8 XML Books(Rs.2000)</option>
<option value="4 JavaBeans Books(Rs.2500)">4 JavaBeans
Books(Rs.2500)</option>
<option value="8 UML Books(Rs.1500)">8 UML Books(Rs.1500)</option>
</select>
</td>
</tr>
<tr>
<td>
Mode of Payment:
</td>
</tr>
<tr>
<td><input type="radio" name="group1" value="Cash">Cash</td>
</tr>
<tr>
<td><input type="radio" name="group1" value="Cheque">Cheque</td>
</tr>
<tr>
<td><input type="radio" name="group1" value="Credit Card">Credit
Card</td>
</tr>
<tr></tr><tr></tr><tr></tr>
<td><input type="Submit" value="Submit"></td>
<td><input type="Reset" value="Reset"></td>
</body>
</html>

Write a form to collect details of a user such as name, address, radio button to choose subject of book he
wants to buy, dropdown to choose favorite author, comments for the last book he read
<html>
<head>
<title>My Page</title>
</head>
<body>
<form>
<b>Name:</b><input type="text" size="20" value=""></br>
<b>Address:</br><input type="text" size="35" value=""><br/>
<b>Subjects:</b></br>
<input type="radio" name="authors" value="web Programming">Web Programming</br>
<input type="radio" name="authors" value="Computer Networks">Computer
Networks</br>
<input type="radio" name="authors" value="Software Engineering">Software
Engineering</br>
<input type="radio" name="authors" value="Data Structures">Data Structures</br>
<b>Select favorite Author:</b>
<select name="MyMenu">
<option value="AAA">AAA</option>
<option value="BBB">BBB</option>
<option value="CCC">CCC</option>
<option value="DDD">DDD</option>
</select>
</br>
<b>Comments:</b></br>
<textarea cols="30" rows="10" name="Comments">
</textarea>
<br/><br/>
<input type="submit" value="Submit">
<input type="reset" value="Clear">
</form>
</body>
</html>

Design a simple HTML form for filing the information for registration of a student
<html>
<head>
<title>Registration form</title>
</head>
<body>
<form>
<b>Student Name :</b><input type="text" size="20" value=""></br></br>
<b>Address :</b><input type="text" size="20" value=""></br></br>
<b>Email ID :</b><input type="text" size="20" value=""></br></br>
<b>Password :</b><input type="text" size="20" value=""></br></br>
<b>Select Course:</b></br></br>
<input type="radio" name="courses" value="Computer Engg">Computer
Engg<br/><br/>
<input type="radio" name="courses" value="Mechanical Engg">Mechanical
Engg<br/><br/>
<input type="radio" name="courses" value="Civil Engg">Civil Engg<br/><br/>
<input type="radio" name="courses" value="Electrical Engg">Electrical
Engg<br/><br/>
<b>Select Payment Mode:</b>
<Select name="Mymenu">
<option value=Cheque">Cheque</option>
<option value=Cash">Cash</option>
<option value=Card">Card</option>
</select> <br/><br/><br/>
<input type="submit" value="Submit">
<input type="reset" value="Clear">
</form>
</body>
</html>
Write a form to make login and password
Write a form to make login and password
<html>
<head>
<title> Login Form Demo</title>
</head>
<body bgcolor="Red">
<Center>
<h2>Login Form</h2>
</center>
<form name="form1">
<table>
<tr>
<td><b>Name:</b></td>
<td><input type="text" name="username">
</tr>
<tr>
<td><b>Password:</b></td>
<td><input type="password" name="pwd"></td>
</tr>
<tr>
<td><input type="submit" name="submit" value="Submit"></td>
<td><input type="reset" name="reset" value="Reset"></td>
</tr>
</table>
</form>
</body>
</html>

List the various form events.


Event Event
Description
Performed Handler

focus onfocus When the user focuses on an element

submit onsubmit When the user submits the form

blur onblur When the focus is away from a form element

change onchange When the user modifies or changes the value of a form
element

Example of Event Handling


• The onload event gets activated as soon as the web page gets loaded in the browsers window.
• Following script along with its output illustrate the onload tag attribute
<html>
<head>
<title>Demo of onload Tag Attribute</title>
<script type="text/javascript">
function my_fun()
{
alert("Welcome");
}
</script>
</head>
<body onload="my_fun()">
</body>
</html>

Explain various mouse events


Event Event Description
Performed Handler

click onclick When mouse click on an element


mouseover onmouseover When the cursor of the mouse comes over the element

mouseout onmouseout When the cursor of the mouse leaves an element

mousedown onmousedown When the mouse button is pressed over the element

mouseup onmouseup When the mouse button is released over the element

mousemove onmousemove When the mouse movement takes place.

Mouse Onclick Event


<html>
<head> Javascript Events </head>
<body>
<script language="Javascript" type="text/Javascript">
function clickevent()
{
document.write("This is Mouse Click Event");
}
</script>
<form>
<input type="button" onclick="clickevent()" value="Who's this?"/>
</form>
</body>
</html

Mouseover Event
<html>
<head>
<h1> Javascript Events </h1>
</head>
<body>
<script language="Javascript" type="text/Javascript">
<!--
function mouseoverevent()
{
alert("This is Mouse Over Event");
}
//-->
</script>
<p onmouseover="mouseoverevent()"> Keep cursor over me</p>
</body>
</html>

Mouse Focus Event


<html>
<head> Javascript Events</head>
<body>
<h2> Enter something here</h2>
<input type="text" id="input1" onfocus="focusevent()"/>
<script>
<!--
function focusevent()
{
document.getElementById("input1").style.background=" aqua";
}
//-->
</script>
</body>
</html>

Enlist and explain any two mouse events.


onclickevent: This event occurs when a mouse button is clicked on or over a form element.
Example:
<input type="text" onclick=" function ()">

ondblclickevent: This event occurs when a mouse button is double clicked on or over a form element.
Example:
<input type="text" ondblclick=" function ()">

onmousedownevent: This event executes when a mouse button is clicked while cursor is over an element.
Example:
<input type="text" onmousedown=" function ()">

onmouseupevent: This event executes when a mouse button is released while the cursor is over an
element.
Example:
<input type="text" onmouseup=" function ()">

onmouseoverevent: This event executes when mouse cursor moves onto an element.
Example:
<input type="text" onmouseover=" function ()">

onmousemoveevent: This event executes when mouse cursor is moved while over an element.
Example:
<input type="text" onmousemove=" function ()">

onmouseoutevent: This event executes when mouse cursor is moved away from an element.
Example:
<input type="text" onmouseout=" function ()">
Insert an image into a wepage. Write a script which displays the message when the mouse is over the
image. The coordinates of the mouse should be displayed if click attempted on the image
<html>
<head>
<script type="text/javascipt">
function my_fun1()
{
points.innerText="Now the mouse is moving";
}
function my_fun2()
{
points.innerText="("+event.offsetX+","+event.offsetY+")";
}
</script>
</head>
<body onmousemove="my_fun1()" onmousedown="my_fun2()">
<center>
<span id="points">(0,0)</span>
<img src="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg"
style="position:absolute;top:50;left:90">
</center>
</body>
</html>

• onmouseover and onmouseout


• These two event types will help you create nice effects with images or
even with text as well. The onmouseover event triggers when you bring
your mouse over any element and the onmouseout triggers when you move
your mouse out from that element. Try the following example.
<html>
<head>
<script type = "text/javascript">
function over() {
document.write ("Mouse Over");
}
function out() {
document.write ("Mouse Out");
}
</script>
</head>
<body>
<p>Bring your mouse inside the division to see the result:</p>
<div onmouseover = "over()" onmouseout = "out()">
<h2> This is inside the division </h2>
</div>
</body>
</html>
Explain various key events with example
Event Event Handler Description
Performed

Keydown & onkeydown & When the user press and then
Keyup onkeyup release the key

Keyup Event
<html>
<head>
<title>Demo of key event Tag Attribute</title>
<script type="text/javascript">
function my_fun()
{
alert("you pressed the key");
}
</script>
</head>
<body>
<center>
<form>
Enter Name:<input type="text" onkeypress="my_fun()"/>
</form>
</center>
</body>
</html>

Keydown Event
<html>
<head> Javascript Events</head>
<body>
<h2> Enter something here</h2>
<input type="text" id="input1" onkeydown="keydownevent()"/>
<script>
<!--
function keydownevent()
{
document.getElementById("input1");
alert("Pressed a key");
}
//-->
</script>
</body>
</html>

Write a javascript code to demonstrate getElementbyId() method.


• The document.getElementById() method returns the element of specified id.
• We can use document.getElementById() method to get value of any field. But we need to
define id for the input field.
<script type="text/javascript">
function getcube()
{
var number=document.getElementById("number").value;
alert(number*number*number);
}
</script>
<form>
Enter No:<input type="text" id="number" name="number"/><br/>
<input type="button" value="cube" onclick="getcube()"/>
</form>

Write a JavaScript to modify the status bar using onmouseover and 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>JavaScript Status Bar</title></head>
<body>
<a href=" https://msbte.org.in/"
onMouseOver="window.status='MSBTE';return true"
onMouseOut="window.status='';return true">
MSBTE
</a>
</body>
</html>

Write a HTML script which displays 2 radio buttons to the users for fruits and
vegetables and 1 option list. When user select fruits radio button list should present
only fruits to the user & when user select vegetables radio button option list should
present only vegetables names to the user.
<html>
<head>
<title>HTML Form</title>
<script language="javascript" type="text/javascript">
function updateList(ElementValue)
{
with(document.forms.myform)
{
if(ElementValue == 1)
{
optionList[0].text="Mango";
optionList[0].value=1;
optionList[1].text="Banana";
optionList[1].value=2;
optionList[2].text="Apple";
optionList[2].value=3;
}
if(ElementValue == 2)
{
optionList[0].text="Potato";
optionList[0].value=1;
optionList[1].text="Cabbage";
optionList[1].value=2;
optionList[2].text="Onion";
optionList[2].value=3;
}
}
}
</script>
</head>
<body>
<form name="myform" action="" method="post">
<p>
<select name="optionList" size="2">
<option value=1>Mango
<option value=2>Banana
<option value=3>Apple
</select>
<br>
<input type="radio" name="grp1" value=1 checked="true"
onclick="updateList(this.value)">Fruits
<input type="radio" name="grp1" value=2
onclick="updateList(this.value)">Vegetables
<br>
<input name="Reset" value="Reset" type="reset">
</p>
</form>
</body>
</html>

Describe how to evaluate checkbox selection. Explain with suitable example.


Evaluating Checkbox Selection:
• A checkbox is created by using the input element with the
type=”checkbox” attribute-value pair.
• A checkbox in a form has only two states(checked or un-checked) and is
independent of the state of other checkboxes in the form.
• Check boxes can be grouped together under a common name.
• You can write JavaScript function that evaluates whether or not a check box was
selected and then processes the result according to the needs of your application.
• Following example make use of five checkboxes to provide five options to the user
regarding fruit.

<html>
<head>
<title>HTML Form</title>
<script language="javascript" type="text/javascript">
function selection()
{
var x ="You selected: ";
with(document.forms.myform)
{
if(a.checked == true)
{
x+= a.value+ " ";
}
if(b.checked == true)
{
x+= b.value+ " ";
}
if(o.checked == true)
{
x+= o.value+ " ";
}
if(p.checked == true)
{
x+= p.value+ " ";
}
if(g.checked == true)
{
x+= g.value+ " ";
}
document.write(x);
}
}
</script>
</head>
<body>
<form name="myform" action="" method="post">
Select Your Favourite Fruits: <br>
<input type="checkbox" name="a" value="Apple">Apple
<input type="checkbox" name="b" value="Banana">Banana
<input type="checkbox" name="o" value="Orange">Orange
<input type="checkbox" name="p" value="Pear">Pear
<input type="checkbox" name="g" value="Grapes">Grapes
<input type="reset" value="Show" onclick="selection()">
</form>
</body>
</html>
</form>
</body>
</html>
Code:
<html>
<body>
<html>
<script type="text/javascript">
function modifyList(x)
{
with(document.forms.myform)
{
if(x ==1)
{
optionList[0].text="Green Tea";
optionList[0].value=1;
optionList[1].text="Milk Tea ";
optionList[1].value=2;
optionList[2].text="Black Tea";
optionList[2].value=3;
}
if(x ==2)
{
optionList[0].text="Capaccino";
optionList[0].value=1;
optionList[1].text="Latte";
optionList[1].value=2;
optionList[2].text="Expression";
optionList[2].value=3;
}
if(x ==3)
{
optionList[0].text="MAAZA";
optionList[0].value=1;
optionList[1].text="SPRITE";
optionList[1].value=2;
optionList[2].text="COKA-COLA";
optionList[2].value=3;
}
}
}
</script>
</head>
<body>
<form name="myform" action=" " method="post">
<table><tr><td>
Select Beverage: </td><td>
<input type="checkbox" name="grp1" value=1 checked="true"
onclick="modifyList(this.value)"> TEA
<input type="checkbox" name="grp1" value=2 onclick="modifyList(this.value)">
COFFEE
<input type="checkbox" name="grp1" value=3 onclick="modifyList(this.value)">
SOFT DRINK
</td></tr></table>
<select name="optionList" size="3">
<option value=1>Kiwi
<option value=1>Pine-Apple
<option value=1>Apple
</tr> </table>
</select>
</form>
</body>
</html>

Write a JavaScript to create rollover effect that involves text and images. When the user places his or her
mouse pointer over a book title, the corresponding book images appears
<html>
<head>
<title>
rollovers</title>
</head>
<body>
<table border="1" width="100%">
<tbody>
<tr valign="top">
<td width="50%">
<a><img height="500" src="motivation.png" width="900"
name="clr"></a></td>
<td><a onmouseover="document.clr.src='blue.png' ">
<b><u>Motivational book</u></b></a>
<br>
<a onmouseover="document.clr.src=education.png' ">
<b><u>Educational book</u></b></a>
<br>
</td>
</tr>
</tbody>
</table>
</body>
</html>

Explain following form control / elements with example Button,


Text, TextArea, Select, Checkbox, Form.
Button is created by using following code:
<form method = "GET" action = ""><input type = "button" name =
"MyButton" value = "Click" onclick = "msg()"><form>
There are several types of button, which are specified by the type
attribute:
1. Button which corresponds to the graphic component.
2. Submit, which is associated to the form and which starts the loading of the file assigned to the
action attribute.
3. Image button in which an image loaded from a file.
A Button object also represents an HTML <button> element which is specified as follows:
<button name = "btn" value = "MyButton" onclick = "msg()">
Example:
<html>
<body>
<h2>Show a Push Button</h2>
<p>The button below activates a JavaScript when it is clicked. </p>
<form>
<input type="button" value="Click me" onclick="msg()">
</form>
<script>
function msg()
{
alert("Hello world!");
}
</script>
</body>
</html>

Text:
Input "text" is an object to enter a single line of text whose content
will be part of form data.
In html a text is created by following code:
<input type="text" name="textname" id="textid" value="
assign_value" />
Example:
<script type="text/javascript">
function changeText()
{
var userInput = document.getElementById('userInput').value;
document.getElementById('vp').innerHTML = userInput;
}
</script>
<input type='text' id='userInput' value='Enter Text Here' />
<p>Welcome <b id='vp'>JavaScript</b></p>
<input type='button' onclick='changeText()' value='Change Text'/>
</script>
TextArea:
The Textarea object represents an HTML <textarea> element.
The <textarea> tag indicates a form field where the user can enter a large amount of text.
You can access a <textarea> element by using getElementById()
Example:
<html>
<body>
<textarea cols="30" rows="5" wrap="hard" readonly="yes"
disabled="yes">
As you can see many times word wrapping is often the desired look
for your textareas. Since it makes everything nice and easy to read
and preserves line breaks.
</textarea>
</body>
</html>

Checkbox:
<input> elements of type checkbox are rendered by default as boxes that are checked (ticked)
when activated. A checkbox allows you to select single values for submission in a form (or not).
Syntax for creating checkbox is:
<input type="checkbox" id="myCheck" onclick="myFunction()">
A checkbox can have only two states:
1. Checked
2. Unchecked
Example:
<html>
<body>
<div>
<br>
<input type="checkbox" name="program" id="it" value="IT">
<label for="it">Information Tech</label><br>
<input type="checkbox" name="program" id="co" value="CO"
checked>
<label for="co">Computer Engg</label><br>
<input type="checkbox" name="program" id="ej" value="EJ">
<label for="ej">Electronics</label><br>
<button onclick="validate();">Validate</button>
</div>
<div id="status">
</div>
<script>
function validate()
{
var elements = document.getElementsByName("program");
var statusText = " ";
for (var index=0;index <elements.length;index++)
{
statusText = statusText +
elements[index].value+"="+elements[index].checked+"<br>";
}
document.getElementById("status").innerHTML = statusText;
}
</script>
</body>
</html>

Select:
Form SELECT elements (<select>) within your form can be accessed and manipulated in JavaScript
via the corresponding Select object.
To access a SELECT element in JavaScript, use the syntax:
document.myform.selectname //where myform and selectname are names of your form/element.
document.myform.elements[i] //where i is the position of the select element within form
document.getElementById("selectid") //where "selectid" is the ID of the SELECT element on the
page.
Example:
<html>
<body>
<select id="programs" size="5">
<option>Computer Engineering</option>
<option>Information Technology</option>
<option>Chemical Engineering</option>
<option>Electronics &TeleComm.</option>
</select>
<p>Click the button to disable the third option (index 2) in the
dropdown list.</p>
<button onclick="myFunction()">Disable Option</button>
<script>
function myFunction()
{
var x = document.getElementById("programs").options[2].disabled
= true;
document.getElementById("programs").options[2].style.color =
"red";
}
</script>
</body>
</html>

Form:
A form is a section of an HTML document that contains elements such as radio buttons, text boxes
and option lists. HTML form elements are also known as controls.
Elements are used as an efficient way for a user to enter information into a form. Typical form
control objects also called "widgets"
includes the following:
• Text box for entering a line of text.
• Push button for selecting an action.
• Radio buttons for making one selection among a group of options.
• Check boxes for selecting or deselecting a single, independent option.
The <form> element can contain one or more of the following form
elements:
· <input> · <textarea> · <button> · <select> · <option> · <fieldset> ·
<label>
· <legend>
Syntax:
<form name = "myform" id = "myform" action = "page.html"
onSubmit = "test()"> -----objects---- </form>

You might also like