0% found this document useful (0 votes)

38 views

CSS CH-3 Updated

Css Notes

Uploaded by

dnyvlogs

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

38 views

CSS CH-3 Updated

Css Notes

Uploaded by

dnyvlogs

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 32

Form and Event Handling

Form
A form is a section of a document which contains controls such as text fields, password fields,
checkboxes, radio buttons, submit button, menus etc.
An HTML form facilitates the user to enter data that is to be sent to the server for processing
such as name, email address, password, phone number, etc. .
We use HTML form element in order to create the JavaScript form.

Typical form control objects -- also called "widgets" -- include 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 typical form looks like this.

<html>
<head>
<title>Switch</title>
<script type="text/javascript">
function fun()
{
alert("Hello, Your form is submitted")
}
</script>
</head>

<body>
<form name="Myform" action="" method="get">
Enter Something in Textbox
<input type="text" name="ID">
<input type="button" name="button" value="Back" onclick="fun()">
</form>
</body>
</html>

Output:

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Form and Event Handling

 form name="myform"

Defines and names the form. Elsewhere in the JavaScript you can reference this form by
the name myform.

 action=""
The action tag defines the action that the browser will take to tackle the form when it is
submitted. Here, we have taken no action.
The action attribute specifies a URL that will process the form submission.
As this example is not designed to submit anything, the URL for the CGI program is
omitted.

 method="get"
It defines the method data is passed to the server when the form is submitted.

 input type="text" defines the text box object. This is standard HTML markup.

 input type="button" defines the button object. This is standard HTML markup except for
the onClick handler.

 onclick="fun( )" is an event handler -- it handles an event, in this case clicking thebutton.
When the button is clicked, JavaScript executes the expression within the quotes. It calls
function fun().

HTML Form Attributes

1. Name:
The name attribute specifies the name of a form. The name attribute is used to reference
elements in a JavaScript, or to reference form data after a form is submitted.
Syntax
<form name="text">

2. The Action Attribute

The action attribute defines the action to be performed when the form is submitted.
Usually, the form data is sent to a file on the server when the user clicks on the submit button.

Tip: If the action attribute is omitted, the action is set to the current page.

3. The Method Attribute

The method attribute specifies the HTTP method to be used when submitting the form data.
The form-data can be sent as URL variables (with method="get") or as HTTP post transaction
(with method="post").
The default HTTP method when submitting form data is GET.
Example
<form action="/action_page.php" method="get">
Example
<form action="/action_page.php" method="post">

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Form and Event Handling

Notes on GET:
 Appends the form data to the URL, in name/value pairs
 NEVER use GET to send sensitive data! (the submitted form data is visible in the URL!)
 The length of a URL is limited (2048 characters)
 GET is good for non-secure data, like query strings in Google

Notes on POST:
 Appends the form data inside the body of the HTTP request (the submitted form data is
not shown in the URL)
 POST has no size limitations, and can be used to send large amounts of data.
 Form submissions with POST cannot be bookmarked.

4. onsubmit
The purpose of the HTML onsubmit attribute is to execute the code specified, when the
associated form is submitted. HTML onsubmit attribute supports form element. There is no
default value of HTML onsubmit attribute.
Syntax
<form onsubmit="value" > .... </form>
Example:
<form name="myform" action="" method="get" onsubmit="alert('Form is submitted')">

<head>
<title>Switch</title>
<script type="text/javascript">
function fun()
{
alert("Hello, Your form is submitted")
}
</script>
</head>
<body>
<form name="Myform" action="" method="get" onsubmit="fun()">
Enter Something in Textbox
<input type="text" name="ID">
<input type="submit" name="button" value="Submit">
</form>
</body>

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Form and Event Handling

 HTML Form Input Types

In HTML <input type=" "> is an important element of HTML form. The "type" attribute of input
element can be various types, which defines information field. Such as <input type="text"
name="name"> gives a text box.
Following is a list of all types of <input> element of HTML.
1. <input type="text">:
<input> element of type "text" are used to define a single-line input text field.
Example:
<!DOCTYPE html>
<html>
<body>
<h3>Input "text" type:</h3>
<form>
<label>Enter first name</label><br>
<input type="text" name="firstname"><br><br>
<label>Enter last name</label><br>
<input type="text" name="lastname"><br>
<p>Note:The default maximum character lenght is 20 </p>
</form>
</body>
</html>

Output:

