Download presentation
Presentation is loading. Please wait.
1
XHTML Forms
2
The Purpose of Forms Forms are used to create boxes and other controls that allow users to enter data The data is typically submitted to the server for processing We will get to server-side processing in a week or two JavaScript can be used to access form elements on the client
3
Form (Posting) Forms are typically submitted to a web server for processing Client script might also execute That’s where we will start A form is submitted in two ways GET POST
4
Important Elements (tags)
The <form> element marks a region used to get user input It is the form that is posted to the server The <fieldset> element groups visible elements The <legend> element draws a prompt around the <fieldset> box The <input> element is used to create The <textarea> element The <label> element
5
Important Elements (tags)
6
The <form> Element
The action attribute contains the URL where the data will be posted to the server This makes little sense now but will when we talk about server-side processing The method attribute defines how the form is posted get – data is posted the ‘query string’ put – data is posted in the form header Note that name attributes deprecated (use id)
7
The <fieldset> Element
The <fieldset> element logically groups visible controls The element must appear inside of a <form> element A border is drawn around the <fieldset> The <legend> element contains text that appears in the border It must appear as an immediate child of <fieldset> It’s required with XHTML strict
8
The <label> element
It’s a visible label that the user sees Use it to create prompts Set the for attribute to the id property of the related control
9
The <input> Element
The type attribute defines how the element appears text password checkbox radiobutton
10
text <input> Elements
text elements allow the users to enter text into a text box password elements hides the characters entered The value attribute stores the entered value Example <input id="name" type="text" value="Enter Name" />
11
checkbox <input> Elements
It’s a box that can be checked or unchecked (a two-state control)
12
radio <input> Elements
Use to select one item from a list of items Set the name attribute to the same value to make the buttons appear as part of a group Set the checked attribute to define the button selected by default
13
<select> Elements
Use to select items from a drop-down list The child <option> elements contain the drop-down items
14
<textarea> Elements
Use to create a scrollable multi-line text box Set the rows attribute to define the number of rows displayed Set the cols attribute to define the number of columns display The value appears in the element content
15
Buttons There are three types of buttons
submit – triggers the form’s action reset – reset the form’s fields to their initial values button - action is controlled by client-side script
16
JavaScript Events (Introduction)
Conceptually, Java Script events work just like .NET (VB) events They fire as a result of some user or other action Code that executes in response to an event is called an event handler The syntax and event names differ between VB and JavaScript
17
Common Events (1) Mouse Motion
mouseover – mouse enters the region of an element mouseout – mouse leaves the region of an element focus – an element becomes active blur – an element because inactive
18
Common Events (2) Document related events Button related
load – document loads unload – fires just before the document is unloaded Button related click – user clocks a button (or other element) submit
19
Creating Event Handlers
There are two ways to create event handlers Inline event handlers have code in the event argument Create functions and wire them to the event
20
Inline Event Handler (Example)
The alert dialog appears when the user clicks the button <body> <input type="button" value="Click Me" onclick= "alert('you clicked me');" /> </body>
21
Functions (Introduction)
They are the same thing as a VB function or any other programming language function Functions execute When called by another procedure When implemented as an event handler
22
Declaring a Function function declarations typically appear in the <head> section They are only executed when explicitly called Syntax: function name(parameter –list) { statements: }
23
Declaring a Function (Example)
Declare a function named printMessage <head> <script type="text/javascript"> function printMessage(msg) { alert("Function printMessage was called"); } </script> </head>
24
Calling a Function Functions execute when called
Call functions explicitly from other JavaScript code Call functions implicitly from an event handler
25
Calling a Function Explicitly
From another function or from within another JavaScript block, call the function with it’s name an parameters Example: <script type="text/javascript"> printMessage(); </script>
26
Calling a Function from an Event handler
Event handlers are functions with some special characteristics The following statement calls the procedure btnShowEventClick when the button is clicked: <input id="btnShowEvent" type="button" value="Execute event handler" onclick="btnShowEventClick()" />
27
Referencing Elements by ID
Each XHTML element has an ID attribute This attribute is special – it’s the unique identifier for the node It’s value must be unique within the document It’s value should begin with a letter for compatibility with all browsers Use the GetElementByID method to get a reference to the node The method applies to the document object
28
Referencing Elements by ID (Example 1)
Get and change the text in the paragraph named First <script type="text/javascript"> function ShowTree() { x=document.getElementById("First"); x.innerHTML = "Changed"; } </script> The paragraph declaration <p id="First">Hello world!</p>
Similar presentations
