Designing Forms Lesson 10.

Slides:



Advertisements
Similar presentations
Tutorial 6 Creating a Web Form
Advertisements

XP 1 Creating Web Page Forms Designing a Product Registration Form Tutorial 6.
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
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.
Forms Describe common uses of forms on web pages
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.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 9 Key Concepts 1 Copyright © Terry Felke-Morris.
Web Development & Design Foundations with XHTML Chapter 9 Key Concepts.
Chapter 10 Form Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
Principles of Web Design 6 th Edition Chapter 11 – Web Forms.
1 Web Developer & Design Foundations with XHTML Chapter 6 Key Concepts.
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.
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.
Forms and Form Controls Chapter What is a Form?
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 © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 9 Key Concepts 1 Copyright © Terry Felke-Morris.
HTML Forms.
LOGO FORMs in HTML CHAPTER 5 Eastern Mediterranean University School of Computing and Technology Department of Information Technology ITEC229 Client-Side.
Web Development & Design Foundations with XHTML Chapter 9 Key Concepts.
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.
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.
Week 12 Working with Forms Objectives Understand how forms work Understand form syntax Create input objects Build forms within tables Build and.
Creating Web Page Forms. Introducing Web Forms Web forms collect information from users Web forms include different control elements including: –Input.
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.
Web Development & Design Foundations with XHTML Chapter 9 Key Concepts.
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.
Tutorial 6 Working with Web Forms. 2New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives Explore how Web forms interact with.
Web Development & Design Foundations with XHTML Chapter 9 Key Concepts.
Tutorial 6 Creating a Web Form
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 III (Forms) Robin Burke ECT 270. Outline Where we are in this class Web applications HTML Forms Break Forms lab.
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.
2440: 141 Web Site Administration Web Forms Instructor: Joseph Nattey.
Tutorial 6 Working with Web Forms
Web Forms.
Client-Side Internet and Web Programming
Web Forms.
How to Write Web Forms By Mimi Opkins.
Web Development & Design Foundations with HTML5 8th Edition
HTML Forms Pat Morin COMP 2405.
FORMS IN HTML.
(and available form fields)
FORMS Explained By: Sarbjit Kaur.
ITE 115 Creating Web Page Forms
Web Programming– UFCFB Lecture 10
ARUSHA TECHNICAL COLLEGE WEB DESIGN(html forms)
Web Development & Design Foundations with HTML5 8th Edition
HTML: Basic Tags & Form Tags
Creating Form Elements
Web Development & Design Foundations with H T M L 5
FORM OBJECT When creating an interactive web site for the Internet it is necessary to capture user input and process this input. Based on the result of.
CNIT 131 HTML5 - Forms.
Web Development & Design Foundations with H T M L 5
Principles of Web Design 5th Edition
Creating Forms on a Web Page
Basics of Web Design Chapter 10 Form Basics Key Concepts
Lesson 6: Web Forms.
HTML Forms
Web Forms.
Unit 5 Create Forms.
HTML: Basic Tags & Form Tags
Presentation transcript:

Designing Forms Lesson 10

Overview of Forms Forms are used all over the Web to Types of forms: Accept information Provide interactivity Types of forms: Search form, Order form, Newsletter sign-up form, Survey form. Etc….

How Forms Work You visit a Web page with a form, fill it out, and submit it The browser sends the data to the Web server The Web server receives the form data, and then passes it off to a Web application to be processed The Web application processes the data and creates a response, which it sends back to the Web server The Web server sends the Web application’s response to the browser

How Forms Work The form itself is written in HTML And, while HTML supports the creation of forms, it does not include tools to process the information. A program on the Web server is needed to store or manipulate the data in some manner

Forms and Web Server-Based Programs Server-based programs are written in many languages The earliest and most commonly used are Common Gateway Interface (CGI) scripts that are written in Perl. Other popular languages include: ASP ColdFusion C/C++ PHP VBScript

Forms Syntax Five basic form elements are commonly supported by the major browsers: <form> <input> <select> <option> <textarea>

Forms Syntax (continued) HTML 4.01 introduced five new form elements: <button> <fieldset> <label> <legend> <optgroup>