2. Textarea
The HTML <textarea> tag is used to define a multi-line text input control.
It can hold unlimited number of characters and the texts are displayed in a fixed-width font
(usually courier).

Output:

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Form and Event Handling

3. <input type="button">:
The <input> type "button" defines a simple push button, which can be programmed to control a functionally on
any event such as, click event.

Example:
<!DOCTYPE html>
<html>
<body>
<h2>The button Element</h2>
<input type="button" value= "ClickMe!" onclick="alert('Hello World!')">
</body>
</html>

Output:

4. <input type="submit">:
The <input> element of type "submit" defines a submit button to submit the form to the server when the "click"
event occurs.
Example:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form>
<label>Enter User name</label><br>
<input type="text" name="firstname"><br>
<label>Enter Password</label><br>
<input type="Password" name="password"><br>
<br><input type="submit" value="submit">
</form>
</body>
</html>

Output:

After clicking on submit button, this will submit the form to server and will redirect the page
to action value.

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Form and Event Handling

5. <input type="radio">:
The <input> type "radio" defines the radio buttons, which allow choosing an option between a
set of related options. At a time only one radio button option can be selected at a time.
 Using input type="radio" we can place radio button on the web page.
 We can create a group of some radio button component.

<!DOCTYPE html>
<html>
<body>
<h2>Radio Buttons</h2>
<form>
<h3>Select your gender</h3>
<input type="radio" id="male" name="gender" >
<label>Male</label><br>
<input type="radio" id="female" name="gender">
<label>Female</label><br>
<input type="radio" id="other" name="gender">
<label>Other</label>
<br><br>
<h3>Select your favourite color</h3>
<input type="radio" id="green" name="color">
<label>Green</label><br>
<input type="radio" id="orange" name="color" >
<label>Orange</label><br>
<input type="radio" id="white" name="color" >
<label>White</label>
</form>
</body>
</html>

Output:

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Form and Event Handling

6. <input type="checkbox">:
The <input> type "checkbox" are displayed as square boxes which can be checked or unchecked to select the choices
from the given options.
Note: The "radio" buttons are similar to checkboxes, but there is an important difference
between both types: radio buttons allow the user to select only one option at a time, whereas
checkbox allows a user to select zero to multiple options at a time.

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h2>Checkboxes</h2>
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br><br>
<input type="submit" value="Submit" onclick="alert('form submitted')">
</form>
</body>
</html>

Output:

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Form and Event Handling

7. Select element
The <select> element is used to create a drop-down list.
The <select> element is most often used in a form, to collect user input.
The name attribute is needed to reference the form data after the form is submitted (if you omit
the name attribute, no data from the drop-down list will be submitted).
The id attribute is needed to associate the drop-down list with a label.
The <option> tags inside the <select> element define the available options in the drop-down list.

<!DOCTYPE html>
<html>
<body>
<h1>The select element</h1>
<p>The select element is used to create a drop-down list.</p>
<form>
<label>Choose a car:</label>
<select name="cars" id="cars">
<option value="Maruti">Maruti</option>
<option value="BMW">BMW</option>
<option value="Lexus">Lexus</option>
<option value="Audi">Audi</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

Output:

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Form and Event Handling

8. <input type="email">
The <input type="email"> defines a field for an e-mail address.
The input value is automatically validated to ensure it is a properly formatted e-mail address.
To define an e-mail field that allows multiple e-mail addresses, add the "multiple" attribute.

9. <input type="password">
<input> elements of type password provide a way for the user to securely enter a password.
The element is presented as a one-line plain text editor control in which the text is masked so
that it cannot be read, usually by replacing each character with a symbol such as the asterisk
("*") or a dot ("•").

</head>
<body>
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd" minlength="6" maxlength="8"><br><br>
<input type="submit" value="SignIn" >
</form>
</body>
</html>

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Form and Event Handling

10. <input type="reset">

The <input type="reset"> defines a reset button which resets all form values to its initial
values.

<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email"><br><br>

<label for="pin">Enter a PIN:</label>

<input type="reset" value="Reset" onclick="alert('Reset Values')">

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Form and Event Handling

Program to use all elements

