Presentation is loading. Please wait.

Presentation is loading. Please wait.

HTML IV (Forms) Robin Burke ECT 270.

Published byGerard Malone Modified over 6 years ago

Similar presentations

Presentation on theme: "HTML IV (Forms) Robin Burke ECT 270."— Presentation transcript:

1 HTML IV (Forms) Robin Burke ECT 270

2 Outline Where we are in this class Web applications HTML Forms

3 Introduction to the course
Overview of networking, the Internet and the WWW, Unix survival 1st week HTML 3 weeks Cascading Style Sheets 1.5 weeks JavaScript 4 weeks

4 Last class on HTML Mastery of this material will be assumed Midterm
JavaScript Final Project

5 Web application Application Web application
"A complete, self-contained program that performs a specific function directly for the user" Web application an application delivered over the WWW

6 Web applications Core of web development Partly not in our scope But
90% of the web's "pages" are generated from user input only 10% are static pages Partly not in our scope ECT 353 teaches how to build those kinds of applications But web applications need input input comes from HTML forms

7 Example applications Course online CampusConnect course search
Ugly! Any search engine

8 Architecture

9 Architecture Web client Request Web server Application browser
URL + parameters input from the user Web server dispatches request to application Application processes input produces output either page or data processed by web server to produce page

10 Input data Either Form data Uploaded files part of URL (GET method)
part of request body (POST method) Form data name-value pairs ? syntax for GET Uploaded files "multi-part" content POST only

11 Building Web Applications
Simplest run a program taking user's input CGI, ISAPI, Java servlet Easiest to develop write a web page with special scripting behavior ASP, JSP, PHP, ColdFusion Most flexible separate data from HTML XML, Struts

12 For this class "Echo" application Displays a page with the input

13 What all these share... the need to get user input from a web page
Form of input name-value pair How to get from user? depends on the data

14 Form element Form element
identify a part of the page in which input tags can be placed defines the URL where user data will be sent defines processing mechanism

15 Input elements name and value attributes
user can change the value attribute how depends on the type text field selection list radio button, etc

16 Example

17 Simple example <html> <head>
<title>Simple form example</title> </head> <body> <form action=" method="get"> <input name="field_example" id="field_example" type="text" value="Type here"> <input type="submit"> </form> </body> </html>

18 Input elements Treated like other page elements
can be organized into paragraph, tables, etc. Form layout is almost always table-based All use the same base element INPUT what kind of input controlled by the type attribute

19 Input elements

20 Text field Example Attributes
<input type="text" name="first_name" id="first_name" value="John Smith" size="20" maxlength="40"> Attributes type attribute determines the kind of input name & id are equivalent but id is not widely implemented value is initial contents of field size is width of field maxlength is the number of chars accepted

21 Labels No inherent labeling Otherwise regular HTML text used
HTML 4.0 adds label element only available where id attribute is recognized Otherwise use text and layout to identify form elements

22 Label element Benefits Element can be scripted
can be handled by non-visual browsers Element <label for="field_id">Label text</label> place where you want the text to appear

23 Checkboxes Allow a simple interface to a yes/no choice Attributes
<input type="checkbox" name="name" id="name" value="it was checked" checked> Attributes value will be included in the parameters if the box is checked checked controls whether the box is checked by default Not XHTML compliant checked="true"

24 Example <form action=" method="post"> <table width="75%" border="0"> <tr> <td width="25%"><label for="label">Enter query:</label></td> <td width="75%"> <input name="field_example" id="field_example3" type="text" value=""> </td> </tr> <td><label for="checkbox">Local search only:</label></td> <td><input type="checkbox" name="checkbox" value="checkbox" checked></td> <td></td> <td><input name="submit" type="submit"></td> </table> </form>

25 Radio buttons Allow the user to select one from a (short) list of options <input type="radio" name="search_type" id="local" value="local" checked> Groups Radio buttons come in groups Groups are defined by shared name attributes

26 Radio Button Attributes
name only one field for a group of radio buttons the name attribute does the linking if buttons don't link, check name fields id must be unique for each element identifies a radio button uniquely value what the value the field will have if this button is checked checked which button of a group will be the default

27 Example <form action=" method="post"> <table width="75%" border="0"> <tr> <td width="25%"><label for="label">Enter query:</label></td> <td width="75%"><input name="field_example" id="field_example3" type="text" value=""></td> </tr> <td><label for="local">Search type:</label></td> <td>Local: <input type="radio" name="search_type" id="local" value="local" checked> Full: <input type="radio" name="search_type" id="full" value="full"></td> <tr><td></td><td><input name="submit" type="submit"></td></tr> </table> </form>

