0% found this document useful (0 votes)

6 views39 pages

Unit 3_41661511_2024_10_24_08_54

The document provides an overview of HTML forms, including their structure, attributes, and various input types such as text boxes, buttons, radio buttons, checkboxes, and dropdowns. It explains how to create forms using HTML and JavaScript, detailing attributes like 'action', 'method', and 'onsubmit'. Additionally, it discusses the differences between GET and POST methods for form submission, along with examples of form controls and their usage.

Uploaded by

giteanuja09

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

6 views39 pages

Unit 3_41661511_2024_10_24_08_54

Uploaded by

giteanuja09

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 39

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> </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) Arrow Computer Academy

 form name="myform"

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

 action=""
The action attribute 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 the
button. 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) Arrow Computer Academy

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></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) Arrow Computer Academy

 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:

Client Side Scripting (Unit 3) Arrow Computer Academy

2. Textarea
The <textarea> tag defines a multi-line text input control.
The <textarea> element is often used in a form, to collect user inputs like comments or reviews.
The size of a text area is specified by the cols and rows attributes .

<!DOCTYPE html>
<html>
<body>
<h2>This program is of Textarea</h2>
<form>
<label>Enter Full Name</label>
<input type="text" name="Fname"><br><br>
<label>Enter Comments</label>
<textarea name="Coomments" rows="10" cols="50"></textarea>

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

Output:

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:

Client Side Scripting (Unit 3) Arrow Computer Academy

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.

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.
The radio group must have share the same name to be treated as a group.
 Using input type="radio" we can place radio button on the web page.
 We can create a group of some radio button component.
Note: The value attribute defines the unique value associated with each radio button. The value
is not shown to the user, but is the value that is sent to the server on "submit" to identify which
radio button that was selected.

Client Side Scripting (Unit 3) Arrow Computer Academy

<!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:

Checked attribute
A Boolean attribute which, if present, indicates that this radio button is the default
selected one in the group.

<input type="radio" id="male" name="gender" checked>

Client Side Scripting (Unit 3) Arrow Computer Academy

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:

checked attribute
If we want to select any checkbox by default, then we have to set the checked attribute with the
"yes" value as described in the following syntax:
<input type="checkbox" name="field name" value="Initial value" checked="yes">

Client Side Scripting (Unit 3) Arrow Computer Academy

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:

 size Attribute
The size attribute specifies the number of visible options in a drop-down list.
If the value of the size attribute is greater than 1, but lower than the total number of options in
the list, the browser will add a scroll bar to indicate that there are more options to view.
Eg:-

<select name="cars" id="cars" size="3">

Client Side Scripting (Unit 3) Arrow Computer Academy

Use <select> with <optgroup> tags:
<form>
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
</form>

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.

<input type="email" multiple>

The user can now enter one or more addresses separated by a comma.

Validation
Browsers that support the input type email provide validation support in different ways.
However, all browsers use a common validation algorithm following this pattern:
[email protected]
the minimum requirements are the @ and . symbols and a lack of spaces between the
characters.

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) Arrow Computer Academy

10. <input type="reset">
The <input type="reset"> defines a reset button which resets all form values to its initial
values.
reset buttons should be avoided in your form. It is frustrating for users if they click them by
mistake.

<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')">

 HTML <label > Tag

The <label> tag is used to specify a label for an <input> element of a form. It adds a label to a
form control such as text, email, password, textarea etc.

Syntax:
<label> form_content... </label>

for attribute
The for attribute specifies which form element a label is bound to.
The for attribute of <label> must be equal to the id attribute of the related element to bind them
together.
Example

Three radio buttons with labels:

<form>
<h3>Select your gender</h3>
<input type="radio" id="male" name="gender" >
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender">
<label for="other">Other</label>

</form>

Client Side Scripting (Unit 3) Arrow Computer Academy