<!DOCTYPE html>
<html>
<body>
<form>
<label for="T1">First Name :</label><br>
<input type="text" name="First Name" id="T1"><br><br>
<label for="T2">Middle Name :</label><br>
<input type="text" name="Middle Name" id="T2"><br><br>
<label for="T3">Last Name :</label><br>
<input type="text" name="Last Name" id="T3"><br><br>
<label for="T1">Phone Number :</label><br>
<input type="text" name="phone" id="T4" minlength="10" maxlength="10" size="10"/> <br> <br>

Select Gender<br>
<input type="radio" name="gender" value="Male" id="R1">
<label for="R1">Male</label><br>
<input type="radio" name="gender" value="Female" id="R2">
<label for="R2">Female</label><br>
<input type="radio" name="gender" value="Other" id="R3">
<label for="R3">Other</label><br><br>

<label>Select Year</label>
<select name="Year" id="S1">
<option value="FY">FY</option>
<option value="SY">SY</option>
<option value="TY">TY</option>
</select><br><br>

<label>Select Subjects of this semester</label><br>

<input type="checkbox" name="Subjects" id="C1" value="JavaScript">
<label for="C1">JavaScript</label><br>
<input type="checkbox" name="Subjects" id="C2" value="OSY">
<label for="C2">OSY</label><br>
<input type="checkbox" name="Subjects" id="C3" value="STE">
<label for="C3">STE</label><br>
<input type="checkbox" name="Subjects" id="C4" value="AJP">
<label for="C4">AJP</label><br><br>

<label>Address</label><br>
<textarea name="Address" rows="5" cols="20"></textarea><br><br>
<label for="E1">Eamil ID</label><br>
<input type="email" name="Email Id" id="E1"><br><br>
<label for="P1">Password</label><br>
<input type="Password" name="Password"><br><br>
<input type="Submit" name="Register" value="Register" onsubmit="alert('Form submitted
Successfully')">
<input type="reset" name="Resset" value="Reset" onclick="alert('Form Reset')">
</form>
</body>
</html>

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Form and Event Handling

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Form and Event Handling

 getElementById ( ) Method
The getElementById() method returns the element that has the ID attribute with the specified
value.
This method is one of the most common methods in the HTML, and is used almost every time
you want to manipulate, or get info from, an element on your document.
Returns null if no elements with the specified ID exists.
An ID should be unique within a page. However, if more than one element with the specified ID
exists, the getElementById() method returns the first element in the source code.

Syntax
getElementById(T1)

Example 1:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to change the color of button.</p>
<input type="button" id="b1" value="click" onclick="myFunction()">
<script>
function myFunction()
{
document.getElementById("b1").style.background = "red";
}
</script>
</body>
</html>

Output:

 innerHTML property

Each HTML element has an innerHTML property that defines both the HTML code and the text
that occurs between that element’s opening and closing tag.
By changing element’s innerHTML after some user interaction, we can make much more
interactive pages.
For this, we must give some id to the element and then place that id in getElementById
function.

Example :

<!DOCTYPE html>
<html>
<body>

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Form and Event Handling

<form>
<p id="demo">Click the button to change the text in this paragraph.</p>
<input type="button" name="Try it" onclick="myFunction()" value="Try it">
</form>
<script>

