 Whether using paper forms or forms on the web, forms are used for gathering information. User enter information into designated areas, or fields. Forms.

Slides:



Advertisements
Similar presentations
Chapter 1: Introduction. Contents Whats New in Dreamweaver CS4? The Dreamweaver CS4 Interface Setting Up a Site Creating a Web Page Adding Text to Your.
Advertisements

WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?
Microsoft Expression Web-Illustrated Unit J: Creating Forms.
Supplement Creating Forms. Objectives Show how forms are used How to create the Form element HTML elements used for creating input fields.
Tutorial 6 Working with Web Forms
A Guide to Oracle9i1 Introduction To Forms Builder Chapter 5.
Macromedia Dreamweaver 4 Advanced Level Course. Add Rollovers Rollovers or mouseovers are possibly the most popular effects used in designing Web pages.
Tutorial 6 Working with Web Forms. XP Objectives Explore how Web forms interact with Web servers Create form elements Create field sets and legends Create.
Tutorial 6 Forms Section A - Working with Forms in JavaScript.
Web Development & Design Foundations with XHTML Chapter 9 Key Concepts.
Form Handling, Validation and Functions. Form Handling Forms are a graphical user interfaces (GUIs) that enables the interaction between users and servers.
CST JavaScript Validating Form Data with JavaScript.
1 ADVANCED MICROSOFT WORD Lesson 15 – Creating Forms and Working with Web Documents Microsoft Office 2003: Advanced.
Chapter 9 Collecting Data with Forms. A form on a web page consists of form objects such as text boxes or radio buttons into which users type information.
1 Web Developer & Design Foundations with XHTML Chapter 6 Key Concepts.
Tutorial #9 – Creating Forms. Tutorial #8 Review – Tables Borders (table, gridlines), Border-collapse: collapse; empty-cells: show; and rowspan, colspan.
Reading Data in Web Pages tMyn1 Reading Data in Web Pages A very common application of PHP is to have an HTML form gather information from a website's.
4-Sep-15 HTML Forms Mrs. Goins Web Design Class. Parts of a Web Form A Form is an area that can contain Form Control/Elements. Each piece of information.
1 Creating Web Forms in HTML Web forms collect information from customers Web forms include different control elements including: –Input boxes –Selection.
Forms and Form Controls Chapter What is a Form?
Lesson 13: Building Web Forms Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6.
Database-Driven Web Sites, Second Edition1 Chapter 8 Processing ASP.NET Web Forms and Working With Server Controls.
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.
Chapter 6: Forms JavaScript - Introductory. Previewing the Product Registration Form.
Project Four Forms Discuss form processing Describe the difference between client-side and server-side form processing Add a horizontal rule to a Web page.
XHTML Introductory1 Forms Chapter 7. XHTML Introductory2 Objectives In this chapter, you will: Study elements Learn about input fields Use the element.
10 Adding Interactivity to a Web Site Section 10.1 Define scripting Summarize interactivity design guidelines Identify scripting languages Compare common.
Forms Sangeetha Parthasarathy 02/05/2001. Introduction to Forms A form makes it possible to transform your web pages from text to graphics to interactive.
Creating a Web Site to Gather Data and Conduct Research.
Dreamweaver – Dreamweaver Extras Web Design Section 8-4 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.
Robinson_CIS_285_2005 HTML FORMS CIS 285 Winter_2005 Instructor: Mary Robinson.
Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.
© 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.
JavaScript, Fourth Edition Chapter 5 Validating Form Data with JavaScript.
Dreamweaver MX. 2 Overview of Templates n Templates represent a web page design or _______ that will be common to multiple pages. n There are two situations.
Chapter 8 Collecting Data with Forms. Chapter 8 Lessons Introduction 1.Plan and create a form 2.Edit and format a form 3.Work with form objects 4.Test.
HTML Forms.
Forms and Server Side Includes. What are Forms? Forms are used to get user input We’ve all used them before. For example, ever had to sign up for courses.
LOGO FORMs in HTML CHAPTER 5 Eastern Mediterranean University School of Computing and Technology Department of Information Technology ITEC229 Client-Side.
Dreamweaver MX. 2 Overview of Templates n Forms enable you to collect data from ______. n A form contains ________ such as text fields, radio buttons,
Tutorial 6 Working with Web Forms. XP Objectives Explore how Web forms interact with Web servers Create form elements Create field sets and legends Create.
Tutorial 6 Working with Web Forms. 2New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives Explore how Web forms interact with.
Creating Web Page Forms. Introducing Web Forms Web forms collect information from users Web forms include different control elements including: –Input.
1 HTML Forms
Microsoft FrontPage 2003 Illustrated Complete Creating a Form.
1 Building FORMS In When a visitor enters information into a web form displayed in a web browser and clicks the submit button, the information is sent.
+ 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.
Copyright © Texas Education Agency, All rights reserved.1 Web Technologies Website Forms / Data Acquisition.
Starting BBEdit or Notepad and Opening the HTML File Start BBEdit or Notepad Select Open from the File Menu Open survey1.htm from the Public Folder.
Tutorial 6 Working with Web Forms. 2New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives Explore how Web forms interact with.
Project 6 Creating Forms on a Web Page. Objectives Define terms related to forms Describe the different form controls and their uses Use the tag Create.
Creating Web Page Forms COE 201- Computer Proficiency.
HTML Creating Forms on a Web Page. 2 Objectives  Discuss the process of creating a form  Distinguish between data input controls and text input controls.
HTML Forms.
Web Page-Chapter 6 Forms. Inserting a Form  Display the Insert bar  Click the arrow to the right of the display category on the Insert bar and then.
Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating.
1 HTML Forms
Creating Forms on a Web Page. 2 Introduction  Forms allow Web developers to collect visitor feedback  Forms create an environment that invites people.
Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
INTERNET APPLICATIONS CPIT405 Forms, Internal links, meta tags, search engine friendly websites.
FORMS Explained By: Jasdeep Kaur. Lecturer, Department of Computer Application, PGG.C.G., Sector: 42, Chandigarh.
Ashima Wadhwa Java Script And Forms. Introduction Forms: –One of the most common Web page elements used with JavaScript –Typical forms you may encounter.
Chapter 5 Validating Form Data with JavaScript
Unit I: Collecting Data with Forms
Forms, cont’d.
Creating Forms on a Web Page
Using Templates and Library Items
Presentation transcript:

 Whether using paper forms or forms on the web, forms are used for gathering information. User enter information into designated areas, or fields. Forms should be easy to read and follow. Online forms use the tag and other HTML elements to designate and contain the desired data.

 Text field – entry of text and numbers, up to a specific number of characters.  Text area – Identical to text fields, but able to hold more characters.  Checkbox – Graphical element that permits users to designate a yes or no selection.  Radio button – graphical element that permits users to select one option from a group of items. Only one item can be chosen.  List/Menu – Displays entries in a pop-up menu format.  Hidden – Unseen by user – conveys information to the form-processing mechanism.  Button – Submits the form or performs some other single-purpose interaction.

 Create your page using your DWT  From the insert panel, choose Form.  Inside the box change method to POST and make sure in the name box you name your form i.e., seniorvote.

 Text fields are the workhorses of all form elements.  Inserting a text field –  Make sure your cursor is inside the red form outline.  In the Forms category of the Insert panel, click the Text Field Icon.  The Input Tag Accessibility Attributes box will appear. The most important attribute is ID because it gives the field a unique name that assists in processing the form data later. If you don’t input an ID, Dreamweaver will automatically create a generic one for you. Next, insert your information for the label category. You can now press OK and see that your first Form element has been created.

 Spry elements combines form elements with Java to create easy to use forms with built-in validation. Validation is the process of verifying that appropriate data has been entered into a form element.  Spry form widgets are available for several kinds of form elements, including text fields, text areas, checkboxes, passwords and password confirmation, radio groups, and select lists. They each basically work the same way: You insert the widget and then specify its properties using the Spry interface in the Property inspector.

 Insert your cursor at the end of the name field and press Shift-Enter to insert a line break.  In the Forms category of the Insert panel, click the Spry Validation Text Field Icon.  In the ID field, type  In the Label field, type  Click OK

 Now that you have your Spry inserted, you should see a blue tab around it; position your mouse pointer over the text field and wait until it appears. Click the tab to select the element, in the Property inspector, choose Address for the pop-up menu.  By choosing the Address field type, Dreamweaver will check the entry to see that it contains character followed by a domain name.  Customizing the address – invalid, required, and validation.

 One way to make forms more user friendly is to organize fields into logical groupings, called field sets.  Make sure you select all of the code from the first label code for the name section to the end of the section.  In the Forms category click the Fieldset icon and type Your Contact Information in the Legend field.

 You can either insert each checkbox individually or insert an entire group at once. You can also choose between normal HTML checkboxes and ones powered by a Spry. The Spry checkboxes allow you to add customized error messages and other functionality.

 First let’s create a Fieldset to organize your information. Name it Trip Information  In the Forms category select Checkbox Group. In the Name box, name it date.  Since the default only gave us two boxes, we will need to add one, so click the + to add a 3 rd.  Next fill in your dates where it says “Checkbox”. Where it says value, type in date1, date2, etc.

 When you want users to select one option from an array of choices, you will want to use a radio button.  Radio buttons differ from check boxes in two ways:  When a radio button is selected, it can’t be deselected, except by clicking one of the other buttons in the group.  When you click one radio button, any other option in the group is deselected automatically.

 Creating a Radio Button group using a Spry is very similar the checkboxes you created earlier.  First, make sure you have inserted the text so the user knows what they are choosing.  In the Form Category, select Spry Validation Radio Group. Format the dialog box as needed.

 Occasionally, you may want to give users an opportunity to enter a larger amount of information. When this is the case you can use a text area.  Dreamweaver again offers both HTML and Spry text area components.

 List and menu form elements offer a flexible method for presenting multiple options in two different formats. When displayed as a menu, the element functions like radio buttons. When displayed as a list, the element behaves like checkboxes.

 First things first, you must add your text to identify your field  Choose the Select (List/Menu) from the Form category.  Label the ID field – payment  Leave the Label field empty.  Select the No Label Tag Option  Click OK

 Every form needs a control to complete the action. This job is usually assigned to the submit button that when clicked sends the entire form for processing. By default, buttons inserted by Dreamweaver are set to Submit, although they can also be assigned the options Reset or None.  Once you know your position for your button, click the Button Icon from the Form Category.

 Since many visitors to your site use web- hosted systems like Hotmail and Yahoo to receive , you will need to use a server- based application to receive your responses.  Click on your tag and ensure the POST method is selected in the Property Inspector.

 By selecting POST, the data entered into the form by the user will be passed to a separate file when you click the Submit button.  This process will load the new page and resets your form page, deleting the user data from the form. If you navigate back to that page, the form will be blank.

 Create a new page and save it as form.php  The file extension php informs the browser that the page needs to be process differently than basic HTML.  Now it’s time to format your page to thank your users for visiting and completing the form.  Next we need to add the scripting that will generate the server-based .