Presentation is loading. Please wait.

Presentation is loading. Please wait.

Focus of the last lecture was on HTML Lists & Tables

Published by Modified over 6 years ago

Similar presentations

Presentation on theme: "Focus of the last lecture was on HTML Lists & Tables"— Presentation transcript:

1 CS101 Introduction to Computing Lecture 12 Interactive Forms (Web Development Lecture 4)

2 Focus of the last lecture was on HTML Lists & Tables
We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various types of lists that can be added to a Web page – un-ordered, ordered and definition lists And also, about tables: about various tags used in a table and their associated attributes

3 Today’s Lecture We will try to understand the utility of forms on Web pages We will find out about the various components that are used in a form We will become able to build a simple, interactive form

4 Interactive Forms (1) Without forms, a Web site is “read-only” – it just provides information to the user Forms enable the user to provide information to the Web site. For example, the user can: Perform searches on Web site Give comments Ask for info that is not available on the Website Place order for goods and services

5 Interactive Forms (2) Can be simple or very complex
Can fill a whole page or just a single line Can contain a single element or many Are always placed between the <BODY> and </BODY> tags of a Web page

6 Interactive Forms (3) Are GUI-based May contain: Text fields
Check boxes Buttons Scrollable lists

7 A Simple Example of Interactive Forms

8 Code for that Example <HTML> <HEAD>
<TITLE>Send to me</TITLE> </HEAD> <BODY> <H1>Send to me</H1> Code for the instructions Code for the form </BODY> </HTML>

9 A Simple Example of Interactive Forms

10 Code for the Instructions
<P>To send an message to me:</P> <OL> <LI>Type your address in the "From" field</LI> <LI>Type a short message in the "Message" field</LI> <LI>Press the "Send to me" button</LI> </OL>

11 A Simple Example of Interactive Forms

12 Code for the Form <FORM name="send " method="post" action="sendMailScriptURL"> Elements of the form </FORM>

13 <FORM name="sendEmail" method="post" action="sendMailScriptURL">
Elements of the form </FORM> name: Name given to the form method: Forms can be submitted through two alternate methods – GET & POST action: Specifies the URL that is accessed when the form is being submitted

14 Server-Side Scripts Are programs that reside on Web servers
Receive info that a user enters in a form Process that info and take appropriate action Examples: CGI scripts on Unix servers ASP scripts on Windows servers

15 A Simple Example of Interactive Forms

16 Elements of the Form (1) <P>From: <INPUT type="text" name=“sender" size="50"></P> <P>Message: <INPUT type="text" name="message" size="50"></P>

17 A Simple Example of Interactive Forms

18 Elements of the Form (2) <P><INPUT type="hidden" name="receiver" <P><INPUT type="hidden" name=“subject” value=“ from the form”></P> <P><INPUT type="submit“ name="send " value="Send to me"></P>

19 A Simple Example of Interactive Forms

20

21

22

23 <TEXTAREA name=“message” cols=“38” rows=“6” > </TEXTAREA>

24 <FORM name="sendEmail" method="post" action=“sendMailScriptURL">
<table><tr> <td>From: </td> <td><INPUT type="text" name="sender" size="50"></td> </tr><tr> <td>To: </td> <td><INPUT type="text" name="receiver" size="50"></td> <td>Subject: </td> <td><INPUT type="text" name="subject" size="50"></td> <td valign="top">Message: </td> <td><TEXTAREA name="message" cols="38"rows="6"> </TEXTAREA></td> <td colspan="2" align="right"> <INPUT type="submit" name="send " value="Send "> </td> </tr></table> </FORM>

25

26 <INPUT. type=“text”. name=“sender”. size=“50”
<INPUT type=“text” name=“sender” size=“50” value=“your address goes here” >

27 Review of the Tags Used in Forms

28 <FORM name=“nameOfTheForm” method=“get” or “post” action=“URL” > Elements of the form </FORM>

29 Single-Line Text Input Field
<INPUT type=“text” name=“fieldName” size=“widthInCharacters” maxlength=“limitInCharacters” value=“initialDefaultValue” >

30 Hidden Input <INPUT type=“hidden” name=“fieldName” value=“value” >

31 Submit Button Input <INPUT type=“submit” name=“buttonName” value=“displayedText” >

32 Multi-Line Text Input Area
<TEXTAREA name=“areaName” cols=“widthInCharacters” rows=“numberOfLines” > initial default value </TEXTAREA>

33 This was a review of the new tags (and associated attributes) that we have used in today’s examples There are many more tags that can be used in a form Let us take a look at a few

34

35 <form name="login" method="post" action="loginScript"> <table><tr> <td>User Name: </td> <td> <input type="text" name="userName" size="10"> </td> </tr><tr> <td>Password: </td> <td> <input type="password" name="password" size="10"> </td> </tr><tr> <td colspan="2" align="right"> <input type="submit" name="login" value="Log me in"> </td> </tr></table> </form>

36 Password Input Field <INPUT type=“password” name=“fieldName”
size=“widthInCharacters” maxlength=“limitInCharacters” value=“initialDefaultValue” >

37

38 <form name="login" method="post" action="loginScript"> <table><tr> <td>User Name: </td> <td> <input type="text" name="userName" size="10"> </td> </tr><tr> <td>Password: </td> <td> <input type="password" name="password" size="10"> </td> </tr><tr> <td colspan="2"> <input type="checkbox" name="remember" value="remember"> Remember my user name and password<br> </td> </tr><tr> <td colspan="2"> <input type="submit" name="login" value="Log me in"> </td> </tr></table> </form>