function myFunction()
{
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</body>
</html>

Output:

When you clicks on Try it button, text changes to Hello World.

FORM EVENTS
Event is something that causes JavaScript to execute the code.
JavaScript's interaction with HTML is handled through events that occur when the user or the
browser manipulates a page.
When the page loads, it is called an event.
When the user clicks a button, that click too is an event.
Other examples include events like pressing any key, closing a window, resizing a window, etc.

Event Handler:
Each available event has an event handler, which is a block of code (usually a JavaScript
function) that runs when the event fires.
Execution of appropriate code on occurrence of event is called event handling.

Form Events:
1. onfocus
2. onchange
3. onblur
4. onselect

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Form and Event Handling

1. onfocus

The onfocus event occurs when an element gets focus.

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function myFunction()
{

alert('Use Capital Letters');

}
</script>
<label for "T1"> Enter Name</label>
<input type="text" name="T1" id="T1" onfocus="myFunction()">
</body>
</html>

Example 2:

<!DOCTYPE html>
<html>
<body>
<p>When the input field gets focus, a function is triggered which changes the background-
color.</p>
Enter your name:
<input id="t1" type="text" onfocus="myFunction()">
<script>
function myFunction()
{
document.getElementById("t1").style.background = "yellow";
}
</script>
</body>
</html>
Output:

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Form and Event Handling

 onselect
Execute a JavaScript after some text has been selected in an <input> element:
Supported HTML tags: <input type="file">, <input type="password">, <input
type="text">, and <textarea>

Example:
<!DOCTYPE html>
<html>
<body>

Some text:
<input type="text" value="Select Some Text" onselect="myFunction()">
<script>
function myFunction()
{
alert("You have selected some text!");
}
</script>
</body>
</html>

Output

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Form and Event Handling

 onchange
Example 1:
<!DOCTYPE html>
<html>
<body>

<p>Modify the text in the input field, then click outside the field to fire the onchange event.
</p>

Enter some text:

</body>
</html>

Output:

Example 2:
<!DOCTYPE html>
<html>
<body>
<p>This example demonstrates how to assign an "onchange" event to an input element.</p>
Enter your name:
<input type="text" id="fname" onchange="myFunction()">
<p>When you leave the input field, a function is triggered which transforms the input text to
upper case.</p>
<script>
function myFunction()
{
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</body>
</html>

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Form and Event Handling

Output:

 onblur
The onblur event occurs when an object loses focus.
The onblur event is the opposite of the onfocus event.

<!DOCTYPE html>
<html>
<body>
<p>Write something in the input field, and then click outside the field to lose focus (blur).</p>
<input type="text" id="fname" onblur="myFunction()" >
<script>
function myFunction()
{
alert("Input field lost focus.");
}
</script>

</body>
</html>

 mouseover and mouseout events

Example1: mouseover and mouseout events

<html>
<head>
<h1> Javascript Events </h1>
<h2 onmouseover="mouseoverevent()" onmouseout="onmouseoutevent()"> Keep cursor over
me</h2>

</head>
<body>

<script language="Javascript" type="text/Javascript">

function mouseoverevent()
{
alert("Welcome to Spc");
}
function onmouseoutevent()
{
alert("Welcome Spc World");
}

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Form and Event Handling

</script>
</body>
</html>

Output:

Example2: mouseover and mouseout events

<!DOCTYPE html>
<html>
<body>
<p>This example demonstrates how to assign red color when the mouse is over Register
button and assign Green color when the mouse is moved out from Register button </p>

<input type="button" id="b1" value ="register" onmouseover="mouseOver()"

onmouseout="mouseOut()">
<script>
function mouseOver()
{
document.getElementById("b1").style.color = "Red";
}
function mouseOut()
{
document.getElementById("b1").style.color = "Green";
}
</script>
</body>
</html>

Output

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Form and Event Handling

 onmouseup and onmousedown Event

<!DOCTYPE html>
<html>
<body>

<p id="myP" onmousedown="mouseDown()" onmouseup="mouseUp()">

Click the text! When the mouse button is pressed down over this paragraph, it sets the color of
the text to red. When the mouse button is released, it sets the color of the text to green.
</p>

function mouseUp()
{
document.getElementById("myP").style.color = "green";
}
</script>

</body>
</html>

Output:

 onmousemove
<html>
<head>
<script>
function sayHello() {
alert("You are moving the mouse")
}
</script>
</head>
<body>
<p> When you move cursor inside textarea, it gves alert</p>
<label>Comment</label>
<textarea name="Comment" onmousemove = "sayHello()">
</textarea>
</body>
</html>

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Form and Event Handling

Key Events

onkeyup
This event occurs when the user has released the key. It will occur even if the key released
does not produce a character value.

<!DOCTYPE html>
<html>
<body>

<p>A function is triggered when the user releases a key in the input field. The function
transforms the character to upper case.</p>
Enter your name: <input type="text" id="fname" onkeyup="myFunction()">
<script>
function myFunction()
{
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</body>
</html>

Output:

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Form and Event Handling

 onkeydown
This event occurs when the user has pressed down the key. It will occur even if the key pressed
does not produce a character value.
<!DOCTYPE html>
<html>
<body>

<p>A function is triggered when the user is pressing a key in the input field.</p>
<input type="text" onkeydown="myFunction()">
<script>
function myFunction()
{
alert("You pressed a key inside the input field");
}
</script>

</body>
</html>

Output:

 onkeypress
This event occurs when the user presses a key that produces a character value. These include
keys such as the alphabetic, numeric, and punctuation keys. Modifier keys such as ‘Shift’,
‘CapsLock’, ‘Ctrl’ etc. do not produce a character, therefore they have no ‘keypress’ event
attached to them.

<!DOCTYPE html>
<html>
<body>
<p>A function is triggered when the user is pressing a key in the input field.</p>
<input type="text" onkeypress="myFunction()">
<script>
function myFunction() {
alert("You pressed a key inside the input field");
}
</script>
</body>
</html>
Output:

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Form and Event Handling

Changing attribute values dynamically

In javascript, we can change the value of any elements dynamically.
For example: If element is loaded with default value at the time of page load, then the values can be
changed at runtime and we can notify to user about the modification of form element by alert.
The onchange event occurs when the user changes value of an element.

Example 1:
<!DOCTYPE html>
<html>
<body>

<p>Modify the text in the input field, then click outside the field to fire the onchange
event.</p>

Enter some text:

</body>
</html>

Output:

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Form and Event Handling

Changing Option List Dynamically

Example 1
<html>
<head>
<p>Change option List according to User Selection </p>
<script language ="javascript" type="text/javascript">
function DisplayList(ElementValue)
{
with (document.forms.frm1)
{
if (ElementValue == 1)
{
op1[0].text = "WPD"
op1[0].value = 1
op1[1].text = "PIC"
op1[1].value = 2
op1[2].text = "Maths"
op1[2].value = 3
}
if (ElementValue == 2)
{
op1[0].text = "OOP"
op1[0].value = 1
op1[1].text = "DSU"
op1[1].value = 2
op1[2].text = "DBMS"
op1[2].value = 3
}
}
}
</script>
</head>
<body>
<form name="frm1">
<select name="op1" size="3">
<option Value=1> WPD
<option Value=2>PIC
<option Value=3>Maths
</select>
<br>
<input type="radio" name="subjects" checked="true" value=1 onclick =
"DisplayList(this.value)"> First Year
<input type="radio" name="subjects" value=2 onclick="DisplayList(this.value)">Second Year
<br>
<input name="Submit" value="Submit" type="submit">
</form>
</body>
<html>

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Form and Event Handling

Output:

Q] 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 option list should
present only fruits names to the user & when user select vegetable radio button option
list should present only vegetable 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";

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Form and Event Handling

optionList[2].value=3;
}
}
}
</script>
</head>
<body>
<form name="myform" action="" method="post">
<p>
<select name="optionList">
<option value="1">Mango</option>
<option value="2">Banana</option>
<option value="3">Apple</option>
</select>
<br><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="Submit" value="Submit" type="submit">
</p>
</form>
</body>
</html>

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Form and Event Handling

 Evaluating Checkbox Selection

