Creating Forms on a Web Page

Slides:



Advertisements
Similar presentations
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?
Advertisements

Lecture 14 HTML Forms CPE 401 / 601 Computer Network Systems slides are modified from Dave Hollinger.
CIS101 Introduction to Computing Week 08. Agenda Your questions JavaScript text Resume project HTML Project Six This week online Next class.
Creating a Form on a Web Page
Creating a Form with Selection Menus The SELECT control creates a selection menu This control only allows the visitor to choose pre-defined choices There.
Creating Web Page Forms. Objectives Describe how Web forms can interact with a server-based program Insert a form into a Web page Create and format a.
Tutorial 6 Working with Web Forms
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.
USER INTERACTIONS: FORMS
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.
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.
XP Tutorial 6New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Creating Web Page Forms Designing a Product Registration Form Tutorial.
XP Tutorial 6New Perspectives on HTML and XHTML, Comprehensive 1 Creating Web Page Forms Designing a Product Registration Form Tutorial 6.
1 Creating Web Forms in HTML Web forms collect information from customers Web forms include different control elements including: –Input boxes –Selection.
Lesson 13: Building Web Forms Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6.
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.
Robinson_CIS_285_2005 HTML FORMS CIS 285 Winter_2005 Instructor: Mary Robinson.
CSC 2720 Building Web Applications HTML Forms. Introduction  HTML forms are used to collect user input.  The collected input is typically sent to a.
HTML Concepts and Techniques Fourth Edition Project 7 Creating a Form on a Web Page.
Creating a Form on a Web Page
 Whether using paper forms or forms on the web, forms are used for gathering information. User enter information into designated areas, or fields. Forms.
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,
ITCS373: Internet Technology Lecture 5: More HTML.
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.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 9 Key Concepts 1 Copyright © Terry Felke-Morris.
FORMS. Forms are used to receive information from the web surfer, such as: their name, address, credit card, etc. Form fields are objects that allow.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 9 Key Concepts 1 Copyright © Terry Felke-Morris.
+ 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.
Netprog CGI and Forms1 CGI and Forms A detailed look at HTML forms.
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.
Week 10: HTML Forms HNDIT11062 – Web Development.
1 Committed to Shaping the Next Generation of IT Experts. 03: Links and Forms HTML.
Creating Forms on a Web Page. 2 Introduction  Forms allow Web developers to collect visitor feedback  Forms create an environment that invites people.
Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Project 6: Creating XHTML Forms Kelly.
Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
HTML Structure II (Form) WEEK 2.2. Contents Table Form.
Informatics Computer School CS114 Web Publishing HTML Lesson 4.
Ashima Wadhwa Java Script And Forms. Introduction Forms: –One of the most common Web page elements used with JavaScript –Typical forms you may encounter.
XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 1 Creating Web Page Forms Designing a Product Registration Form Tutorial 6.
2440: 141 Web Site Administration Web Forms Instructor: Joseph Nattey.
Tutorial 6 Working with Web Forms
Chapter 5 Validating Form Data with JavaScript
CHAPTER 2 MARKUP LANGUAGE
Client-Side Internet and Web Programming
How to Write Web Forms By Mimi Opkins.
Objectives Design a form Create a form Create text fields
Forms Web Design Ms. Olifer.
ITE 115 Creating Web Page Forms
Basic XHTML Tables XHTML tables—a frequently used feature that organizes data into rows and columns. Tables are defined with the table element. Table.
Designing Forms Lesson 10.
Unit I: Collecting Data with Forms
Using Frames in a Web Site
Web Development & Design Foundations with H T M L 5
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.
CNIT 131 HTML5 - Forms.
Creating Frames on a Web Page
© Hugh McCabe 2000 Web Authoring Lecture 8
Introduction to HTML: Forms
Unit 5 Create Forms.
Presentation transcript:

Creating Forms on a Web Page Project 6 Creating Forms on a Web Page

Objectives Define terms related to forms Describe the different form controls and their uses Use the <FORM> tag Use the <INPUT> tag Create radio buttons Create a text field Create a textarea field

