Day 22, Slide 1 CSE 103 Day 22 Non-students: Please logout by 10:12. Students:

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

23-Aug-14 HTML/XHTML Forms. 2 What are forms? is just another kind of XHTML/HTML tag Forms are used to create (rather primitive) GUIs on Web pages Usually.
24-Aug-14 HTML Forms. 2 What are forms? is just another kind of HTML tag HTML forms are used to create (rather primitive) GUIs on Web pages Usually the.
Dreamweaver Forms Overview. Forms – A Little Review Most user/webpage communication is one way, like this: Most user/webpage communication is one way,
Video, audio, embed, iframe, HTML Form
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.
Tutorial 6 Working with Web Forms
1 CSE Students: Please do not log in yet. Check-in with Brian in the back. Review Days 3 and 4 in the book. Others: Please save your work and logout.
Form Basics CS Web Data  Most interesting web pages revolve around data  examples: Google, IMDB, Digg, Facebook, YouTube, Rotten Tomatoes  can.
U:/msu/course/cse/103 Day 23, Slide 1 Review of Day 22 What query did you use to search for an actor by name? –Return matches.
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.
Figure 1. Hit analysis in 2002 of database-driven web applications Hits by Category in 2002 N = 73,873 Results Reporting 27% GME 26% Research 20% Bed Availability.
Tutorial 6 Forms Section A - Working with Forms in JavaScript.
Form Handling, Validation and Functions. Form Handling Forms are a graphical user interfaces (GUIs) that enables the interaction between users and servers.
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.
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.
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.
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.
Lesson 13: Building Web Forms Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6.
Chapter 6: Forms JavaScript - Introductory. Previewing the Product Registration Form.
XHTML Introductory1 Forms Chapter 7. XHTML Introductory2 Objectives In this chapter, you will: Study elements Learn about input fields Use the element.
HTML II. Factors to consider in designing a website. Organizing your files. HTML Tables. Unordered Lists. Ordered Lists. HTML Forms. Learning Objectives.
1 PHP and MySQL. 2 Topics  Querying Data with PHP  User-Driven Querying  Writing Data with PHP and MySQL PHP and MySQL.
Dreamweaver – Dreamweaver Extras Web Design Section 8-4 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.
Robinson_CIS_285_2005 HTML FORMS CIS 285 Winter_2005 Instructor: Mary Robinson.
Start the slide show by clicking on the "Slide Show" option in the above menu and choose "View Show”. or – hit the F5 Key.
Website Development with PHP and MySQL Saving Data.
 Whether using paper forms or forms on the web, forms are used for gathering information. User enter information into designated areas, or fields. Forms.
Forms and Server Side Includes. What are Forms? Forms are used to get user input We’ve all used them before. For example, ever had to sign up for courses.
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.
Introduction to HTML Part 3 Chapter 2. Learning Outcomes Identify how to design frames. Explain frames’ attributes. Describe the method on designing forms.
76 © 1998, 1999, 2000 David T. Gray, Howard Duncan, Jane Kernan Frames When displaying information in a browser, it is sometimes useful to divide the display.
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.
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.
PowerPoint Extras. Eyes to the front please! Action Buttons.
Creating Web Page Forms. Introducing Web Forms Web forms collect information from users Web forms include different control elements including: –Input.
1 HTML Forms
Session 8: Working with Form iNET Academy Open Source Web Development.
ITM © Port, Kazman1 ITM 352 More on Forms 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.
1 CSC160 Chapter 7: Events and Event Handlers. 2 Outline Event and event handlers onClick event handler onMouseOver event handler onMouseOut event handler.
January 2006Colby College ITS Setting Up Course Pages.
U:/msu/course/cse/103 Day 21, Slide 1 CSE 103 Makeups –If you didn’t take one over the weekend, take one TUESDAY or WEDNESDAY!
Web Page Design Forms! Website Design. Objectives What forms can do The Attributes of the form tag Using Textboxes Textareas Checkboxes Radio buttons.
©SoftMooreSlide 1 Introduction to HTML: Forms ©SoftMooreSlide 2 Forms Forms provide a simple mechanism for collecting user data and submitting it to.
8 Chapter Eight Server-side Scripts. 8 Chapter Objectives Create dynamic Web pages that retrieve and display database data using Active Server Pages Process.
Tutorial 6 Working with Web Forms. 2New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives Explore how Web forms interact with.
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.
COS 125 DAY 17. Agenda  Assignment 7 not finished grading  Assignment 8 posted Due April 9  Capstone progress reports due  Quiz 2 Corrected 2 A’s,
Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
INTERNET APPLICATIONS CPIT405 Forms, Internal links, meta tags, search engine friendly websites.
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 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.
Advanced HTML Tags:.
ITM 352 HTML Forms, Basic Form Processing
Forms, cont’d.
Presentation transcript:

