HTML forms. Form elements  Forms consist of  Descriptions (explanation, instructions)  Places to enter information  free form (enter text)  check.

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

FORMs Lesson TBE 540. Prerequisites Before beginning this lesson, the learner must be able to… –Create basic web pages using a text editor and/or a web.
Supplement Creating Forms. Objectives Show how forms are used How to create the Form element HTML elements used for creating input fields.
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.
Personal Independent Networking Project HTML Forms by Chris Smith.
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 –
Chapter 10 Form Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
Lesson 8 Creating Forms with JavaScript
CST JavaScript Validating Form Data with JavaScript.
1 ADVANCED MICROSOFT WORD Lesson 15 – Creating Forms and Working with Web Documents Microsoft Office 2003: Advanced.
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.
Kevin Murphy Creating Forms Masters Project CS 490.
Chapter 5 Java Script And Forms JavaScript, Third Edition.
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.
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.
Forms. Forms Forms are used for e-commerce, online purchases, surveys, registrations, etc. Website using forms usually collect information and must use.
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.
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 7: Web Forms © 2007 Prosoft Learning Corporation All rights reserved ITD 110 Web Page Design.
INTRODUCTION. What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language,
JavaScript, Fourth Edition Chapter 5 Validating Form Data with JavaScript.
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
Website Development with PHP and MySQL Saving Data.
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.
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.
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.
HTML and FORMS.  A form is an area that can contain form elements.  Form elements are elements that allow the user to enter information (like text fields,
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.
Perl CGI What is "CGI"? Common Gateway Interface A means of running an executable program via the Web. Perl have a *very* nice interface to create CGI.
HTML Forms A Preliminary Step into Dynamic Web Fred Durao
Online Surveys Jacqui James and Malcolm Roberts School of Education.
Session 8: Working with Form iNET Academy Open Source Web Development.
Web Forms. Survey or poll Contact us Sign up for an newsletter Register for an event Submit comments or feedback about our site Log in to a members-only.
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.
Online Surveys Jacqui James Malcolm Roberts School of Education.
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.
©SoftMooreSlide 1 Introduction to HTML: Forms ©SoftMooreSlide 2 Forms Forms provide a simple mechanism for collecting user data and submitting it to.
HTML5 Forms Forms are used to capture user input …
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.
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.
Basic Webpage Design HTML Forms. Objectives Learn how to use HTML to create a form. Explain the concept of forms Know the difference of GET and POST Discuss.
FORMS How to collect information f XX rom visitors Different kinds of form controls New HTML5 form controls.
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.
1 HTML forms (cont.)
HTML Tutorial. What is HTML HTML is a markup language for describing web documents (web pages) HTML documents are described by HTML tags Each HTML tag.
Web Forms. Web Forms: A form allows our web visitors to submit information to us. Some examples uses for forms are to let the web user contact us, fill.
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.
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 Tables Tables are defined with the tag. A table is divided into rows (with the tag), and each row is divided into data cells (with the tag). td stands.
Ashima Wadhwa Java Script And Forms. Introduction Forms: –One of the most common Web page elements used with JavaScript –Typical forms you may encounter.
Simple PHP Web Applications Server Environment
Creating and Processing Web Forms
Chapter 5 Validating Form Data with JavaScript
Objectives Design a form Create a form Create text fields
Introducing Forms.
Forms, cont’d.
Creating Forms on a Web Page
Lesson 6: Web Forms.
Presentation transcript:

HTML forms

Form elements  Forms consist of  Descriptions (explanation, instructions)  Places to enter information  free form (enter text)  check boxes choose only one choose all that are appropriate  selection lists (control size of the display area) choose one choose all that are appropriate  Submit "button”  Clear form "button"

Form specific tags  Within the body of an html document:... All the formatting appropriate to the form It is possible to have more than one form on a page. Each must have a tag and a submit tag.

Getting input from the user  Forms exist to collect input from a user. The input is transmitted to a program to execute and a response comes back and is displayed for the user.  -- described by attributes.  -- there is a begin and end to this tag, but nothing appears between them.

Input types -- described by attributes. Examples Form activity buttons: Radio buttons, usually appear as list items: Cats are great I like dogs

Input - checkboxes  Checkboxes allow more than one selection   Examples: Jazz Classical Unlike the radio boxes, each choice is a separate variable with a value of “on” or “off”.

Input -- scrolling list Hamburgers Hot dogs Chicken Vegetarian meal Other options in select are multiple and size. Multiple allows more than one choice to be selected. Size determines how many of the options are visible when the form is displayed.

Responding to the form #!/usr/gnu/bin/perl print "Content-type: text/html\n\n"; print " Survey Echo \n"; print " \n"; print " Survey Echo \n"; # Get the input $buffer= ;

Responding to the form - 2 # Split the name-value = split(/&/, $buffer); foreach $pair { ($name, $value) = split(/=/, $pair); # Un-Webify plus signs and %-encoding $value =~ tr/+/ /; $value =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg; $FORM{$name} = $value; }

Responding to the form -3 print " Hello, $FORM{myName}, thanks for filling in our survey "; print " Here is a summary of your responses "; print "\n\n"; print " Your favorite pets are $FORM{petkind}"; print "\n ";

Responding to the form - 4 print " In music, you like \&\#183\; "; foreach $pair { ($name, $value) = split(/=/, $pair); if ($value eq "on") {print "$name \&\#183\; "}}; print "\n"; print " Your meal choices are $FORM{maincourse} or $FORM{second}.\n";

Responding to the form - 5 print " Your interests include the following: "; print "\&\#183\;\n"; foreach $pair { ($name, $value) = split(/=/, $pair); #print "$name = $value\n"; $value =~ tr/+/ /; if ($name eq "interests") {print "$value \&\#183\; "}}; print "\n"; print" ";

Responding to the form - 6  print " Here is your comment: ";  print "$FORM{comments}";