<html>
<head>
<title>Evaluating Checkboxes</title>
<h3>Select the subjects</h3>
<script language="Javascript" type="text/javascript">
function show()
{
var x='You Selected '
with (document.forms.frm1)
{
if (a.checked == true)
{
x+=a.value + " "
}
if (b.checked == true)
{
x+=b.value + " "
}
if (c.checked == true)
{
x+=c.value + " "
}
if (d.checked == true)
{
x+=d.value + " "
}
if (e.checked == true)
{
x+=e.value + " "
}
}
document.write(x)
}
</script>
</head>
<body>
<form name="frm1" action="" method="post">
<P>
<input type="checkbox" name="a" value="PIC">C
<br>
<input type="checkbox" name="b" value="C++">C++
<br>
<input type="checkbox" name="c" value="java">JAVA
<br>
<input type="checkbox" name="d" value="php">PHP
<br>
<input type="checkbox" name="e" value="jscript">JAVASCRIPT
<br><br>

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Form and Event Handling

<input type="reset" name="r1" value="Show" onclick="show()" >

</P>
</form>
</body>
</html>

Output:

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Form and Event Handling

 Changing a label dynamically

<html>
<head>
<title>Changing Labels</title>
<script language="Javascript" type="text/javascript">
function show(ElementValue)
{
with (document.forms.frm1)
{
if (ElementValue == 'State')
{
b1.value = 'City'
op1[0].text = 'Maharshtra'
op1[0].value = 1
op1[1].text = 'Gujarat'
op1[1].value = 2
op1[2].text = 'Andra Pradesh'
op1[2].value = 3
}
if (ElementValue == 'City')
{
b1.value = 'State'
op1[0].text = 'Ahmednagar'
op1[0].value = 1
op1[1].text = 'Pune'
op1[1].value = 2
op1[2].text = 'Mumbai'
op1[2].value = 3
}
}
}
</script>
</head>
<body>
<form name="frm1">
<select name="op1" size="3">
<option value=1>Maharashtra
<option value=2>Gujarat
<option value=3>Andra Pradesh
</select>
<br><br>
<input name="Submit" value="Submit" type="submit">
<input type="reset" name="b1" value="City" onclick="show(this.value)">
</form>
</body>
</html>

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Form and Event Handling