Objectives Use the <SELECT> tag Use the <OPTION> tag Create a selection menu Insert options into a selection menu Create a Submit button Create a Reset button

Introduction Forms allow Web developers to collect visitor feedback Forms create an environment that invites people to return to the site This project will teach you how to convert two HTML documents into forms

Introduction Web page without a form Web page with a form

Creating Web Page Forms Forms interact with Web page visitors in a variety of ways: Get feedback about the Web page Find out who is visiting the Web page Sell products or services Act as a guestbook

Creating Web Page Forms A Web page form has three components Input controls FORM tag, which contains the information necessary to process the form Submit button, which sends the data to be processed

Input Controls An input control is a type of input mechanism on a form A data input control allows a user to simply make a selection A text input control allows the user to enter text into the control

Input Controls

Text Control Allows for a single line of input Two attributes SIZE: determines the number of characters that display on the form MAXLENGTH: specifies the maximum length of the input field

Password Control Same as a regular text field, but characters display as asterisks or bullets Holds the password entered by a visitor Protects a visitor’s password from being observed by others

Textarea Control Allows multiple lines of input Two primary attributes ROWS: specifies the number of rows in the textarea field COLS: specifies the number of columns in the textarea field

Select Control Creates a selection menu from which visitors can select one or more choices Visitors don’t have to type in any information

Checkbox Control Allows users to select more than once choice from a list of choices Each choice in a checkbox list can be either on or off Checkboxes are deselected by default

Radio Control Limits the Web page visitor to only one choice from a list of choices Each choice is preceded by a radio button, typically an open circle Radio buttons are deselected by default

Reset and Submit Controls The Reset button clears any input that was entered in the form The Submit button sends the information to the appropriate location for processing Web page forms must include a Submit button

Input Controls Each input control has the following one or two attributes NAME: Identifies the specific information that is being sent All controls have a NAME VALUE: The data that is contained in the named input control All controls except TEXTAREA have a VALUE attribute

Form Tags Input controls are tags or attributes of tags:

Starting Notepad and Opening the HTML File Start Notepad Insert the HTML Data Disk in drive A Select Open from the File Menu Type survey1.htm in the File name text box and then click the open button

text-based questionnaire survey1.htm text-based questionnaire

Identifying the Form Process <FORM> attributes METHOD: Specifies the manner in which the form is sent to the server The GET method sends the name-value pairs to the end of the URL indicated in the ACTION attribute The POST method sends a separate data file to the URL This project will utilize the POST method

Identifying the Form Process <FORM> attributes ACTION: specifies the action that will be taken when the form is submitted Information can be sent by e-mail to a central e-mail address Information can be sent to the Web server for processing Web sites can process information from forms using Common Gateway Interface (CGI) scripting

Identifying the Form Process <FORM METHOD=POST ACTION=“mailto:ahs@isp.com”> action to be taken when submitted determines how data is sent

Identifying the Form Process Click line 9 and press the ENTER key Type <FORM METHOD=POST ACTION=“mailto:ahs@isp.com”> and press the ENTER key Click the blank line just above the </BODY> tag (line 26) and press the ENTER key Type </FORM> as the end tag

Identifying the Form Process

Changing the Text Message Select lines 14 and 15 and then press the DELETE key With the insertion point on line 14, type and send your responses to the Reunion committee by using the Submit button below as the new text Highlight lines 17 through 21 and then press the DELETE key

Changing the Text Message unnecessary text deleted

Adding Radio Buttons Add two sets of radio buttons to allow the visitor to select only one option from a list of options Visitors can select only one item per group Radio buttons that have the same name belong to the same group

Adding Radio Buttons value of field if “Yes” is selected field name control type Field name – must be the same for radio buttons value of field if “No” is selected

Adding Radio Buttons Add the following HTML, starting on line 17

Adding Radio Buttons inserted code

Adding a Text Field Number of characters that display on Web page maximum number of characters that can be input field name control type

Adding a Text Field Add the outlined HTML starting on line 24. Press the ENTER key twice after the </P> tag

Adding Textareas number of columns end textarea number of rows start textarea field name

Adding Textareas Add the following HTML, starting on line 27

