XHTML Forms.

Slides:



Advertisements
Similar presentations
23-Aug-14 HTML/XHTML Forms. 2 What are forms? is just another kind of XHTML/HTML tag Forms are used to create (rather primitive) GUIs on Web pages Usually.
Advertisements

Tutorial 6 Creating a Web Form
The Web Warrior Guide to Web Design Technologies
Chapter 6 Basic forms 1. Forms and query string 2 form : a group of user input (UI) controls that accepts information from the user and sends the information.
Technologies for web publishing Ing. Václav Freylich Lecture 4.
Forms cs105. More Interactive web-pages So far what we have seen was to present the information. (Ex: tables. Lists,….). But it is not enough. We want.
Forms Review. 2 Using Forms tag  Contains the form elements on a web page  Container tag tag  Configures a variety of form elements including text.
Outline IS400: Development of Business Applications on the Internet Fall 2004 Instructor: Dr. Boris Jukic Table, Forms, Metatags and Frames.
Tutorial 6 Forms Section A - Working with Forms in JavaScript.
Forms. Form An HTML form is a section of a document containing normal content, special elements called controls (checkboxes, radio buttons, buttons, etc.),
Web Development & Design Foundations with XHTML Chapter 9 Key Concepts.
CST JavaScript Validating Form Data with JavaScript.
1 Web Developer & Design Foundations with XHTML Chapter 6 Key Concepts.
JavaScript and The Document Object Model MMIS 656 Web Design Technologies Acknowledgements: 1.Notes from David Shrader, NSU GSCIS 2.Some material adapted.
CSE 382/ETE 334 Internet and Web Technology Presented By Dr. Shazzad Hosain Asst. Prof. EECS, NSU.
1 Forms A form is the usual way that information is gotten from a browser to a server –HTML has tags to create a collection of objects that implement this.
Chapter 5 Java Script And Forms JavaScript, Third Edition.
XHTML Introductory1 Forms Chapter 7. XHTML Introductory2 Objectives In this chapter, you will: Study elements Learn about input fields Use the element.
Event Handlers CS101 Introduction to Computing. Learning Goals Learn about event handlers Determine how events are useful in JavaScript Discover where.
CSS Class 7 Add JavaScript to your page Add event handlers Validate a form Open a new window Hide and show elements Swap images Debug JavaScript.
CSC 2720 Building Web Applications HTML Forms. Introduction  HTML forms are used to collect user input.  The collected input is typically sent to a.
Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.
JavaScript, Fourth Edition Chapter 5 Validating Form Data with JavaScript.
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
LOGO FORMs in HTML CHAPTER 5 Eastern Mediterranean University School of Computing and Technology Department of Information Technology ITEC229 Client-Side.
JavaScript - A Web Script Language Fred Durao
Lecture 10 JavaScript: DOM and Dynamic HTML Boriana Koleva Room: C54
HTML Forms. Slide 2 Forms (Introduction) The purpose of input forms Organizing forms with a and Using different element types to get user input A brief.
Forms Collecting Data CSS Class 5. Forms Create a form Add text box Add labels Add check boxes and radio buttons Build a drop-down list Group drop-down.
SYST Web Technologies SYST Web Technologies XHTML Forms.
1 CSC160 Chapter 7: Events and Event Handlers. 2 Outline Event and event handlers onClick event handler onMouseOver event handler onMouseOut event handler.
+ FORMS HTML forms are used to pass data to a server. begins and ends a form Forms are made up of input elements Every input element has a name and value.
HTML Forms.
JavaScript Events.
Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
JavaScript Events Java 4 Understanding Events Events add interactivity between the web page and the user You can think of an event as a trigger that.
JavaScript Events. Understanding Events Events add interactivity between the web page and the user Events add interactivity between the web page and the.
HTML Tutorial. What is HTML HTML is a markup language for describing web documents (web pages) HTML documents are described by HTML tags Each HTML tag.
HTML III (Forms) Robin Burke ECT 270. Outline Where we are in this class Web applications HTML Forms Break Forms lab.
Lesson 5 Introduction to HTML Forms. Lesson 5 Forms A form is an area that can contain form elements. Form elements are elements that allow the user to.
HTML Structure II (Form) WEEK 2.2. Contents Table Form.
TNPW1 Ing. Jiří Štěpánek.  ordered list  (list item)  unordered list  (list item)
Ashima Wadhwa Java Script And Forms. Introduction Forms: –One of the most common Web page elements used with JavaScript –Typical forms you may encounter.
Client-side (JavaScript) Validation. Associating a function with a click event – Part 1 Use the input tag’s onclick attribute to associate a function.
2440: 141 Web Site Administration Web Forms Instructor: Joseph Nattey.
Creating and Processing Web Forms
HTML Again GUI Items Originally HTML 4 Copyright © Curt Hill.
Chapter 5 Validating Form Data with JavaScript
In this session, you will learn to:
How to Write Web Forms By Mimi Opkins.
Objectives Design a form Create a form Create text fields
CS3220 Web and Internet Programming HTML Tables and Forms
(and available form fields)
Basic XHTML Tables XHTML tables—a frequently used feature that organizes data into rows and columns. Tables are defined with the table element. Table.
JavaScript Syntax and Semantics
JAVASCRIPTS AND HTML DOCUMENTS
Designing Forms Lesson 10.
HTML Forms and User Input
JavaScript Events.
JavaScript Introduction
Events Comp 205 Fall 2017.
FORM OBJECT When creating an interactive web site for the Internet it is necessary to capture user input and process this input. Based on the result of.
Forms, cont’d.
CHAPTER 7 JavaScripts & HTML Documents
CS3220 Web and Internet Programming HTML Tables and Forms
Web Development Using ASP .NET
Introduction to HTML: Forms
JavaScript and Ajax (JavaScript Events)
JAVA SCRIPT OBJECTS & DOM
Presentation transcript:

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>