Manipulating form elements

<html>
<head>
<script language="Javascript" type="text/javascript">
function addEmail()
{
with (document.forms.myform)
{
if (Fname.value.length > 0 && Lname.value.length > 0 )
{
Email.value = Fname.value.charAt(0)+ Lname.value +'@xyz.com';
document.write(Email.value)
}
}
}
</script>
</head>
<body>
<form name="myform" action="" method="post">
First Name: <input type="text" name="Fname"> <br>
Last Name: <input type="text" name="Lname"><br>
Email: <input type="hidden" name= "Email" id="T1"><br>
<input name="submit" value="submit" type="button" onclick="addEmail()">
</form>
</body>
</html></html>

Output

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Form and Event Handling

 Disabling Elements
1. Disabled form fields or elements values don’t post to the server for processing.
2. Disabled form fields or elements don’t get focus.
3. Disabled form fields or elements are skipped while tab navigation.

<html>
<head>
<script language="Javascript" type="text/javascript">
function disable()
{
document.forms.myform.Fname.disabled=true;
}
function enable()
{
document.forms.myform.Fname.disabled=false;
}
</script>
</head>
<body>
<form name="myform" action="" method="post">
First Name: <input type="text" name="Fname">
<input type="button" name="b1" value="Disable" onclick="disable()">
<input type="button" name="b2" value="Enable" onclick="enable()">
</form>
</body>
</html>

OUTPUT

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Form and Event Handling

 Read Only Elements

Read Only form fields or elements values post to the server for processing.
Read Only form fields or elements get focus.
Read Only form fields or elements are included while tab navigation.

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function readonly()
{
document.forms.frm1.Fname.readOnly=true;
}
</script>
</head>
<body>
<form name="frm1">
Enter Name <input type="text" name="Fname">
<input type="button" name="b1" value= "Read Only" onclick="readonly()">
</form>
</body>
</html>