Adding Textareas inserted code

Submit and Reset Buttons text to display on Submit button control type control type text to display on Reset button

Submit and Reset Button If you specify an e-mail address in the ACTION attribute of the FORM tag, a file like this will be sent to the specified e-mail address

Creating Submit and Reset Buttons Add the outlined HTML starting on line 36. Press the ENTER key once after the </P> tag

Saving the HTML File Save the file on the HTML Data Disk with survey1.htm as the file name

Viewing the HTML File in the Browser Start your browser Type a:\survey1.htm in the Address text box and then press the ENTER key

Printing the Web Page Click the Print button on the Standard Buttons toolbar

Testing the Web Page Click the radio buttons to make sure you can only select one choice Make sure you can see only 2 characters in the field that asks how many children the visitor has The text field under the question about hobbies and special interests should allow more characters to be entered than can display on the screen Make sure the Reset button clears all fields

Printing the HTML File Click the Notepad button on the taskbar Select Print from the File menu

Creating a Form with Selection Menus The SELECT control creates a selection menu This control only allows the visitor to choose pre-defined choices There are four types of selection menus

Creating a Form with Selection Menus simple selection menu SIZE set to 3 multiple choice – two choices selected one choice selected as default

Opening the HTML File With the HTML Data Disk in drive A, select Open from the File Menu Type survey2.htm in the File name text box and then click the open button

Current survey2.htm File

Future survey2.htm File

Identifying the Form Process Click line 9 and press the ENTER key Type <FORM METHOD=POST ACTION=“mailto:ahs@isp.com”> and then press the ENTER key Click the blank line just above the </BODY> tag (line 28) and press the ENTER key Type </FORM> as the tag

Changing the Initial Text Highlight lines 14 and 15 and then press the DELETE key With the insertion point on line 14, type and send your responses to the Reunion Committee by using the Submit button below. as the text. Highlight lines 17 through 23 and then press the DELETE key

Changing the Initial Text unnecessary text deleted

Adding Radio Buttons to the Second Form Add the following HTML, starting on line 17

Adding Radio Buttons to the Second Form radio buttons specified

Creating Selection Controls start select menu field name start option end option

Creating Selection Controls Add the following HTML, starting on line 21

Adding a Selection Menu three options

Adding More Radio Buttons and a Selection Menu Add the following HTML, starting on line 28

Adding More Radio Buttons and a Selection Menu

Inserting a Text Field Click line 38 and press the ENTER key Type <P>What will you be willing to pay per person (cash bar not included)? $ and then press the ENTER key Type <INPUT NAME=“amount” TYPE=“text” SIZE=“3” MAXLENGTH=“3”></P> and then press the ENTER key twice

Inserting a Text Field

Adding the Submit and Reset Buttons If necessary, click line 42 Type <P><INPUT TYPE=“submit” VALUE=“Submit the Form”> and press the ENTER key Type <INPUT TYPE=“reset” VALUE=“Reset the Form”></P> and press the ENTER key

Adding the Submit and Reset Buttons

Saving the HTML File Save the file on the HTML Data Disk with survey2.htm as the file name

Viewing the HTML File In the Browser Start your browser Type a:\survey2.htm in the Address text box and then press the ENTER key

Printing the Web Page Click the Print button on the Standard Buttons toolbar

Printing the HTML File Click the Notepad button on the Taskbar Click File on the menu bar and then click Print

Testing the Submit Buttons In survey1.htm and survey2.htm: Enter your e-mail address (instead of ahs@isp.com) as the form’s ACTION Enter values in all controls Test the Submit button to make sure you receive an e-mail with the name-value pairs attached

Advanced Selection Menus simple selection menu SIZE set to 3 multiple choice – two choices selected one choice selected as default

Advanced Selection Menus

Summary Define terms related to forms Describe the different form controls and their uses Use the <FORM> tag Use the <INPUT> tag Create radio buttons Create a text field Create a textarea field

Summary Use the <SELECT> tag Use the <OPTION> tag Create a selection menu Insert options into a selection menu Create a Submit button Create a Reset button

What You Should Know

Project 6 Complete