Scribd
Upload
48 views5 pages

CSS Lec-15 Ch-3 Forms and Event Handling.627cc73

The document discusses HTML forms and event handling in client-side scripting. It defines forms as sections that contain elements to gather user input. Events are specific circumstances monitored by JavaScript, like loading a page or clicking a button. The document also describes form properties and methods, like getting form element values or resetting the form. HTML attributes like "action" and "method" are used to define form behavior.

Uploaded by

Gayatri Shimpi
Copyright
© © All Rights Reserved
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
48 views5 pages

CSS Lec-15 Ch-3 Forms and Event Handling.627cc73

The document discusses HTML forms and event handling in client-side scripting. It defines forms as sections that contain elements to gather user input. Events are specific circumstances monitored by JavaScript, like loading a page or clicking a button. The document also describes form properties and methods, like getting form element values or resetting the form. HTML attributes like "action" and "method" are used to define form behavior.

Uploaded by

Gayatri Shimpi
Copyright
© © All Rights Reserved
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/ 5

Course: Client Side Scripting, Prepared By: Atul Kabra, 9422279260

CSS Lecture-15
Topic: Chapter-3 HTML Forms And Event Handling

HTML Form :
 The <form> tag in HTML is used to create form for user input.

 There are many elements which are used within form tag. For example:
<input>, <textarea>, <button>, <select>, <option>, <optgroup>,
<fieldset>, <label>.

 Syntax:

<form> Form Content... </form>

 JavaScript form objects represent an HTML form. HTML forms are very
powerful tool for interacting with users.

 HTML form serve the purpose of collecting information provided by the


visitors, which is later sent back to the server.

Event :
 An event is a specific circumstance that is monitored by JavaScript and
that your script can respond to in some way.

HTML Events:
 An HTML event can be something the browser does, or something a
user does.

 Here are some examples of HTML events:


An HTML web page has finished loading
An HTML input field was changed
An HTML button was clicked

 Often, when events happen, you may want to do something.


JavaScript lets you execute code when events are detected.

Course: Java Script, Info Planet Programming Classes Prepared By: Atul Kabra, 9422279260
Course: Client Side Scripting, Prepared By: Atul Kabra, 9422279260

 HTML allows event handler attributes, with JavaScript code, to be


added to HTML elements.
<some-HTML-element some-event='some JavaScript'>

 For Example: (ex1.html)


<html>
<body onkeydown="alert('form is loaded')">
Sample page to demonstrate event
</body>
</html>

Building Blocks of A Form:


 A form is a section of an HTML document that contains elements such as
button, radio button, text boxes, option list, check boxes etc.

 HTML form elements are also known as controls.

 HTML controls are used as an efficient way for a user to enter


information into a form.

 HTML form elements are way to gather input from the user, even when
form data is processed entirely by clients side JavaScript and never
submitted to the server.

 Client side programs are event based they can respond to events on
individual form elements and this allows client side validation of data
before sending to the server.

Form Object And Elements:


The HTML <form> tag is used to create an HTML form and it has following
Syntax :
<form action = "Script URL" method = "GET|POST">
form elements like input, textarea etc.
</form>

Course: Java Script, Info Planet Programming Classes Prepared By: Atul Kabra, 9422279260
Course: Client Side Scripting, Prepared By: Atul Kabra, 9422279260

For Example: (mypage.html)

<html>

<head>
<title>Text Input Control</title>
</head>

<body>
<form id='#12' name='userform' action='server_code_file' method='GET
' >
First name: <input type = 'text' name = 'first_name' /> <br>
Last name: <input type = 'text' name = 'last_name' /> <br>
<input type='submit' value='Submit'/>
</form>
</body>

</html>

Attributes of the form tag:


 id: The unique indentifier.

 name: The name of form.

 action: The name of the script to be loaded when the form is


submitted, with a submit button.

 method: Defines how to pass the form data to the server when the form
is submitted.

 onSubmit: Event fired up when the form is submitted and before the
execution of the action. This attribute associates a test
function on the form. If the function returns false, the form
data are not sent to server, we stay on the same page.

Course: Java Script, Info Planet Programming Classes Prepared By: Atul Kabra, 9422279260
Course: Client Side Scripting, Prepared By: Atul Kabra, 9422279260

For Example: (onsubmit.html)


<html>
<body>
<form id="abc" action="server_code" onSubmit="return abc()" >
Name: <input id="t1" type="text" name="name" ><br>
E-mail: <input type="text" name="email"><br>
<input type="submit" value="Click" >
</form>
</body>

<script>
function abc(){
if(document.getElementById("t1").value=="") {
alert("enter name");
return false;
}
return true;
}
</script>
</html>

Properties and Methods of Form:


 The Form object represents a <form> element in an HTML document.

 Properties of form:
1) action: Read/Write string that reflects the action attribute of the
form.
2) elements[]: An array containing all of the elements of the form.
3) length: The number of elements in the form.
4) method: Read/Write string that specifies how the data is submitted
to server.
5) name: The name of the form.
 Methods of form:
1) reset(): Resets the form elements to its initial values.
2) submit(): Submit the form to the server.
 Form Events:
1) onReset(): Code is executed when the form is reset.
2) onSubmit(): Code is executed when form is submitted.

Course: Java Script, Info Planet Programming Classes Prepared By: Atul Kabra, 9422279260
Course: Client Side Scripting, Prepared By: Atul Kabra, 9422279260

Following Script demonstrate form properties , methods and event


(forminfo.html)
<html>
<body>
<form id="f1" name="abc" action="/server_code"
onsubmit="alert('Form is submitted')">

<input type="text" >


<input type = "button" name = "ok"
value = "Print Form Info" onclick="info()" />
<input type="submit">

</form>
</body>
<script>
function info(){
var form = document.getElementById("f1");
alert("Name of form = "+form.name);
alert("Elements on form = "+form.length);
alert("Action = "+form.action);
alert("Method = "+form.method);
form.reset();
}
</script>
</html>

Course: Java Script, Info Planet Programming Classes Prepared By: Atul Kabra, 9422279260

You might also like