Output

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Iso 19078 2013
No ratings yet
Iso 19078 2013
12 pages
HTML Forms: The Element
100% (2)
HTML Forms: The Element
9 pages
Unit 3
No ratings yet
Unit 3
32 pages
Unit 3_41661511_2024_10_24_08_54
No ratings yet
Unit 3_41661511_2024_10_24_08_54
39 pages
HTML Forms
No ratings yet
HTML Forms
44 pages
Unit3 Part1 Notes Javascript_ajax
No ratings yet
Unit3 Part1 Notes Javascript_ajax
24 pages
WIDT UNIT-II
No ratings yet
WIDT UNIT-II
47 pages
HTML Form
No ratings yet
HTML Form
37 pages
web programming lecture 2
No ratings yet
web programming lecture 2
25 pages
chapter-IV(forms)
No ratings yet
chapter-IV(forms)
15 pages
HTML Forms
No ratings yet
HTML Forms
21 pages
YBS Unit III Form & Event Handling-1
No ratings yet
YBS Unit III Form & Event Handling-1
92 pages
Grade 10 HTML Program
No ratings yet
Grade 10 HTML Program
3 pages
javascript
No ratings yet
javascript
12 pages
Unit-3 Form and Event Handling
No ratings yet
Unit-3 Form and Event Handling
74 pages
form-css-javascript 4 student
No ratings yet
form-css-javascript 4 student
79 pages
form-css-javascript part1
No ratings yet
form-css-javascript part1
61 pages
yahxee 5th class
No ratings yet
yahxee 5th class
27 pages
HTML Forms
No ratings yet
HTML Forms
45 pages
Class-5A-HTMLForm Elements-Form Attributes
No ratings yet
Class-5A-HTMLForm Elements-Form Attributes
15 pages
HTMLForm 3
No ratings yet
HTMLForm 3
32 pages
UNIT 5-NME NOTES - F
No ratings yet
UNIT 5-NME NOTES - F
15 pages
Unit - II(Widt) Pre
No ratings yet
Unit - II(Widt) Pre
40 pages
HTML Forms: The Element
No ratings yet
HTML Forms: The Element
5 pages
Lab Objective:: HTML Introduction
No ratings yet
Lab Objective:: HTML Introduction
6 pages
SHORT NOTES FORM CONTROLS - FORM TAGS, FORM ATTRIBUTES
No ratings yet
SHORT NOTES FORM CONTROLS - FORM TAGS, FORM ATTRIBUTES
3 pages
CSS Unit 03
No ratings yet
CSS Unit 03
52 pages
wt2
No ratings yet
wt2
7 pages
Unit - 2
No ratings yet
Unit - 2
14 pages
Imput Form Attribute HTML
No ratings yet
Imput Form Attribute HTML
6 pages
Chapter 3
No ratings yet
Chapter 3
90 pages
WT & E-Commerce UNIT III
No ratings yet
WT & E-Commerce UNIT III
10 pages
Web Programming Unit-1 Notes
No ratings yet
Web Programming Unit-1 Notes
85 pages
02 HTML - Intermediate Part I
No ratings yet
02 HTML - Intermediate Part I
10 pages
HTML Forms With PHP
No ratings yet
HTML Forms With PHP
19 pages
HTML FORMS, Frame PDF
No ratings yet
HTML FORMS, Frame PDF
29 pages
HTML Forms
No ratings yet
HTML Forms
8 pages
Element of Commercial Portal Unit I
No ratings yet
Element of Commercial Portal Unit I
38 pages
HTML Forms
No ratings yet
HTML Forms
95 pages
Conquer Forms With HTML5 and CSS3
No ratings yet
Conquer Forms With HTML5 and CSS3
96 pages
Lesson 6 Modified
No ratings yet
Lesson 6 Modified
11 pages
CSS SOLVED PR
No ratings yet
CSS SOLVED PR
8 pages
CSS Chapter 3Notes
No ratings yet
CSS Chapter 3Notes
20 pages
Form Element HTML
No ratings yet
Form Element HTML
8 pages
CSS Lec-15 Ch-3 Forms and Event Handling.627cc73
No ratings yet
CSS Lec-15 Ch-3 Forms and Event Handling.627cc73
5 pages
Htmlforms-Lecture 3
No ratings yet
Htmlforms-Lecture 3
65 pages
Web Technology
No ratings yet
Web Technology
19 pages
Frames
No ratings yet
Frames
32 pages
3.1 Form and Event Handling
No ratings yet
3.1 Form and Event Handling
6 pages
HTML Forms: The Element
No ratings yet
HTML Forms: The Element
10 pages
2HTML_Forms_latest1 (1)
No ratings yet
2HTML_Forms_latest1 (1)
55 pages
HTML Forms: The Element
No ratings yet
HTML Forms: The Element
6 pages
Html forms
No ratings yet
Html forms
20 pages
HTML Forms PDF
No ratings yet
HTML Forms PDF
12 pages
HTML Forms
No ratings yet
HTML Forms
28 pages
Forms
No ratings yet
Forms
9 pages
HTML Forms
No ratings yet
HTML Forms
9 pages
HTML Forms
No ratings yet
HTML Forms
9 pages
Cat 2 Revison Ai and Robotics SS1
No ratings yet
Cat 2 Revison Ai and Robotics SS1
17 pages
Client Side Web Development For Beginners (HTML/CSS/JS)
From Everand
Client Side Web Development For Beginners (HTML/CSS/JS)
Maks Uri
4/5 (1)
12
No ratings yet
12
6 pages
CPP_REPORT
No ratings yet
CPP_REPORT
16 pages
CSS CH-5 Updated
No ratings yet
CSS CH-5 Updated
16 pages
CSS CH-4 Updated
No ratings yet
CSS CH-4 Updated
15 pages
Android Slip
No ratings yet
Android Slip
221 pages
Flexy Multiradio - Descripción de Tarjetas
No ratings yet
Flexy Multiradio - Descripción de Tarjetas
8 pages
A00054 HDS USP-V Full-Disclosure
No ratings yet
A00054 HDS USP-V Full-Disclosure
98 pages
Tinanium Anodising Space PDF
No ratings yet
Tinanium Anodising Space PDF
7 pages
William Brown, Librarian and Ex-Criminal
No ratings yet
William Brown, Librarian and Ex-Criminal
4 pages
BAC Resolution Covid Supply
No ratings yet
BAC Resolution Covid Supply
2 pages
FV 4030 Challenger I Main Battle Tank
No ratings yet
FV 4030 Challenger I Main Battle Tank
3 pages
Dna
No ratings yet
Dna
5 pages
Saif-Book Review-2
No ratings yet
Saif-Book Review-2
5 pages
Monasteries of Achaia
No ratings yet
Monasteries of Achaia
49 pages
25 Basic Linux Commands for Beginners - GeeksforGeeks
No ratings yet
25 Basic Linux Commands for Beginners - GeeksforGeeks
37 pages
TIỂU LUẬN NHÓM - NHÓM 5 - SÁNG THỨ 3
No ratings yet
TIỂU LUẬN NHÓM - NHÓM 5 - SÁNG THỨ 3
11 pages
ECE MCQs 2. Building Materials 1
No ratings yet
ECE MCQs 2. Building Materials 1
21 pages
SolaNOVA 65 Selfcontained
No ratings yet
SolaNOVA 65 Selfcontained
2 pages
P1 Chp10 TrigIdentitiesAndEquations 2
No ratings yet
P1 Chp10 TrigIdentitiesAndEquations 2
28 pages
Macro Social Work Practice Advocacy in Action 1st Edition Carolyn J Tice Dennis D Long Lisa E Cox - Download the ebook today and own the complete content
No ratings yet
Macro Social Work Practice Advocacy in Action 1st Edition Carolyn J Tice Dennis D Long Lisa E Cox - Download the ebook today and own the complete content
73 pages
FA - Yoghurt.1 EN
No ratings yet
FA - Yoghurt.1 EN
3 pages
Abortion Presentation
80% (5)
Abortion Presentation
23 pages
Shaldon Chogdu
No ratings yet
Shaldon Chogdu
1 page
ANAMANAGUCHI (FEAT. MIKU) - Miku Hatsune (Impresión)
No ratings yet
ANAMANAGUCHI (FEAT. MIKU) - Miku Hatsune (Impresión)
1 page
SFG 2024 Level2 - v3 - Updated Schedule 2
No ratings yet
SFG 2024 Level2 - v3 - Updated Schedule 2
10 pages
Prestressing Force 1
No ratings yet
Prestressing Force 1
44 pages
Broas CE152P-2 A71 Experiment6 Module2
No ratings yet
Broas CE152P-2 A71 Experiment6 Module2
8 pages
ML555 Development Kit For PCI and PCI Express Designs
No ratings yet
ML555 Development Kit For PCI and PCI Express Designs
108 pages
NCP For Vomiting
No ratings yet
NCP For Vomiting
3 pages
How To Export Gerber Files From Eagle
No ratings yet
How To Export Gerber Files From Eagle
15 pages
Police Report Writing
No ratings yet
Police Report Writing
25 pages
Lesson 4 Data Collection in Qualitative Research
No ratings yet
Lesson 4 Data Collection in Qualitative Research
28 pages
Erico - Lenton Couplers
No ratings yet
Erico - Lenton Couplers
2 pages

