Creating Web Page Forms. Introducing Web Forms Web forms collect information from users Web forms include different control elements including: –Input.

Slides:



Advertisements
Similar presentations
Tutorial 6 Creating a Web Form
Advertisements

Video, audio, embed, iframe, HTML Form
XP 1 Creating Web Page Forms Designing a Product Registration Form Tutorial 6.
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.
XP Tutorial 6: Creating Web Page Forms. XP An Example of a Form.
XP 1 New Perspectives on Creating Web Pages with HTML Tutorial 6: Creating Web Page Forms.
XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 6 1 New Perspectives on Creating Web Pages with HTML Tutorial 6: Creating Web.
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.
Web Development & Design Foundations with XHTML Chapter 9 Key Concepts.
Chapter 10 Form Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
Form Handling, Validation and Functions. Form Handling Forms are a graphical user interfaces (GUIs) that enables the interaction between users and servers.
Principles of Web Design 6 th Edition Chapter 11 – Web Forms.
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.
Forms and Form Controls Chapter What is a Form?
© 2011 Delmar, Cengage Learning Chapter 9 Collecting Data with Forms.
XHTML Introductory1 Forms Chapter 7. XHTML Introductory2 Objectives In this chapter, you will: Study elements Learn about input fields Use the element.
การจัดรูปแบบเว็บด้วย CSS การเขียนโปรแกรมเว็บ. Selectors & cascading PatternMeaning *Universal selector: matches any element. EType selector: matches any.
XP 1 New Perspectives on Creating Web Pages with HTML Tutorial 6: Creating Web Page Forms.
INTRODUCTORY Tutorial 8 Creating Forms. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Create an HTML form Create fields for text Create.
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 7: Web Forms © 2007 Prosoft Learning Corporation All rights reserved ITD 110 Web Page Design.
Working with Forms. How Forms Work Forms let you build interactive Web pages that collect information from a user and process it on the Web server The.
HTML Forms.
LOGO FORMs in HTML CHAPTER 5 Eastern Mediterranean University School of Computing and Technology Department of Information Technology ITEC229 Client-Side.
Web Development & Design Foundations with XHTML Chapter 9 Key Concepts.
1 HTML Forms
Week 9 - Form Basics Key Concepts 1. 1.Describe common uses of forms on web pages 2.Create forms on web pages using the form, input, textarea, and select.
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.
Week 12 Working with Forms Objectives Understand how forms work Understand form syntax Create input objects Build forms within tables Build and.
1 HTML Forms
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 9 Key Concepts 1 Copyright © Terry Felke-Morris.
1 HTML Forms
XP 1 Tutorial 6 Creating Web Page Forms. XP 2 Tutorial Objectives  Describe how Web forms can interact with a server-based program  Review the various.
Web Development & Design Foundations with XHTML Chapter 9 Key Concepts.
1 Review of Form Elements. 2 The tag Used in between tags.  Form elements(text control, buttons, etc.. ) goes here. OR  Form elements(text control,
HTML Forms a form is a container for input elements on a web page input elements contain data that is sent to the web server for processing.
SYST Web Technologies SYST Web Technologies XHTML Forms.
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.
1 HTML forms (cont.)
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 COE 201- Computer Proficiency.
HTML Forms.
HTML Forms. A form is simply an area that can contain form fields. Form fields are objects that allow the visitor to enter information - for example text.
Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Project 6: Creating XHTML Forms Kelly.
1 HTML forms (cont.)
Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
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.
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
How to Write Web Forms By Mimi Opkins.
ITE 115 Creating Web Page Forms
Today - Forms! WD Students produce a basic HTML/XHTML document using forms. Find the group that best matches the part of the project you are going.
Designing Forms Lesson 10.
1.5 FORMS.
Creating Form Elements
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.
CNIT 131 HTML5 - Forms.
Lesson 6: Web Forms.
Chapter 6: Creating Web Page Forms. An Example of a Form.
Presentation transcript:

Creating Web Page Forms

Introducing Web Forms Web forms collect information from users Web forms include different control elements including: –Input boxes –Selection lists –Drop-down lists boxes –Option buttons or radio buttons –Check boxes –Group boxes –Text areas –Form buttons

Form on a Web page New Perspectives on HTML and XHTML, Comprehensive3

Forms and Server-Based Programs While HTML supports the creation of forms, it does not include tools to process the information The information can be processed through a program running on a Web server

Creating the Form Element Forms are created using the form element, structured as follows: elements Where attributes are the attributes that control how the form is processed and elements are elements places within the form.

Creating the Form Element Form attributes usually tell the browser the “method” and “actions” to be applied to the form’s data Always specify an id or name for the form Two attributes are available to identify the form: id and name

Creating the Form Element The syntax of the id and name attributes are as follows: … Where name is the name of the form and id is the id of the form.

Creating Input Boxes The general syntax of input elements is as follows: Where type specifies the type of input field, and the name and id attributes provide the field’s name and id.

Creating Input Boxes Input types: type=“button” Displays a button that can be clicked to perform an action from a script type=“checkbox Displays a check box type=“file” Displays a browse button to locate and select a file type=“hidden” Creates a hidden field, not viewable on the form

Creating Input Boxes Input types: type=“image” Displays an input image that can be clicked to perform an action from a script type=“password” Displays an input box that hides text entered by the use type=“radio” Displays an option button

Creating Input Boxes Input types: type-”reset” Displays a button that resets the form when clicked type=“submit” Displays a button that submits the form when clicked type=“text” Displays an input box that displays text entered by the user

Creating Check Boxes To create a check box, use: Where the name and id attributes identify the check box field and the value attribute specifies the value sent to the server if the check box is selected To specify that a check box be selected by default, use the checked attribute as follows: or

Working with Form Buttons Buttons are a type of control element that performs an action Types of buttons: –Command button –Submit button –Reset button –File button

Creating a Command button Command buttons are created using the tag: Submit buttons submit forms to the server for processing when clicked. Syntax is as follows: Reset buttons reset forms to their original (default) values. Syntax is as follows:

Working with Form Attributes After adding the elements to your form, you’ll need to specify where to send the form data and how to send it. Use the following attributes: … Where url specifies the filename and location of the program that processes the form and the method attribute specifies how your Web browser sends data to the server. The enctype attribute specifies the format of the data stored in the form’s field.

Working with Form Attributes The method attribute can have one of two values: –Post –Get The get method is the default; get appends the form data to the end of the URL specified in the action attribute The post method sends form data in a separate data stream, allowing the Web server to receive the data through “standard input”

Using the mailto Action The mailto action accesses the user’s own program and uses it to mail form information to a specified address –By-passes the need for server-based programs The syntax is as follows: <form action-mailto: _address method=“post”mailto: _address enctype=“text/plain”> … Where _address is the address of the recipient in the form

Specifying the Tab Order Users typically navigate through a form with the tab key You can specify an alternate tab order by adding the tabindex attribute to any control element in your form The syntax is as follows: This syntax assigns the tab index number “1” to the fname field from the registration form

Specifying an Access Key An access key is a single key typed with the Alt key (Windows) or Control key (Mac), in order to jump to one of the control elements in the form Create an access key by adding the accesskey attribute to any control element Example of creating an access key for the lname field:

Tips for Creating Effective Forms Label all control elements clearly and concisely Use horizontal lines, tables, and line breaks to separate topical groups from one another Use field sets to organize common groups of fields, especially option buttons Use the tab order to ensure that users will move correctly from one field to another

Tips for Creating Effective Forms Use option buttons, check boxes, and selection lists whenever possible to limit a user’s choice of entries, thus reducing the chance of an erroneous data value. Use input boxes only when the field has no predefined list of values. Use selection lists for items with several possible options. Use option buttons for items with few options. Use a check box for each item with only two possible values.

Tips for Creating Effective Forms Let users know the correct format for input box text by inserting default text in the appropriate format (for example, insert the text string, “mm/dd/yyyy” in a Date input box to indicate the format for inserting date values Use password fields for sensitive or confidential information (such as passwords) Because form elements differ between browsers, view your form on different browsers and different browser versions to ensure that the form displays correctly in all situations