Focus of the last lecture was on HTML Lists & Tables

Slides:



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

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.
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)
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.
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.
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 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.
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. 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.
Creating Web Page Forms. Introducing Web Forms Web forms collect information from users Web forms include different control elements including: –Input.
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.
1 Review of Form Elements. 2 The tag Used in between tags.  Form elements(text control, buttons, etc.. ) goes here. OR  Form elements(text control,
HTML Forms a form is a container for input elements on a web page input elements contain data that is sent to the web server for processing.
HTLM Forms CS3505. Form Handling in Browser html User Files out form WEbBROWSErWEbBROWSEr User read response submit Get URL?input html Get file html script.
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.
Creating Forms on a Web Page. 2 Introduction  Forms allow Web developers to collect visitor feedback  Forms create an environment that invites people.
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.
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 Structure II (Form) WEEK 2.2. Contents Table Form.
XP Tutorial 6New Perspectives on HTML, XHTML, and DHTML, Comprehensive 1 Creating Web Page Forms Designing a Product Registration Form Tutorial 6.
Tutorial 6 Working with Web Forms
Client-Side Internet and Web Programming
Making your HTML Page Interactive
How to Write Web Forms By Mimi Opkins.
Introduction to HTML Forms and Servlets
CS3220 Web and Internet Programming HTML Tables and Forms
HTML Forms Pat Morin COMP 2405.
>> More on HTML Forms
FORMS Explained By: Sarbjit Kaur.
HTML IV (Forms) Robin Burke ECT 270.
ITE 115 Creating Web Page Forms
Basic XHTML Tables XHTML tables—a frequently used feature that organizes data into rows and columns. Tables are defined with the table element. Table.
Web Programming– UFCFB Lecture 10
Lesson 8 Week 8 Designing Forms
ARUSHA TECHNICAL COLLEGE WEB DESIGN(html forms)
HTML/XHTML Forms 18-Sep-18.
During the last lecture we continued our discussion on Interactive Forms
Designing Forms Lesson 10.
1.5 FORMS.
HTML: Basic Tags & Form Tags
Creating Form Elements
Creating Form Elements
Web Development & Design Foundations with H T M L 5
Forms Data Entry and Capture
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.
Principles of Web Design 5th Edition
Creating Forms on a Web Page
Intro to Forms HTML forms are used to gather information from end-users. A form can contain elements like radio-buttons, text fields, checkboxes, submit.
HTML Forms 18-Apr-19.
Intro to Forms HTML forms are used to gather information from end-users. A form can contain elements like radio-buttons, text fields, checkboxes, submit.
© Hugh McCabe 2000 Web Authoring Lecture 8
Lesson 6: Web Forms.
Making your HTML Page Interactive
Unit 5 Create Forms.
HTML: Basic Tags & Form Tags
Presentation transcript:

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

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

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

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

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

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

A Simple Example of Interactive Forms

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

A Simple Example of Interactive Forms

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

A Simple Example of Interactive Forms

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

<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

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

A Simple Example of Interactive Forms

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>

A Simple Example of Interactive Forms

Elements of the Form (2) <P><INPUT type="hidden" name="receiver" value="altaf@vu.edu.pk"></P> <P><INPUT type="hidden" name=“subject” value=“eMail from the form”></P> <P><INPUT type="submit“ name="sendEmail" value="Send eMail to me"></P>

A Simple Example of Interactive Forms

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

<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="sendEmail" value="Send eMail"> </td> </tr></table> </FORM>

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

Review of the Tags Used in Forms

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

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

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

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

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

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

<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>

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

<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>

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

Office

<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>

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

What is the difference between checkboxes and radio buttons?

<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>

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>

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

<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>

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

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 email 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

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

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