CSS CH-3 Updated

Uploaded by

CSS CH-3 Updated

Uploaded by

Form and Event Handling

The typical form looks like this.

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

HTML Form Attributes

2. The Action Attribute

3. The Method Attribute

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

 HTML Form Input Types

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Use <select> with <optgroup> tags:

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

10. <input type="reset">

<label for="pin">Enter a PIN:</label>

<input type="reset" value="Reset" onclick="alert('Reset Values')">

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Program to use all elements

<label>Select Subjects of this semester</label><br>

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

When you clicks on Try it button, text changes to Hello World.

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

The onfocus event occurs when an element gets focus.

alert('Use Capital Letters');

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Enter some text:

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

 mouseover and mouseout events

<script language="Javascript" type="text/Javascript">

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Example2: mouseover and mouseout events

<input type="button" id="b1" value ="register" onmouseover="mouseOver()"

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

 onmouseup and onmousedown Event

<p id="myP" onmousedown="mouseDown()" onmouseup="mouseUp()">

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Changing attribute values dynamically

Enter some text:

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Changing Option List Dynamically

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

 Evaluating Checkbox Selection

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

<input type="reset" name="r1" value="Show" onclick="show()" >

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

 Changing a label dynamically

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Manipulating form elements

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

 Read Only Elements

Client Side Scripting (Unit 3) -By Yash Sawant (TYCO)

You might also like