Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc. 2013. All Rights Reserved.

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

Supplement Creating Forms. Objectives Show how forms are used How to create the Form element HTML elements used for creating input fields.
HTML and XHTML Controlling the Display Of Web Content.
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.
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.
Outline IS400: Development of Business Applications on the Internet Fall 2004 Instructor: Dr. Boris Jukic Table, Forms, Metatags and Frames.
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.
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
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.
CSE 382/ETE 334 Internet and Web Technology Presented By Dr. Shazzad Hosain Asst. Prof. EECS, NSU.
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
XHTML Introductory1 Forms Chapter 7. XHTML Introductory2 Objectives In this chapter, you will: Study elements Learn about input fields Use the element.
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
Robinson_CIS_285_2005 HTML FORMS CIS 285 Winter_2005 Instructor: Mary Robinson.
Web Development University of Khartoum. Web Development Web Programming Web Design University of Khartoum.
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML Pt. 2.
Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
2.2 XHTML (cont.). Motto Yea, from the table of my memory I’ll wipe away all trivial fond records. —William Shakespeare.
HTML Forms.
LOGO FORMs in HTML CHAPTER 5 Eastern Mediterranean University School of Computing and Technology Department of Information Technology ITEC229 Client-Side.
1 © Netskills Quality Internet Training, University of Newcastle HTML Forms © Netskills, Quality Internet Training, University of Newcastle Netskills is.
XHTML & Forms. PHP and the WWW PHP and HTML forms – Forms are the main way users can interact with your PHP scrip Typical usage of the form tag in 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.
TJ 3043 – Web Application Development HTML Form. 2.0 Forms A form is the usual way to communicate information from a Web browser to a server HTML has.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 9 Key Concepts 1 Copyright © Terry Felke-Morris.
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.
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.
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.
TJ 3043 – Web Application Development HTML Form. 2.0 Forms - A form is the usual way information is gotten from a browser to a server - HTML has tags.
Internet & World Wide Web How to Program, 5/e. Revised by Dr. T. Tran for CSI3140 Copyright © Pearson, Inc All Rights Reserved.2.
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 9 Key Concepts 1 Copyright © Terry Felke-Morris.
Copyright © Texas Education Agency, All rights reserved.1 Web Technologies Website Forms / Data Acquisition.
©SoftMooreSlide 1 Introduction to HTML: Forms ©SoftMooreSlide 2 Forms Forms provide a simple mechanism for collecting user data and submitting it to.
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.
HTML FORMS Basharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan. 1.
20-753: Fundamentals of Web Programming 1 Lecture 6: Advanced HTML Fundamentals of Web Programming Lecture 6: Advanced 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.
CS3101 Internet Programming. Chapter 01 Introduction to XHTML 2Internet Programming - Chapter 01:XHTML Slides based on: Programming the World Wide Web.
Copyright © Pearson, Inc All Rights Reserved. WEEK 7: INTRODUCTION TO HTML5 Sotiris Charalambous.
Introduction to XHTML/HTML5 (part 2) Instructor: Sergey Goldman Based on Based on Internet & World Wide Web How To Program (multiple versions) 1.
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.
Lecture 16. A Very Brief Introduction to HTML and XHTML, part V Instructor: Jie Yang Department of Computer Science University of Massachusetts Lowell.
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
2440: 141 Web Site Administration Web Forms Instructor: Joseph Nattey.
Introduction to XHTML/HTML5 (part 2)
4 Introduction to XHTML.
Basic XHTML Tables XHTML tables—a frequently used feature that organizes data into rows and columns. Tables are defined with the table element. Table.
Chapter 5 Introduction to XHTML: Part 2
Unit I: Collecting Data with Forms
1 Introduction to XHTML.
Introduction to HTML: Forms
Presentation transcript:

Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.

Using rowspan and colspan with Tables  Figure 2.13 introduces two new attributes that allow you to build more complex tables.  You can merge data cells with the rowspan and colspan attributes ◦ The values of these attributes specify the number of rows or columns occupied by the cell. ◦ Can be placed inside any data cell or table header cell.  The br element is render as a line break in most browsers—any markup or text following a br element is rendered on the next line.  Like the img element, br is an example of a void element.  Like the hr element, br is considered a legacy formatting element that you should avoid using—in general, formatting should be specified using CSS. 2

 HTML5 provides forms for collecting information from users.  Figure 2.14 is a simple form that sends data to the web server for processing. 7

method Attribute of the form Element  A form is defined by a form element ◦ Attribute method specifies how the form’s data is sent to the web server. ◦ Using method = "post" appends form data to the browser request, which contains the protocol (HTTP) and the requested resource’s URL. ◦ The other possible value, method = "get", appends the form data directly to the end of the URL of the script, where it’s visible in the browser’s Address field. ◦ The action attribute of the form element specifies the script to which the form data will be sent 11

action Attribute of the form Element ◦ The action attribute of the form element specifies the script to which the form data will be sent. ◦ Since we haven’t introduced server-side programming yet, we set this attribute to for now. ◦ input elements that specify data to provide to the script that processes the form (also called the form handler). ◦ An input’s type is determined by its type attribute. 12

Hidden Inputs  Forms can contain visual and nonvisual components.  Visual components include clickable buttons and other graphical user interface components with which users interact.  Nonvisual components, called hidden inputs, store any data that you specify, such as addresses and HTML5 document file names that act as links. 13

text input Element  The text input inserts a text field into the form, which allows the user to input data.  The label element provides users with information about the input element’s purpose  The size attribute specifies the number of characters visible in the text field.  Optional attribute maxlength limits the number of characters input into a text field. 14

submit and reset input Elements  The submit input element is a button. ◦ When the submit button is pressed, the form’s data is sent to the location specified in the form’s action attribute.  The value attribute sets the text displayed on the button.  The reset input element allows a user to reset all form elements to their default values. 15

Additional Form Elements  Figure 2.15 contains a form that solicits user feedback about a website.  The textarea element inserts a multiline text area into the form.  The number of rows is specified with the rows attribute, and the number of columns (i.e., characters per line) with the cols attribute.  Default text can be specified in other input types, such as text fields, by using the value attribute. 16

 The password input inserts a password box into a form. ◦ Allows users to enter sensitive information, such as credit card numbers and passwords, by “masking” the information input with another character, usually asterisks. ◦ The actual value input is sent to the web server, not the asterisks that mask the input. 23

 The checkbox input element enables users to select and option. ◦ When the checkbox is selected, a check mark appears in the checkbox. Otherwise, the checkbox is empty ◦ checkbox es can be used individually and in groups. checkbox es that are part of the same group have the same name  radio buttons are similar to checkbox es, except that only one radio button in a group can be selected at any time. ◦ All radio buttons in a group have the same name attribute but different value attributes.  The select input provides a drop-down list of items. ◦ The name attribute identifies the drop-down list. ◦ The option element adds items to the drop-down list. 24

 The a tag can be used to link to another section of the same document by specifying the element’s id as the link’s href.  To link internally to an element with its id attribute set, use the syntax #id. 27