Unit 7 – Working with Forms 1. Creating a form 2. Accessing the submitted data 3. Common operations on forms.

Slides:



Advertisements
Similar presentations
LIS651 lecture 0 forms Thomas Krichel
Advertisements

Lecture 6/2/12. Forms and PHP The PHP $_GET and $_POST variables are used to retrieve information from forms, like user input When dealing with HTML forms.
PHP Workshop ‹#› Forms (Getting data from users).
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.
USER INTERACTIONS: FORMS
Forms. Form An HTML form is a section of a document containing normal content, special elements called controls (checkboxes, radio buttons, buttons, etc.),
Chapter 10 Form Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
1 Web Developer & Design Foundations with XHTML Chapter 6 Key Concepts.
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.
ITM © Port, Kazman1 ITM 352 HTML Forms, Basic Form Processing.
Advance Database Management Systems Lab no. 5 PHP Web Pages.
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.
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.
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.
Lecture 6 – Form processing (Part 1) SFDV3011 – Advanced Web Development 1.
Forms and Form Controls Chapter What is a Form?
CSE 382/ETE 334 Internet and Web Technology Presented By Dr. Shazzad Hosain Asst. Prof. EECS, NSU.
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.
HTML - Forms By Joaquin Vila, Ph.D.. Form Tag The FORM tag specifies a fill-out form within an HTML document. More than one fill-out form can be in a.
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.
BBK P1 Module2010/11 : [‹#›] Forms (Getting data from users)
 Whether using paper forms or forms on the web, forms are used for gathering information. User enter information into designated areas, or fields. Forms.
HTML Forms.
LOGO FORMs in HTML CHAPTER 5 Eastern Mediterranean University School of Computing and Technology Department of Information Technology ITEC229 Client-Side.
HTML - Forms By Joaquin Vila, Ph.D.. Form Tag The FORM tag specifies a fill-out form within an HTML document. More than one fill-out form can be in a.
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.
HTML FORMS GET/POST METHODS. HTML FORMS HTML Forms HTML forms are used to pass data to a server. A form can contain input elements like text fields, checkboxes,
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.
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.
Creating Web Page Forms. Introducing Web Forms Web forms collect information from users Web forms include different control elements including: –Input.
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,
Session 8: Working with Form iNET Academy Open Source Web Development.
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.
HTLM Forms CS3505. Form Handling in Browser html User Files out form WEbBROWSErWEbBROWSEr User read response submit Get URL?input html Get file html script.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 9 Key Concepts 1 Copyright © Terry Felke-Morris.
Web Page Design Forms! Website Design. Objectives What forms can do The Attributes of the form tag Using Textboxes Textareas Checkboxes Radio buttons.
+ 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.
HTML Form Inputs. Creating a basic form …content goes here…
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.
HTML FORMS Basharat Mahmood, Department of Computer Science,CIIT,Islamabad,Pakistan. 1.
Web Technology HTML and PHP.
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 PHP HTTP After this lecture, you should be able to know: How to create and process web forms with HTML and PHP. How to create and process web forms with.
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 FORM. Form HTML Forms are used to select different kinds of user input. HTML forms are used to pass data to a server. A form can contain input elements.
HTML III (Forms) Robin Burke ECT 270. Outline Where we are in this class Web applications HTML Forms Break Forms lab.
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.
Unit 4 Working with data. Form Element HTML forms are used to pass data to a server. A form can contain input elements like text fields, checkboxes, radio-buttons,
FORMS Explained By: Jasdeep Kaur. Lecturer, Department of Computer Application, PGG.C.G., Sector: 42, Chandigarh.
XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 1 Creating Web Page Forms Designing a Product Registration Form Tutorial 6.
Simple PHP Web Applications Server Environment
2440: 141 Web Site Administration Web Forms Instructor: Joseph Nattey.
How to Write Web Forms By Mimi Opkins.
CIIT-Human Computer Interaction-CSC456-Fall-2015-Mr
Passing variables between pages
Validation and Building Small Apps
Introducing Forms.
Creating Forms on a Web Page
PHP-II.
Presentation transcript:

Unit 7 – Working with Forms 1. Creating a form 2. Accessing the submitted data 3. Common operations on forms

1 - Creating a form

Form - <form action = ".." method = "...">... ● action = URL ● method = get | post

Text field - For single line text input: <input type = "text" name = "mytextfield" value = "initial value" size = "50" maxlength = "50"/>

Password - For single line masked text input <input type = "password" name = "pwd"/>

Radio button - Single choice Male: Female:

Checkbox - Multiple choice <input type = "checkbox" name = "sailing"/>

Labelling ● Old School (Strict DTD only): Choice 1 ● Strict DTD compliant: Choice 1: ● Elegant: Choice 1

Drop-down list Single choice United Kingdom United States of America North Korea Belgium

(multiple) selection list Multiple choice United Kingdom United States of America North Korea Belgium

Text area - For multiple line text input <textarea name="myTextArea" cols="30" rows="5">

Hidden fields - To send information with the form <input type="hidden" name="hidden1" value="Form example for demo"/>

Button - or <input type="submit" name="submitButton" value="Submit Form"/> <button type="submit" name="submitButton"> SubmitForm

2 - How does one access the submitted data?

Using PHP ● Data stored in a variable ● Depends on submission method: – GET – POST ● If POST, either: – $varName (requires special configuration) – $_POST['varName'] (recommended) – $HTTP_POST_VARS['varName'] ● If GET, use: – $_GET['varName']

Two basic approaches ● Approach 1 (today) – HTML form – PHP script to process it ● Approach 2 (in the tutorial) – PHP script containing the form and the processing script: <form action = " method="post">

Examples ● Display content of $_POST ● Display value of text input field ● Display value of the hidden field ● Display content of the text area ● Display value(s) of (multiple) selection list

3 - Common operations

1. Check existence ● Has a variable been set? if (isset($_POST['myCheckbox2'])) echo "Option 2 was selected"; else echo "Option 2 wasn't selected.";

2. Check which button was pressed ● Same as above if (isset($_POST['button1'])) echo "Button 1 was pressed"; elseif (isset($_POST['button2'])) echo "Button 2 was pressed"; else echo "no button pressed";

3. data $to = $subject = "form data"; $body = "Country chosen by the user: $_POST['country1'] "; mail($to,$subject,$body); Requires appropriate server configuration (this is not permitted on the school’s server).

Example 1: mandatory text field ● Check that the value of the text field contains characters and redirect the user accordingly ● Two cases: 1. Separate form and processing script 2. Processing is done in the form

Example 1 Case 1 ● In processing script: <?php if ($_POST['myTextField'] == ''){ header("location: form.html"); }?> ● Problem: – No information regarding the error is passed back to the form ● Solution: – Make the form a PHP script – Send back some information about the error – Will be done in the tutorial

Example 2: directed study validate phone number ● Requirement: ensure that phone number has the following format: +44dddddddddd, where d is a digit. ● Hint: – Check that the string has 13 characters – Check that the first three characters (substring) is equal to ‘+44’.

4. Error checking ● Ensure entered data is valid ● Examples – Mandatory fields – Postcode format – Phone number format – Date format – etc

Variable scope

Six scope rules – directed study ● Built-in superglobal ● Constants ● Global (2 flavours) ● Static ● Local (by default) Read:

Superglobals ● $GLOBALS ● $_SERVER ● $_GET ● $_POST ● $_COOKIE ● $_FILES ● $_ENV ● $_REQUEST ● $_SESSION

Summary ● Form creation ● Form processing ● Some common operations ● To be completed during the tutorial