Introduction to Forms in HTML WebPages Mrs. Mustoe.

Slides:



Advertisements
Similar presentations
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.
Advertisements

Dreamweaver Forms Overview. Forms – A Little Review Most user/webpage communication is one way, like this: Most user/webpage communication is one way,
Tutorial 6 Creating a Web Form
Creating a Form with Selection Menus The SELECT control creates a selection menu This control only allows the visitor to choose pre-defined choices There.
Supplement Creating Forms. Objectives Show how forms are used How to create the Form element HTML elements used for creating input fields.
Using KompoZer -- a web editor A collection of video tutorials
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.
Gathering Requirements What do users want?. Information Gathering Techniques Surveys Interviews Focus Groups.
User guide Harris Broadcast May How to use Broadcast Go to: Click on broadcast.
Forms. Form An HTML form is a section of a document containing normal content, special elements called controls (checkboxes, radio buttons, buttons, etc.),
Salesforce.com Web to Leads. Unit Name Web to Leads A web to lead provides users the ability to gather information from their website visitors which automatically.
1 ADVANCED MICROSOFT WORD Lesson 15 – Creating Forms and Working with Web Documents Microsoft Office 2003: Advanced.
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.
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.
4-Sep-15 HTML Forms Mrs. Goins Web Design Class. Parts of a Web Form A Form is an area that can contain Form Control/Elements. Each piece of information.
PHP Forms and User Input The PHP $_GET and $_POST variables are used to retrieve information from forms, like user input.
Lesson 13: Building Web Forms Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6.
Chapter 3 Working with Text and Cascading Style Sheets.
Chapter 6: Forms JavaScript - Introductory. Previewing the Product Registration Form.
Project Four Forms Discuss form processing Describe the difference between client-side and server-side form processing Add a horizontal rule to a Web page.
Database Applications – Microsoft Access Lesson 9 Designing Special Queries Updated 4/11.
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.
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.
Linking Images to Other Areas within a Blackboard Course Darek Sady.
Adding User Interactivity – Lesson 51 Adding User Interactivity Lesson 5.
Dreamweaver MX Unit B CIS 205—Web Site Design and Development.
Activity 2 Building a survey form using Dreamweaver Procedure
INTRODUCTORY Tutorial 8 Creating Forms. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Create an HTML form Create fields for text Create.
© 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.
Chapter 8 Collecting Data with Forms. Chapter 8 Lessons Introduction 1.Plan and create a form 2.Edit and format a form 3.Work with form objects 4.Test.
 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.
Dreamweaver MX. 2 Overview of Templates n Forms enable you to collect data from ______. n A form contains ________ such as text fields, radio buttons,
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,
Registering for the SAT Online Course provided by Prince William County Schools.
1 Building FORMS In When a visitor enters information into a web form displayed in a web browser and clicks the submit button, the information is sent.
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.
Web Design - Forms. Forms Forms are everywhere on the Internet – Feedback Forms – Order Forms – Registration Forms – Surveys – Etc We will design forms...
How to use Draggo. Table of Contents 1) About Draggo 2) Creating an account 3) Get the button: Part 1 4) Get the button: Part 2 5) Page Setup (Basics)
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.
+ 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.
1 HTML forms (cont.)
©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.
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.
Web Authoring with Dreamweaver. Unit Objectives  Be able to define keywords: HTML, HTTP (protocol), browser, web server, client/server, tag, attribute,
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.
Chapter 9 Quick Links Slide 2 Performance Objectives Understanding Forms Planning Forms Creating Forms Creating Text Fields Creating Hidden Fields Creating.
1 Committed to Shaping the Next Generation of IT Experts. 03: Links and Forms HTML.
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.
Programming Process All programming solves a problem, so developing a program involves steps similar to any problem-solving task. There are five main.
INTERNET APPLICATIONS CPIT405 Forms, Internal links, meta tags, search engine friendly websites.
Basic HTML Page 1. First Open Windows Notepad to type your HTML code 2.
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.
Informatics Computer School CS114 Web Publishing HTML Lesson 4.
Ashima Wadhwa Java Script And Forms. Introduction Forms: –One of the most common Web page elements used with JavaScript –Typical forms you may encounter.
1 Function and Benefit. 2 - Saving Cost - Sharing Resource - Simple Management - Simple Structure - Etc …
SubAnywhere: Setup and Configuration
How to Write Web Forms By Mimi Opkins.
Collecting Information from the User
Unit I: Collecting Data with Forms
Creating Forms on a Web Page
Presentation transcript:

Introduction to Forms in HTML WebPages Mrs. Mustoe

What are they? to gather feedback or other information from our clients Setup is simple Retrieving data requires some programming and skill

General Setup Can be used anywhere in the body of a webpage ACTION – tells browser where to send the data to URL – webpage that contains the program that processes the data METHOD- how to send the forms data –Two options POST and GET –Dreamweaver defaults to POST –However – if outside links do not work – try GET

In Dreamweaver Be sure to change the view to Classic View Click on Forms Tab –Choose the New form button FIRST –Creates a red dotted line on your Design View –ONE and ONE needed PER Submit button –More on this in a minute

SUBMIT BUTTON Must be within a tag SUBMIT = control button for user to click VALUE = what the button says For example – watch the Online Lesson #1

RESET BUTTON Submit may also be used as a reset button for form controls Change the ACTION to RESET in your properties panel Or For Example – Watch online Lesson #1

Text Boxes for Single-Line Text Or –Field Name is the unique name given to this text box –In this case, it is the First Name that is tracked –Designed for one word responses only –For Example – Watch online Lesson #1

Bells and Whistles for Text Boxes Setting the default value –This will automatically appear in the text box to make filling it out less work for the user Setting the size of the box –Determines the length of the box in characters Limiting the length of the text –For zip codes of person’s age this will restrict the box to only accept 2 characters

Text Areas for Multi-Line Text Designed for open ended responses – How do you really feel about this issue? Or needs a tag WRAP will allow text to wrap to the next line (similar to Word Wrap in Notepad) –For Example – Watch online Lesson #1