Session 8: Working with Form iNET Academy Open Source Web Development.

Slides:



Advertisements
Similar presentations
LIS651 lecture 0 forms Thomas Krichel
Advertisements

HTML Forms. collect information for passing to server- side processes built up from standard widgets –text-input, radio buttons, check boxes, option lists,
Tutorial 6 Creating a Web Form
>> Introduction to HTML: Forms. Introduction to HTML 5 Important HTML Tags HTML tags and attributes Images Hyperlinks Lists –{ordered | unordered | definition}
Supplement Creating Forms. Objectives Show how forms are used How to create the Form element HTML elements used for creating input fields.
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.
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.
Form Basics CS Web Data  Most interesting web pages revolve around data  examples: Google, IMDB, Digg, Facebook, YouTube, Rotten Tomatoes  can.
USER INTERACTIONS: FORMS
Tutorial 6 Forms Section A - Working with Forms in JavaScript.
ECA 228 Internet/Intranet Design I Forms. ECA 228 Internet/Intranet Design I Forms forms are a way for a user to communicate with you – text fields –
Forms, Validation Week 7 INFM 603. Announcements Try placing today’s example in htdocs (XAMPP). This will allow you to execute examples that rely on PHP.
MS3304: Week 4 PHP & HTML Forms. Overview HTML Forms elements refresher Sending data to a script via an HTML form –The post vs. get methods –Name value.
Advance Database Management Systems Lab no. 5 PHP Web Pages.
HTML Forms What is a form.
XP Tutorial 6New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Creating Web Page Forms Designing a Product Registration Form Tutorial.
1 Creating Web Forms in HTML Web forms collect information from customers Web forms include different control elements including: –Input boxes –Selection.
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.
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.
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.
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 7: Web Forms.
 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.
LOGO FORMs in HTML CHAPTER 5 Eastern Mediterranean University School of Computing and Technology Department of Information Technology ITEC229 Client-Side.
ITCS373: Internet Technology Lecture 5: More HTML.
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.
HTML Forms A Preliminary Step into Dynamic Web Fred Durao
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.
1 Form Elements  Form elements have properties: Text boxes, Password boxes, Checkboxes, Option(Radio) buttons, Submit, Reset, File, Hidden and Image.
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 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.
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.
Lecture 6 More Advanced HTML Boriana Koleva Room: C54
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.
Form Handling IDIA 618 Fall 2014 Bridget M. Blodgett.
©SoftMooreSlide 1 Introduction to HTML: Forms ©SoftMooreSlide 2 Forms Forms provide a simple mechanism for collecting user data and submitting it to.
HTML FORMS The TEXT Object Presented By: Ankit Gupta.
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.
HTML Forms.
Week 10: HTML Forms HNDIT11062 – Web Development.
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.
Since you’ll need a place for the user to enter a search query. Every form must have these basic components: – The submission type defined with the method.
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.
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.
1 Web Engineering Forms Lecture 05. FORMS Its how HTML does interactivity. There are quite new feature in HTML5. But the fundamental idea does not change.
INTERNET APPLICATIONS CPIT405 Forms, Internal links, meta tags, search engine friendly websites.
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.
Ashima Wadhwa Java Script And Forms. Introduction Forms: –One of the most common Web page elements used with JavaScript –Typical forms you may encounter.
2440: 141 Web Site Administration Web Forms Instructor: Joseph Nattey.
Creating and Processing Web Forms
Client-Side Internet and Web Programming
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
Basic XHTML Tables XHTML tables—a frequently used feature that organizes data into rows and columns. Tables are defined with the table element. Table.
Introducing Forms.
Web Systems Development (CSC-215)
Creating Form Elements
CS3220 Web and Internet Programming HTML Tables and Forms
Creating Forms on a Web Page
Lesson 6: Web Forms.
Presentation transcript:

Session 8: Working with Form iNET Academy Open Source Web Development

Objectives Bulding a Form and Accessing Form’s Values Types of Input & Validating Data Query the DB with form data Using Template

Building a Form Every form must have three basic components The submission type defined with the method keyword One or more input elements defined with the input tag The destination to go to when submitted defined with the action keyword

Accessing Submitted Form Values Using

Accessing Submitted Form Values (cont.) Use super global variables $_GET[field] $_POST[field] $_REQUEST[field] register_globals should be off

Default Values

Types of Input – Text boxes Used to capture strings from the user The name attribute: used to reference to the value The size attribute: specifies the length of the text box The maxlength attribute: determines the maximum number of characters

Types of Input – Text areas A text area is defined using the text area element The name attribute The cols attribute: specifies how many character columns to create The rows attribute: specifies how many rows to create

Types of Input – Check boxes Used to give users several different options Use input element with type=“checkbox” The name attribute The value attribute

Types of Input – Radio Button Give the user several choice but can choose only one value

Types of Input - Hidden The information of hidden fields is not visible to the users

Types of Input - Selects Present a list of options to the user Attributes of the The name attribute The size attribute: specifies how many lines of the list appear in the browser window The multiple attribute: allow the user to select more than one item from the list Attributes of the The selected attribute specifies a default selection The value attribute specifies a value that is different from the label of the option. If no value is specidied, the label is used as the value

Types of Input – Selects (cont.)

Working with Multiple Values

Working with Multiple Values (cont.)

Validating Data Always validate data getting from users Validating checkboxes, radio buttons and selects

Validating Data (cont.) Validating text boxes and text areas Decide which information is valid and which is not Check for empty values Check for other conditions in a field

Building a Feet-to-Meters Converter in PHP

Building a Time-Zone Conversion Utility in PHP

Building a Time-Zone Conversion Utility in PHP (cont.)

Query the Db with Form Data

Query the Db with Form Data (cont.)

Practice In this practice, you will Write an program to search for a book based on only one of three following condition Author Title Price