39 Checkbox Input Element
<INPUT type=“checkbox” name=“checkboxName” checked value=“checkedValue” >

40 Office

41 <form name="login" method="post" action="loginScript"> <table><tr> <td>User Name: </td> <td> <input type="text" name="userName" size="10"> </td> </tr><tr> <td>Password: </td> <td> <input type="password" name="password" size="10"> </td> </tr><tr> <td valign="top">Logging in from:</td> <td> <input type="radio" name="from" value="home"> Home<br> <input type="radio" name="from" value="office"> Home<br> <input type="radio" name="from" value="university" checked> University </td> </tr><tr> <td colspan="2" align="right"> <input type="submit" name="login" value="Log me in"> </td> </tr></table> </form>

42 Radio Button Input Element
<INPUT type=“radio” name=“radioButtonName” checked value=“selectedValue” >

43 What is the difference between checkboxes and radio buttons?

44

45 <form name="login" method="post" action="loginScript"> <table><tr> <td>User Name: </td> <td><input type="text" name="userName" size="10"></td> </tr><tr> <td>Password: </td> <td> <input type="password" name="password" size="10"> </td> </tr><tr> <td valign="top">Logging in from:</td> <td> <select size="2" name="from"> <option value="home"> Home <option value="office"> Office <option value="university" selected> University </select> </td> </tr><tr> <td colspan="2"> <input type="submit" name="login" value="Log me in"> </td> </tr></table> </form>

46 Select from a (Drop Down) List
<SELECT name=“listName” size=“numberOfDisplayedChoices” multiple > <OPTION value=“value1”> text1 <OPTION value=“value2” selected> text2 <OPTION value=“value3”> text2 … </SELECT>

47

48 File Upload Input Element
<INPUT type=“file” name=“buttonName” value=“nameOfSelectedFile” enctype=“fileEncodingType” >

49 <form. name=“uploadForm”. method=“post”
<form name=“uploadForm” method=“post” action=“uploadScript” <input type=“file” name=“uploadFile” enctype=“multipart/form-data” > <input type=“submit” name=“submit” value=“Upload” > </form>

50 Reset Button Input Element (Resets the contents of a form to default values)
<INPUT type=“reset” value=“dispalyedText” >

51

52 Assignment # 4 Create a simple Web page to provide electronic greeting message service on the Internet. Your Web page should contain: The heading of the Web page Input fields to capture information (i.e. names and addresses) about the sender and the receiver of the message List of the available greeting messages Button to send the card More info about this assignment is available on the CS101 Web page

53 Today’s Lecture was the …
We looked at the utility of forms on Web pages We found out about the various components that are used in a form We became able to build a simple, interactive form

54 Next Web Dev Lecture: More Complex Form
Today we started our discussion on interactive forms During the next Web Dev Lecture we continue this discussion and learn ways of constructing more complex interactive forms We may also get our first taste of JavaScript during that lecture

Download ppt "Focus of the last lecture was on HTML Lists & Tables"

Similar presentations

XP 1 Creating Web Page Forms Designing a Product Registration Form Tutorial 6.

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.

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.
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.
16/19/2015CS120 The Information Era CS120 The Information Era Chapter 5 – Advanced HTML TOPICS: Introduction to Web Page Forms and Introductory Javascript.

16/19/2015CS120 The Information Era CS120 The Information Era Chapter 5 – Advanced HTML TOPICS: Introduction to Web Page Forms and Introductory Javascript.
1 CS101 Introduction to Computing Lecture 12 Interactive Forms (Web Development Lecture 4)

1 CS101 Introduction to Computing Lecture 12 Interactive Forms (Web Development Lecture 4)
Web Development & Design Foundations with XHTML Chapter 9 Key Concepts.

Web Development & Design Foundations with XHTML Chapter 9 Key Concepts.
Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various.

Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various.
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.
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.

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 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.
CO1552 Web Application Development HTML Forms. Websites can be made more interactive by providing facilities for users to provide data To get user entered.

CO1552 Web Application Development HTML Forms. Websites can be made more interactive by providing facilities for users to provide data To get user entered.
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.
1 VU. 2 CS101 Introduction to Computing Lecture 15 More on Interactive Forms (Web Development Lecture 5)

1 VU. 2 CS101 Introduction to Computing Lecture 15 More on Interactive Forms (Web Development Lecture 5)
HTML Forms. Today’s Lecture We will try to understand the utility of forms on Web pages We will find out about the various components that are used in.

HTML Forms. Today’s Lecture We will try to understand the utility of forms on Web pages We will find out about the various components that are used in.
JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We.

JavaScript. During the last lecture We looked at the utility of forms on Web pages We found out about the various components that are used in a form We.
HTML Forms.

HTML Forms.
HTML Forms. Today’s Lecture We will try to understand the utility of forms on Web pages We will find out about the various components that are used in.

HTML Forms. Today’s Lecture We will try to understand the utility of forms on Web pages We will find out about the various components that are used in.
ITCS373: Internet Technology Lecture 5: More HTML.

ITCS373: Internet Technology Lecture 5: More HTML.

Similar presentations

Ads by Google