XHTML Forms
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
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
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
Important Elements (tags)
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)
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
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
The <input> Element The type attribute defines how the element appears text password checkbox radiobutton
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" />
checkbox <input> Elements It’s a box that can be checked or unchecked (a two-state control)
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
<select> Elements Use to select items from a drop-down list The child <option> elements contain the drop-down items
<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
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
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
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 http://www.w3schools.com/tags/ref_eventattributes.asp
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
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
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>
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
Declaring a Function function declarations typically appear in the <head> section They are only executed when explicitly called Syntax: function name(parameter –list) { statements: }
Declaring a Function (Example) Declare a function named printMessage <head> <script type="text/javascript"> function printMessage(msg) { alert("Function printMessage was called"); } </script> </head>
Calling a Function Functions execute when called Call functions explicitly from other JavaScript code Call functions implicitly from an event handler
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>
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()" />
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
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>