Program to use all elements
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<label for="T1"> First Name</label><br>
<input type="text" name="FName" id="T1"><br><br>
<label for="T2"> Middle Name</label><br>
<input type="text" name="MName" id="T2"><br><br>
<label for="T3"> Last Name</label><br>
<input type="text" name="LName" id="T3"><br><br>
<label for="T4"> Phone Number</label><br>
<input type="text" name="Phone" id="T4"><br><br>
<label>Select Gender</label><br>
<input type="radio" name="Gender" id="R1" value="Male">
<label for="R1">Male</label><br>
<input type="radio" name="Gender" id="R2" value="Female">
<label for="R2">Female</label><br>
<input type="radio" name="Gender" id="R3" value="Other">
<label for="R3">Other</label><br><br>

<label for="S1">Select Year</label>

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

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

<label for="T5">Address</label><br>
<textarea name="Address" id="T5" rows="5" cols="10"></textarea><br><br>

<label for="E1">Email ID</label><br>

<input type="Email" name="EmailId" id="E1"><br><br>
<label for="P1">Password</label><br>
<input type="password" name="password" id="P1" minlength="6" maxlength="6"><br><br>
<input type="Submit" name="Register" value="Register" onclick="alert('Registered Succefully')">
<input type="reset" name="reset" value="Reset">
</form>
</body></html>

Client Side Scripting (Unit 3) Arrow Computer Academy

Client Side Scripting (Unit 3) Arrow Computer Academy
 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, (read or write) 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:

Example 2
<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>

Client Side Scripting (Unit 3) Arrow Computer Academy

 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>
<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.

Client Side Scripting (Unit 3) Arrow Computer Academy

FORM EVENTS
The change in the state of an object is known as an Event.
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.
Examples of events are page loads, clicks a mouse button, 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:
Events that occur when a user interacts with an HTML form are called JavaScript form events
1. onfocus
2. onchange
3. onblur
4. onselect
5. onsubmit
6. onreset

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>

Client Side Scripting (Unit 3) Arrow Computer Academy

<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:

2. 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) Arrow Computer Academy

3. onchange
The onchange event occurs when the value of an HTML element is changed.
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:

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) Arrow Computer Academy

Output:

4. 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>

5. onsubmit
The onsubmit attribute fires when a form is submitted.
<!DOCTYPE html>
<html>
<body>

<p>When you submit the form, a function is triggered which alerts some text.</p>

<form onsubmit="myFunction()">
Enter name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

</body>
</html>

Client Side Scripting (Unit 3) Arrow Computer Academy

6. onreset
The onreset attribute fires when a form is reset.
<!DOCTYPE html>
<html>
<body>

<p>When you reset the form, a function is triggered which alerts some text.</p>

<form onreset="myFunction()">
Enter name: <input type="text">
<input type="reset">
</form>

</body>
</html>

Client Side Scripting (Unit 3) Arrow Computer Academy

Program with all Form Events:-
<html>
<body>

<form onreset="function5()">
Enter name: <input type="text" id="T1" onfocus="function1()" onblur="function2()"
onchange="function3()" onselect="function4(this.value)">
<input type="reset">
</form>

Client Side Scripting (Unit 3) Arrow Computer Academy

 MOUSE EVENT
1. onclick
The onclick attribute fires on a mouse click on the element.
<html>
<body>
<p id="demo" onclick="myFunction()">Click me to change my text color.</p>
<script>
function myFunction()
{
document.getElementById("demo").style.color = "red";
}
</script>
</body>
</html>

2. mouseover and mouseout events

The onmouseover attribute fires when the mouse pointer moves over an element.
The onmouseout attribute fires when the mouse pointer moves out of an element.
<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 Arrow Computer Academy");
}
function onmouseoutevent()
{
alert("Welcome Arrow World");
}
</script>
</body>
</html>

Output:

Client Side Scripting (Unit 3) Arrow Computer Academy

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) Arrow Computer Academy

3. onmouseup and onmousedown Event
The onmouseup event occurs when a mouse button is released over an element.
The onmousedown event occurs when a user presses a mouse button over an HTML element.

<!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>

</body>
</html>

Output:

Client Side Scripting (Unit 3) Arrow Computer Academy