Day 22, Slide 1 CSE 103 Day 22 Non-students: Please logout by 10:12. Students: –BTs taken before yesterday are all graded –Take another make-up sometime between Friday April 1 and Tuesday April 5 –Do not ditch class just to go to some silly basketball game(s) and/or riot(s) –Find a partner, get logged in, and start Dreamweaver. Then start reading links from Day 22 classwork page.

Day 22, Slide 2 Text Reading - HTML Forms What does a form do on a web page? What is a graphical user interface (GUI)? Which TYPE attributes of an INPUT tag can be used in a form? What user interface elements do they create on your page? What other HTML tags can be part of a form?

Day 22, Slide 3 Review: Parameters via GET Parameters can be passed in a URL Example: Same syntax can be used by forms in a GET operation Each parameter becomes a special PHP variable, of the form $_GET['key']=value, where key is the name before = and value is after: –…/actor.php?ActorID=1234 => $_GET['ActorID']=1234 Use curly braces { } if used in query strings –"…WHERE ActorID = {$_GET['ActorID']}…"

Day 22, Slide 4 Hooking the pages together (I) New CSE 103 support fuction: table_from_query_with_links() –Check the documentation for examples Modify your actor.php file as needed (you need to change two things): –Change your query that lists the movies an actor has been in so that each movie title links to the movie.php page for that movie

Day 22, Slide 5 Elements Elements Are included in pages inside tags Two important attributes –type=: chooses which UI element to display Options include "text", "hidden", "password", "checkbox", "radio", "button" –name=: the parameter that is assigned the value for this input Controls name of variable in form-processing page (more on this later)

Day 22, Slide 6 Input Example Type the movie title: Type the movie title: Additional text could be put here. Additional text could be put here. </form> Dreamweaver’s INSERT menu has Form tools –Start by inserting a Form, then Form Elements tag has two attributes (action and method) that we will look at later. Leave defaults in place for now. tag has two attributes (action and method) that we will look at later. Leave defaults in place for now.

Day 22, Slide 7 Movie Search page Create a new page called find_form.php Put a text box on the page that asks the user for part of a movie title –Create a form first and put the text box in that Leave action and method defaults alone –Submit this text as the parameter movietitle You need an element with name="movietitle" –Add a submit button (inside the form!) labeled Search which activates the form It won't do anything yet; we'll fix that next

Day 22, Slide 8 Attributes for the tag action attribute –Indicates what script/program will process the data –If just a filename, the file must be in the same directory as the page with the form method attribute is get or post –If the parameters are used only in 1 or more SELECT queries, use get –If the parameters are used in any ACTION queries, use post –If you submit a form using post and if you reload the page, your browser will ask if it's OK to send the data again. Usually you can answer yes.

Day 22, Slide 9 Create a Form Handler Construct a page findtitle_handler.php to receive the movietitle parameter –Modify find_form.php; set action= and method= for the tag On findtitle_handler.php: –Keys for $_GET match name= from –Keys for $_GET match name= from e.g., => $_GET['movietitle']=whatever you typed in form –Display all movies having movietitle text within their actual titles (show MovieTitle and Year) After this works, continue to next slide

Day 22, Slide 10 Improving your form handler Once your form handler correctly displays a list of movie titles/years, modify it so that each movie displayed links to movie.php for that movie –Look at how you did this in another page Always think about this when working: Did I do something like this earlier that I could copy / paste and quickly change?

Day 22, Slide 11 Second Form Exercise Add a SECOND FORM to SAME page find_form.php –Must be a totally separate form so that it can have a different action= attribute This form gets an actor's name from the user (needs its own submit button too) –Use a one-word name= value for the element The new target page findactor_handler.php should display all actors where either their first OR last name matches the input –Valid search: Robert (finds Robert Redford, Julia Roberts) –Invalid search: Robert Redford (first OR last only)

Day 22, Slide 12 Homework Finish classwork Make findactor_handler.php and movie.php link to Actor pages Extra practice modifying search results using HTML formatting tags