The <form> tag The <form> tag holds all the elements that make up the form <form attributes> elements </form> A variety of <form> attributes tells the browser how to handle the form data

<form> attributes action - specifies the filename and location of the program that processes the form method - specifies how your Web browser sends data to the server get – default value, form data passed in URL post – more secure, form data passed in HTTP Entity Body name – identifies the form id – identifies the form <form action=“http://www.website.com/ cgi_bin/script.cgi” method=“post” name=“survey” id=“survey”>… </form>

Input Objects

Input Objects The <input> element defines many of the form input object types Text box Radio buttons Check boxes Etc. The type attribute specifies the type of input object Example: <input type=“textbox” />

Text Boxes The text box is the most commonly used form element Attributes type=“text” name size maxlength value <input type=“text” name=“firstname” size=“20” maxlength=“35” />

Password Boxes Used to accept text information that needs to be hidden as it is entered Attributes: type=“password” name size maxlength value <input type=“password” name=“password” size=“20” maxlength=“35” />

Check Boxes Used to allow the user to select one or more of a group of predetermined items Attributes: type=“checkbox” name checked value

Radio Buttons Used to allow the user to select exactly one from a group of predetermined items Each radio button in a group is given the same name and a unique value Attributes: type=“radio” name checked value

Submit & Reset Buttons The submit and reset buttons let the user choose whether to send the form data or start over <input type=“submit” value=“Submit” /> <input type=“reset” value=“Clear Form” />

Hidden Fields This form element is not displayed on the web page. Hidden form fields can be accessed by both client-side and server-side scripting and are sometimes used to contain information needed as the visitor moves from page to page. Attributes: type=“hidden” name value

Custom Event Buttons Custom event buttons activate a function in some associated program or script Attributes: type=“button” name value

Submit a File Users can select a file on their own computer and send it to the server Attributes type=“file” name

Image for the Submit Button You can choose an image file and use it instead of the default submit button. Attributes: type=“image” name src <input type="image" src="submit.gif" name="submitformbtn" />

Other Form Objects

The <select> Element The <select> element lets you create a list box or scrollable list of selectable options Attributes: name, size, multiple Each individual item in the list is specified using the <option> element. Attributes: value, selected

The <select> element <select name="boats"> <option>Canoe</option> <option>Jon Boat</option> <option>Kayak</option> <option>Bass Boat</option> <option>Family Boat</option> </select>

Setting the Selection List Size You can change the number of options displayed in the selection list by modifying the size attribute: <select size=“value”>

The <textarea> element The <textarea> element lets you create a larger text area for user input. Attributes: name cols rows value

The <textarea> element <p>Please comment on your concerns regarding Internet privacy and safety:<br /> <textarea name="comments“ cols="75“ rows="5"> </textarea> </p>

The <label> element Associates a text label with a form element Two different formats <label>Email: <input type=“text” name=“CustEmail” /> </label> or <label for="email ">Email: </label> <input type="text" name="CustEmail" />

Field Sets HTML and XHTML allow you to organize option buttons into a group of fields called field sets. <fieldset> creates the field set <legend> Adds a caption to the field set

Field Sets <fieldset> <legend> Oatmeal Varieties </legend> <p>Apple Cinnamon<input type="radio" name=“oatmealtype” value="applecinnamon“ /></p> <p>Nutty Crunch<input type="radio“ name=“oatmealtype” value="nuttycrunch" /></p> <p>Brown Sugar<input type="radio" name=“oatmealtype” name="brownsugar” /></p> </fieldset>

Tips for Creating Effective Forms Mark fields that are required, but also limit the number of un-required fields. If you need to collect a lot of information, break the form into manageable sections spread out over several pages. Provide detailed instructions about what users are expected to do. Don’t assume that your form is self-explanatory.

Free Remotely-hosted Form Processing Many web host providers offer free scripts for their clients. Contact their support area or FAQ to learn more about their services. Some web sites that offer FREE remotely hosted scripts (in return for displaying an ad): http://www.expressdb.com/ http://wufoo.com http://response-o-matic.com http://master.com http://www.formmail.com http://formbuddy.com http://formassembly.com