4. 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) Arrow Computer Academy

Key Events
1. 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:

2. 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:

Client Side Scripting (Unit 3) Arrow Computer Academy

3. 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.

<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) Arrow Computer Academy

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) Arrow Computer Academy

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) Arrow Computer Academy

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) Arrow Computer Academy

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) Arrow Computer Academy

 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>
<input type="reset" name="r1" value="Show" onclick="show()" >

Client Side Scripting (Unit 3) Arrow Computer Academy

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

Output:

Client Side Scripting (Unit 3) Arrow Computer Academy

 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) Arrow Computer Academy

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) Arrow Computer Academy

 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) Arrow Computer Academy

 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

Intrinsic JavaScript Functions

 An intrinsic function (or built-in function) is a function (subroutine) available for use in a
given programming language whose implementation is handled specially by the compiler.
 “Intrinsic” is also called as “built-in”.

isNaN() method determines whether value of a variable is a legal number or not.

For example
document.write(isNan(0)); //false
document.write(isNan('JavaScript')); // true

eval()
eval() is used to execute Javascript source code.
It evaluates or executes the argument passed to it and generates output.
For example
eval("var number=2;number=number+2;document.write(number)"); //4

Number()
Number() method takes an object as an argument and converts it to the corresponding number
value.
Return Nan (Not a Number) if the object passed cannot be converted to a number

Client Side Scripting (Unit 3) Arrow Computer Academy

For example

var obj1=new String("123");

var obj2=new Boolean("false");
var obj3=new Boolean("true");

document.write(Number(obj1)); // 123
document.write(Number(obj2)); // 0
document.write(Number(obj3)); // 1

String()
 String() function converts the object argument passed to it to a string value.

parseInt()
 parseInt() function takes string as a parameter and converts it to integer.
For example
document.write(parseInt("45")); // 45
document.write(parseInt("85 days")); // 85
document.write(parseInt("this is 9")); // NaN

parseFloat()
 parseFloat() function takes a string as parameter and parses it to a floating point number.
For example
document.write(parseFloat("15.26")); // 15.26
document.write(parseFloat("15 48 65")); // 15
document.write(parseFloat("this is 29")); // NaN
document.write(pareFloat(" 54 ")); // 54

An intrinsic function is often used to replace the Submit button and the Reset button with your
own graphical images, which are displayed on a form in place of these buttons.

<html>
<head>
<title>Using Intrinsic JavaScript Functions</title>
</head>
<body>
<FORM name="contact" action=" " method="post">
<P>
First Name: <INPUT type="text" name="Fname"/> <BR>
Last Name: <INPUT type="text" name="Lname"/><BR>
Email: <INPUT type="text" name="Email"/><BR>
<img src="submit.jpg" height="40" width="40"
onclick="javascript:document.forms.contact.submit()"/>
<img src="reset.jpg" height="40" width="40"
onclick="javascript:document.forms.contact.reset()"/>
</P>
</FORM>
</body>
</html>

Client Side Scripting (Unit 3) Arrow Computer Academy