28 Grouping fieldset tag can be used to group logical elements
like radio buttons

29 Example <tr><td></td> <td> <fieldset>
<legend align="top">Search type</legend> <label for="local">Local</label> <input type="radio" name="search_type" id="local" value="local" checked> <label for="full">Full</label> id="full" value="full"> </fieldset> </td> </tr>

30 Selection lists Radio buttons are not good for long lists of options
menus – good for single selection list box – good for larger lists and multiple selection Problem awkward to use the INPUT element different structure needed

31 Select element Select element specifies a selection list
either a menu (size=1), or a list box (size > 1) Contains option elements to specify each choice

32 Example <td> <select size="1" name="search_type"
id="search_type"> <option>Local</option> <option>Full</option> </select> </td>

33 Attributes Select element Option element
size is the number of elements displayed at one time 1 = menu otherwise box of given height multiple means that multiple selections are allowed name is the field name Option element value is the value of the field if this option is chosen selected identifies the default value

34 Example <td> <select size="4" name="search_type" id="search_type" multiple> <option value="local">Local</option> <option value="spec">Special Collections</option> <option value="tech">Technical Reports</option> <option value="press">Press Releases</option> <option value="full">Full</option> </select> </td>

35 Buttons Types submit button reset button action (or push) button
sends the request to the server reset button returns all fields to default action (or push) button can execute a scripted action user-formatted button separate button element

36 Reset and submit Must have a submit button value attribute
reset is optional value attribute controls the text of the button doesn't have to be "Submit"

37 User-formatted button
Example <button type="submit">Run the <strong>search</strong></button> Embedded HTML displayed in button

38 More form elements Password Hidden File
input element type = "password" typed text not displayed Hidden input element type = "hidden" contents not displayed not editable by user vulnerable to hacking File input element type = "file" lets the user choose a file to upload (as in COL)

39 Still more form elements
Image input element type = "image" like a submit button, but location information in request Textarea not an input tag <textarea> multi-line input allowed element contents become default text

40 Moving through a form: tabs
Tabs move from one field to another always in HTML order Can specify tab order in input elements tabindex attribute

41 Moving through a form: keys
We can also jump around in the form Using access keys accesskey attribute

42 Final example

Download ppt "HTML IV (Forms) Robin Burke ECT 270."

Similar presentations

Video, audio, embed, iframe, HTML Form

Video, audio, embed, iframe, HTML Form
Technologies for web publishing Ing. Václav Freylich Lecture 4.

Technologies for web publishing Ing. Václav Freylich Lecture 4.
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.

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

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 Review. 2 Using Forms tag  Contains the form elements on a web page  Container tag tag  Configures a variety of form elements including text.
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. XP Objectives Explore how Web forms interact with Web servers Create form elements Create field sets and legends Create.
Outline IS400: Development of Business Applications on the Internet Fall 2004 Instructor: Dr. Boris Jukic Table, Forms, Metatags and Frames.

Outline IS400: Development of Business Applications on the Internet Fall 2004 Instructor: Dr. Boris Jukic Table, Forms, Metatags and Frames.
Web Development & Design Foundations with XHTML Chapter 9 Key Concepts.

Web Development & Design Foundations with XHTML Chapter 9 Key Concepts.
Chapter 10 Form Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.

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.

Principles of Web Design 6 th Edition Chapter 11 – Web Forms.
1 Web Developer & Design Foundations with XHTML Chapter 6 Key Concepts.

1 Web Developer & Design Foundations with XHTML Chapter 6 Key Concepts.
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 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.

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.

1 Creating Web Forms in HTML Web forms collect information from customers Web forms include different control elements including: –Input boxes –Selection.
XHTML Introductory1 Forms Chapter 7. XHTML Introductory2 Objectives In this chapter, you will: Study elements Learn about input fields Use the element.

XHTML Introductory1 Forms Chapter 7. XHTML Introductory2 Objectives In this chapter, you will: Study elements Learn about input fields Use the element.
Robinson_CIS_285_2005 HTML FORMS CIS 285 Winter_2005 Instructor: Mary Robinson.

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.

CSC 2720 Building Web Applications HTML Forms. Introduction  HTML forms are used to collect user input.  The collected input is typically sent to a.
Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.

Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.
HTML Forms.

HTML Forms.
LOGO FORMs in HTML CHAPTER 5 Eastern Mediterranean University School of Computing and Technology Department of Information Technology ITEC229 Client-Side.

LOGO FORMs in HTML CHAPTER 5 Eastern Mediterranean University School of Computing and Technology Department of Information Technology ITEC229 Client-Side.

Similar presentations

Ads by Google