JavaScript JavaScript and the and the XHTML page XHTML page (DOM) (DOM) 1 XHTML forms Lars Larsson Lars Larsson Today Today 2 XHTML tree model (DOM) XHTML forms XHTML forms JavaScript and the XHTML page (DOM) XHTML tree XHTML tree model (DOM) model (DOM) 3 Accessing the DOM in JavaScript Accessing the Accessing the DOM in DOM in JavaScript JavaScript Lars Larsson Modifying Modifying 4 Modifying node attributes node node attributes attributes Working with Working with forms forms Lecture #9 5 Working with forms Summary Summary 6 Summary JavaScript JavaScript and the and the XHTML page XHTML page XHTML Forms <form> (DOM) (DOM) Lars Larsson Lars Larsson The <form> tag requires an attribute called action , which Today Today specifies the name of the resource (server side program) to XHTML forms XHTML forms which the data in the form shall be sent. For instance, if we XHTML tree XHTML tree On the web, we can acquire user input using different controls: model (DOM) model (DOM) have a page called sendEmail.jsp our form that uses it text areas, radio boxes or items from drop down menus, and so Accessing the Accessing the should be declared as follows: DOM in DOM in forth. Generally, one or more of these controls are placed in a JavaScript JavaScript form, including a button for submitting the data to the server Modifying Modifying <form action="sendEmail.jsp"> node node (where it is parsed and some action takes place). attributes attributes ... Working with Working with </form> All related controls must be placed in an enclosing <form> tag. forms forms There may be several unrelated forms on one page (search box, Summary Summary Upon submitting this form, the data is sent to the specified write mail form, etc). web page for processing. Because we do client side web programming, we only add the action to comply with the XHTML standard. We do not actually send data to a web server. JavaScript JavaScript and the and the XHTML page XHTML page <input> continued <input> (DOM) (DOM) Lars Larsson Lars Larsson Today Today One should always use the name attribute for controls, as it will XHTML forms XHTML forms be sent along with the data in the form, and we can make use XHTML tree XHTML tree model (DOM) model (DOM) of it in JavaScript. It will therefore be easy to work with the Many kinds of user data can be entered via the <input> tag. Accessing the Accessing the data. An example: DOM in DOM in As the attribute type , we specify what kind of input control we JavaScript JavaScript Modifying want to display: button, checkbox, file, hidden, image, Modifying node node <form action="sendEmail.jsp" id="email"> password, radio, reset, submit or text. The default is the text attributes attributes <input type="text" name="email_address" /> Working with type, meaning a box where a single line of text can be entered Working with forms forms <input type="submit" value="Send e-mail" /> (usually used for search boxes and the like). Summary Summary </form> The code above will create a form with a single line input text field and a button with the text “Send e-mail”.
JavaScript JavaScript and the and the XHTML page XHTML page <fieldset> <select> (DOM) (DOM) Lars Larsson Lars Larsson Today Today The <select> tag creates a drop down menu, where the user XHTML forms XHTML forms can select among available choices. The choices are listed as XHTML tree XHTML tree <option> tags within the <select> tag: model (DOM) model (DOM) To group related controls in a graphical box, we use the Accessing the Accessing the <fieldset> tag. It does not effect the data in the form, it is DOM in DOM in JavaScript JavaScript <select name="gender"> merely a graphical hint to your users that the controls are Modifying Modifying <option value="female">Female</option> related. This is good from both a design and usability node node attributes attributes <option value="male">Male</option> perspective, because it makes the form more clear. Working with Working with </select> forms forms Use the <legend> tag in the fieldset to show a title in the Summary Summary frame. We can allow for multiple selectable values by setting the attributes multiple to “multiple” and size to whatever size the list should be displayed as (note that more values than the display size can be selected). JavaScript JavaScript and the and the XHTML page XHTML page Accessibility: <label> Form example (DOM) (DOM) Lars Larsson Lars Larsson Today Today XHTML forms XHTML forms Most forms have labels in addition to the controls, and these XHTML tree XHTML tree labels should be marked up as such. Give each control a unique model (DOM) model (DOM) We will now see a rather large form example, but it should be ID, and mark the label text with the label tag. In the label tag, Accessing the Accessing the DOM in DOM in quite easy to understand what is going on. Play with the specify the “for” attribute and let its value equal the chosen JavaScript JavaScript attributes in Firebug and see what effects they have! unique ID, as such: Modifying Modifying node node attributes attributes example-form.xhtml should be your next browser destination. Working with Working with <label for="email">Your email addr:</label> We will come back to forms at the end of the lecture, after forms forms <input type="text" name="email" id="email" /> Summary Summary having covered the basics of the XHTML tree model. Note that “name” does not have to equal “id”, but is the common practise. JavaScript JavaScript and the and the XHTML page XHTML page XHTML tree model (DOM) XHTML tree model (DOM) (DOM) (DOM) Lars Larsson Lars Larsson Today Today The Document Object Model is an interface that we may use You may recall the XHTML tree model from a previous lecture. XHTML forms XHTML forms to manipulate the XHTML tree model. All elements that The model shown was: XHTML tree XHTML tree comprise our web page can be referenced and modified. model (DOM) model (DOM) Accessing the Accessing the In addition, we have the power to affect the browser itself using DOM in DOM in JavaScript JavaScript JavaScript! This is what is used to create popup windows, Modifying Modifying provide “back” links (simulating the brower’s Back button), node node attributes attributes and for finding information on the browser window itself. We Working with Working with can obtain the size of the browser window, the vendor of the forms forms browser, and much more. Summary Summary http://www.w3schools.com/htmldom/dom reference.asp has a reference of all objects that are at our disposal, including examples of use. We will not cover the browser-related ones here in class.
Recommend
More recommend