BSP For NDC
No ratings yet
BSP For NDC
2 pages
Unit 3
No ratings yet
Unit 3
32 pages
UNIT 5-NME NOTES - F
No ratings yet
UNIT 5-NME NOTES - F
15 pages
Introduction to HTML Forms
No ratings yet
Introduction to HTML Forms
13 pages
Unit 4 Forms
No ratings yet
Unit 4 Forms
37 pages
CSS CH-3 Updated
No ratings yet
CSS CH-3 Updated
32 pages
Introduction to html forms
No ratings yet
Introduction to html forms
14 pages
Unit 5 - Module 3: 5.3. HTML Forms
No ratings yet
Unit 5 - Module 3: 5.3. HTML Forms
12 pages
Lecture 3.2 HTML - Forms
No ratings yet
Lecture 3.2 HTML - Forms
50 pages
Chapter 3 Form and Event Handling
No ratings yet
Chapter 3 Form and Event Handling
15 pages
Lab Manual 03
No ratings yet
Lab Manual 03
19 pages
Prog8540 Week 12
No ratings yet
Prog8540 Week 12
29 pages
pdf and assignemnt\6th day form
No ratings yet
pdf and assignemnt\6th day form
22 pages
Forms and Frames in HTML Notes
No ratings yet
Forms and Frames in HTML Notes
17 pages
Chapter 2.part 2
No ratings yet
Chapter 2.part 2
75 pages
Hypertext Markup Language
No ratings yet
Hypertext Markup Language
43 pages
WT-HTML & XHTML - Forms-04
No ratings yet
WT-HTML & XHTML - Forms-04
32 pages
css notes 3rd
No ratings yet
css notes 3rd
24 pages
UNIT2 FormsCSS
No ratings yet
UNIT2 FormsCSS
17 pages
Lesson 7
No ratings yet
Lesson 7
30 pages
Working With Forms: The Form Element
No ratings yet
Working With Forms: The Form Element
5 pages
Futm-cpt112 - HTML 2
No ratings yet
Futm-cpt112 - HTML 2
26 pages
CSS Chapter 3Notes
No ratings yet
CSS Chapter 3Notes
20 pages
Web 4 Utpal
No ratings yet
Web 4 Utpal
17 pages
Microsoft Office
No ratings yet
Microsoft Office
33 pages
HTML Form Notes
No ratings yet
HTML Form Notes
14 pages
HTML FORMS, Frame PDF
No ratings yet
HTML FORMS, Frame PDF
29 pages
Chapter 4 Creating and Validating Forms
No ratings yet
Chapter 4 Creating and Validating Forms
41 pages
CSS Unit 3. Forms and Event Handling
No ratings yet
CSS Unit 3. Forms and Event Handling
38 pages
Chapter 3 Form and Event Handling
No ratings yet
Chapter 3 Form and Event Handling
45 pages
Introduction_To_Forms
No ratings yet
Introduction_To_Forms
29 pages
Html forms
No ratings yet
Html forms
20 pages
forms_html
No ratings yet
forms_html
18 pages
The Set School Computer HTML Forms Class Vii
No ratings yet
The Set School Computer HTML Forms Class Vii
8 pages
Material_cd02a502-c026-41df-859c-205a2b57c664
No ratings yet
Material_cd02a502-c026-41df-859c-205a2b57c664
74 pages
SHORT NOTES FORM CONTROLS - FORM TAGS, FORM ATTRIBUTES
No ratings yet
SHORT NOTES FORM CONTROLS - FORM TAGS, FORM ATTRIBUTES
3 pages
Part2in Unit1
No ratings yet
Part2in Unit1
40 pages
web tech-3rd--cse-- unit- III- FORM
No ratings yet
web tech-3rd--cse-- unit- III- FORM
16 pages
Week 7 8
No ratings yet
Week 7 8
19 pages
YBS Unit III Form & Event Handling-1
No ratings yet
YBS Unit III Form & Event Handling-1
92 pages
HTML Form Lecture Notes
No ratings yet
HTML Form Lecture Notes
9 pages
Class 8 Computer Science: HTML Table
No ratings yet
Class 8 Computer Science: HTML Table
35 pages
Info 2201 Client-Side Web Development: Lebanese University Faculty of Sciences - Section I BS-Computer Science
No ratings yet
Info 2201 Client-Side Web Development: Lebanese University Faculty of Sciences - Section I BS-Computer Science
39 pages
psdc-150 - Session 05
No ratings yet
psdc-150 - Session 05
17 pages
Unit-3 PHP
No ratings yet
Unit-3 PHP
27 pages
Q3_MODULE4_G10_PROGRAMMING_MANGALDAN-NHS-Final
No ratings yet
Q3_MODULE4_G10_PROGRAMMING_MANGALDAN-NHS-Final
11 pages
Topic 3 CSS
No ratings yet
Topic 3 CSS
30 pages
HTML Forms
No ratings yet
HTML Forms
17 pages
Learn HTML - Forms Cheatsheet - Codecademy
No ratings yet
Learn HTML - Forms Cheatsheet - Codecademy
6 pages
HTML Form
No ratings yet
HTML Form
4 pages
HTML Foam
No ratings yet
HTML Foam
28 pages
Html Forms
No ratings yet
Html Forms
43 pages
04 HTML Forms
No ratings yet
04 HTML Forms
19 pages
Unit III - Form and Event Handling
No ratings yet
Unit III - Form and Event Handling
21 pages
Htmlforms
No ratings yet
Htmlforms
12 pages
HTML Forms
No ratings yet
HTML Forms
11 pages
WE LAB 1 - 2k18 (Part 2) - 2
No ratings yet
WE LAB 1 - 2k18 (Part 2) - 2
11 pages
Chapter 4
No ratings yet
Chapter 4
34 pages
forms
No ratings yet
forms
17 pages
Unit 3
No ratings yet
Unit 3
24 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)
DWM Exp 7
No ratings yet
DWM Exp 7
4 pages
Unit_I_Introduction_and_Syntax_of_Python_Program[1]
No ratings yet
Unit_I_Introduction_and_Syntax_of_Python_Program[1]
21 pages
Unit 4_45256988_2024_10_24_08_54
No ratings yet
Unit 4_45256988_2024_10_24_08_54
18 pages
Chapter 4_44785485_2024_10_24_08_50
No ratings yet
Chapter 4_44785485_2024_10_24_08_50
13 pages
Open Cursor Reference
No ratings yet
Open Cursor Reference
2 pages
Arm Developments in HPC: CIUK 2018, Manchester
No ratings yet
Arm Developments in HPC: CIUK 2018, Manchester
29 pages
@classmethod in Python Class
No ratings yet
@classmethod in Python Class
6 pages
Unit 3 - Cloud Computing - WWW - Rgpvnotes.in
No ratings yet
Unit 3 - Cloud Computing - WWW - Rgpvnotes.in
11 pages
Azure Data Platform End2End - 2day
100% (2)
Azure Data Platform End2End - 2day
108 pages
Ciaat Brava 21E
No ratings yet
Ciaat Brava 21E
38 pages
MÔ HÌNH THỰC THỂ LIÊN KẾT
No ratings yet
MÔ HÌNH THỰC THỂ LIÊN KẾT
1 page
Level 1
No ratings yet
Level 1
50 pages
Learning Java 3rd Edition Covers J2SE 5 0 Patrick Niemeyer instant download
No ratings yet
Learning Java 3rd Edition Covers J2SE 5 0 Patrick Niemeyer instant download
56 pages
Material Requirements Planning: Bill of Materials (BOM) Scenario
100% (1)
Material Requirements Planning: Bill of Materials (BOM) Scenario
28 pages
Penjelasan Listing Program
No ratings yet
Penjelasan Listing Program
63 pages
The RWIMS - SNR Concept Information and Knowledge Management Taskforce
No ratings yet
The RWIMS - SNR Concept Information and Knowledge Management Taskforce
2 pages
Solution of Microprocessor Lab EEE - 410
No ratings yet
Solution of Microprocessor Lab EEE - 410
13 pages
user_guide_api_emissao_boletos_en
No ratings yet
user_guide_api_emissao_boletos_en
78 pages
8 Quiz Maker Automatic Quiz Generation From Text Using NLP
No ratings yet
8 Quiz Maker Automatic Quiz Generation From Text Using NLP
11 pages
Information and Network Security - PostQuiz - Attempt Review
No ratings yet
Information and Network Security - PostQuiz - Attempt Review
4 pages
R17 ES & IOT Syllabus
No ratings yet
R17 ES & IOT Syllabus
7 pages
Ronin M Quick Start Guide v1.6 en
No ratings yet
Ronin M Quick Start Guide v1.6 en
2 pages
Notes
No ratings yet
Notes
19 pages
Xpress Install Guide
No ratings yet
Xpress Install Guide
44 pages
PWP Practical No. 3
No ratings yet
PWP Practical No. 3
2 pages
az-104_7
No ratings yet
az-104_7
40 pages
Presentation of Robotic Locker
No ratings yet
Presentation of Robotic Locker
19 pages
Data Domain - Data Domain Legacy FRU Procedures-Legacy Models - ES20 Shelves-1
No ratings yet
Data Domain - Data Domain Legacy FRU Procedures-Legacy Models - ES20 Shelves-1
7 pages
Java Exp5 C28
No ratings yet
Java Exp5 C28
8 pages
M700-70 Navi Lathe-Ib1500146-C PDF
No ratings yet
M700-70 Navi Lathe-Ib1500146-C PDF
185 pages
Vigneshkumar - Sign Language Recognition
No ratings yet
Vigneshkumar - Sign Language Recognition
8 pages
logcat
No ratings yet
logcat
634 pages
Aol Download Free
No ratings yet
Aol Download Free
18 pages

Unit 3_41661511_2024_10_24_08_54

Uploaded by

Unit 3_41661511_2024_10_24_08_54

Uploaded by

Form

The typical form looks like this.

Client Side Scripting (Unit 3) Arrow Computer Academy

HTML Form Attributes

2. The Action Attribute

3. The Method Attribute

Client Side Scripting (Unit 3) Arrow Computer Academy

Client Side Scripting (Unit 3) Arrow Computer Academy

Client Side Scripting (Unit 3) Arrow Computer Academy

Client Side Scripting (Unit 3) Arrow Computer Academy

Client Side Scripting (Unit 3) Arrow Computer Academy

<input type="radio" id="male" name="gender" checked>

Client Side Scripting (Unit 3) Arrow Computer Academy

Client Side Scripting (Unit 3) Arrow Computer Academy

<select name="cars" id="cars" size="3">

Client Side Scripting (Unit 3) Arrow Computer Academy

<input type="email" multiple>

Client Side Scripting (Unit 3) Arrow Computer Academy

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

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

 HTML <label > Tag

Three radio buttons with labels:

Client Side Scripting (Unit 3) Arrow Computer Academy

<label for="S1">Select Year</label>

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

<label for="E1">Email ID</label><br>

Client Side Scripting (Unit 3) Arrow Computer Academy

Client Side Scripting (Unit 3) Arrow Computer Academy

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

Client Side Scripting (Unit 3) Arrow Computer Academy

Client Side Scripting (Unit 3) Arrow Computer Academy

Client Side Scripting (Unit 3) Arrow Computer Academy

Enter some text:

Client Side Scripting (Unit 3) Arrow Computer Academy

Client Side Scripting (Unit 3) Arrow Computer Academy

Client Side Scripting (Unit 3) Arrow Computer Academy

Client Side Scripting (Unit 3) Arrow Computer Academy

2. mouseover and mouseout events

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

Client Side Scripting (Unit 3) Arrow Computer Academy

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

Client Side Scripting (Unit 3) Arrow Computer Academy

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

Client Side Scripting (Unit 3) Arrow Computer Academy

Client Side Scripting (Unit 3) Arrow Computer Academy

Client Side Scripting (Unit 3) Arrow Computer Academy

Client Side Scripting (Unit 3) Arrow Computer Academy

Enter some text:

Client Side Scripting (Unit 3) Arrow Computer Academy

Client Side Scripting (Unit 3) Arrow Computer Academy

Client Side Scripting (Unit 3) Arrow Computer Academy

Client Side Scripting (Unit 3) Arrow Computer Academy

Client Side Scripting (Unit 3) Arrow Computer Academy

Client Side Scripting (Unit 3) Arrow Computer Academy

Client Side Scripting (Unit 3) Arrow Computer Academy

Client Side Scripting (Unit 3) Arrow Computer Academy

Client Side Scripting (Unit 3) Arrow Computer Academy

Intrinsic JavaScript Functions

isNaN() method determines whether value of a variable is a legal number or not.

Client Side Scripting (Unit 3) Arrow Computer Academy

var obj1=new String("123");

Client Side Scripting (Unit 3) Arrow Computer Academy

You might also like